Integrating ReactJS With Flask

Prerequisites

NPM

• NPM
• CSS and JavaScript should live in separate directories within the static directory, e.g. my_proj/static/css/ and my_proj/static/js/
• Create a package.json file in the project's static directory:

$ cd app_package/static
$ npm init

Webpack

Webpack is a module bundler, similar to Browserify, gulp, and grunt. Supposedly it is easier to configure in that it can intelligently make more assumptions about what needs to be accomplished. However that ease may come at the expense of defining more specific configurations with Browserify and gulp.

Installation

Run installation from the static directory.

$ npm install webpack webpack-cli --save-dev

Configuration

Create a configuration file named webpack.config.js in the static directory:

const webpack = require('webpack');
const config = {
    entry:  __dirname + '/js/index.js',
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js',
    },
    resolve: {
        extensions: ['.js', '.jsx', '.css']
    },
};
module.exports = config;

Add run commands to package.json:

"scripts": {
    "build": "webpack -p --progress --config webpack.config.js",
    "dev-build": "webpack --progress -d --config webpack.config.js",
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --progress -d --config webpack.config.js --watch"
},

Babel

Babel converts JavaScript that is ahead of browser standards (e.g. React JSX) into JavaScript syntax that is compatible with all current browsers.

Installation

Run installation from the static directory.

$ npm install babel-loader babel-core babel-preset-env babel-preset-react --save-dev

Configuration

Add babel presets to package.json.

"babel": {
    "presets": [
      "es2015",
      "react"
    ]
  }

Alternatively, the presets could be added to a .babelrc file:

/* 
    ./.babelrc
*/  
{
    "presets":[
        "es2015", "react"
    ]
}

Add a babel-loader rule to the Webpack config:

module: {
  rules: [
    {
      test: /\.jsx?/,
      exclude: /node_modules/,
      use: 'babel-loader'
    }
  ]
}

ReactJS

React installation (again, in the static directory):

$ npm install react react-dom --save-dev

Front-end

Example can be found at DailyProgress (GitHub).

JavaScript

Create a React component:

/*
 * . location e.g. /my_app/js/components/App.jsx
 */
import React from 'react';

export default class App extends React.Component {
    render() {
        return (
            <div>Hello, World from React component!</div>
        );
    }
}

Create an entry point, e.g. /static/js/index.js:

/*
 *  location e.g. /my_app/js/index.js
 */
import React from 'react';
import ReactDOM from 'react-dom';
import Activities from './components/App.jsx';

ReactDOM.render(<App />, document.getElementById('root'));

Jinja2 template

Include the output script as defined in webpack.config.js:

<script defer src="{{ url_for('static', filename='dist/bundle.js') }}"></script>

Make sure there is an element in the DOM that will match the element passed to ReactDOM.render() in the entry point JavaScript file.

Make sure a route is defined in the Flask app for the Jinja template.

Building the distribution package

Use any of the scripts defined in package.json to build the distribution, e.g.:

$ npm run watch
$ npm run bulid
$ npm run dev-build

Any changes to the JavaScript requires the distribution to be rebuilt. This can be handled automatically by having npm run watch running in the background.

The browser will likely cache the JavaScript bundle, making it necessary to explicitly refresh it in the browser to view changes made after running the server for the first time.

Viewing results

Run the Flask server with python run.py.

In a browser navigate to the appropriate route in the Flask app, e.g. http://localhost:5000/

The output from the

Notes

See also

• Set Up A React Environment Using Webpack and Babel - Scotch.io