This is a follow up article to React.js with Flask and a touch of AMD that explores a new release of React (0.14) as well as webpack to manage all the assets. More and more JavaScript libraries are available on NPM every day. The r(equire).js and AMD will seem tedious once you’ve tried CommonJS (via Webpack or Browserify). Bootstrap recently moved away from LESS to adopt SASS, so we will include some SASS for free as well.

Because, we are modern Python developers we our web application will be a Python package which gets defined in a setup.py file.

Our application will be as minimal as possible while including some of the modern tooling available. It’s good practice to put the code into a directory named just like your module. So, we will have demo/__init__.py.

This file does a lot at once, let’s explain every bits of it.

__version__ is computed from the package name to avoid duplication.

debug is read from the environment variables, this is a best practice accoring to the 12-factor app.

then we initiate webpack with a manifest.json file. This file contains a mapping between the resource JavaScript or CSS in our case and it’s URI. Those files can be cached for ever as recommended by YSlow!.

two routes, one for our index page and the other for the assets. Of course, the assets should be served by the web server (using for example nginx try_files).

and the default web server for the development mode.

Let’s dive into the demo/templates/index.html file:

This file uses Jinja2 and defines two assets, main_css and app_js. For the sake of it, both of them are coming from a React.js and a SASS stylesheet that will get handled by webpack for us. Firstly lest create those CSS and JavaScript resources we need. The SASS stylesheet: assets/styles/main.scss:

And the React.js script assets/scripts/app.js:

In the past we had to translate those pseudo JavaScript (called into JSX) into ES5 via a tool called JSXTranformer. ES2015 (aka ES6) is gaining a huge momentum. Babel transpiles the modern JavaScript into a version that is understood by modern browsers. How do we get those two exotic files into our previously defined main_css and app_js? Enters Webpack with its config file webpack.config.js:

This is the biggest chunk, you’ll have to digest today.

it defines two entries, our main_css and app_js. How suprising?

then where those file are ending up, here: demo/public.

the modules section configures that javascript files are loaded through the babel-loader and the SASS files through the sass-loader.

finally it activates some plugins to create the manifest.json file, and produce minimized versions.

The webpack binary program will read this file and generates everything for us. When the static assets are generated, we are almost done. If you run python demo/__init__.py it shall work. But if you install it using pip, it won’t. Because pip won’t include all the other files by default. We need a MANIFEST.in file for that purpose:

Great, let’s pretend we are on our production server. The application will be installed via pip and run using gunicorn (or µWSGI, Chausette, etc.):

That’s all folks! You’ve built, installed and ran a web application that is defined in a Python package.

Next steps could be to: