ReactJS - tlam/Wiki GitHub Wiki

Using reactjs with flask/django

Setup webpack as usual but manage your own javascript by excluding html-webpack-plugin:

 // webpack.config.js
 module.exports = {
   entry: [
     './static/js/index.js'
   ],
   output: {
     path: __dirname + '/static',
     filename: 'index_bundle.js'
   },
   module: {
     loaders: [
       {test: /\.js$/, include: __dirname + '/static/js', loader: 'babel-loader'}
     ]
   }
 };

Assuming webpack-dev-server is running under port 8080, the compiled javascript will be available at http://localhost:8080/index_bundle.js

Your html where the javascript will be loaded:

 <html>
   <head>
   </head>
   <body>
     {% block content %}{% endblock %}
     <div id="app"></div>
     {% if DEBUG %}
       <script src="http://localhost:8080/index_bundle.js"></script>
     {% else %}
       <script src="{{ url_for('static', filename='index_bundle.js') }}"></script>
     {% endif %}
   </body>   
 </html>

For production, it might be best to setup a pipeline to send the generated javascript to the server.

Under development environment, it's best to run your regular django/flask dev server and also run webpack-dev-server under a different port.

⚠️ GitHub.com Fallback ⚠️