react-hot-loader: react-hot-loader-minimal-boilerplate does not work with Flask server

I am working on an app with a Flask backend and a React frontend, and I was unable to get hot reloading working. I then tried modifying the react-hot-loader-minimal-boilerplate example to work with a Flask backend, and then hot reloading stopped working as well, and I had to Ctrl-F5 it in order to get the changes to show. The Flask server code is given below:

from flask import Flask, render_template

app = Flask(__name__, static_url_path='',
			template_folder='', static_folder='dist')


@app.route('/')
def main():
  return render_template('index.html')


if __name__ == '__main__':
  app.run(debug=True, reloader_type='stat', port=8080)

I also modified package.json, and moved the script to start:

{
	"scripts": {"start": "webpack-dev-server --hot --inline --progress"},
	"name": "react-hot-loader-minimal-boilerplate",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"repository": {
		"type": "git",
		"url": "git+https://github.com/wkwiatek/react-hot-loader-minimal-boilerplate.git"
	},
	"keywords": [],
	"author": "",
	"license": "ISC",
	"bugs": {
		"url": "https://github.com/wkwiatek/react-hot-loader-minimal-boilerplate/issues"
	},
	"homepage": "https://github.com/wkwiatek/react-hot-loader-minimal-boilerplate#readme",
	"dependencies": {
		"react": "^15.4.2",
		"react-dom": "^15.4.2",
		"react-router-dom": "^4.2.2"
	},
	"devDependencies": {
		"babel-core": "^6.23.1",
		"babel-loader": "^6.3.2",
		"babel-polyfill": "^6.23.0",
		"babel-preset-latest": "^6.22.0",
		"babel-preset-react": "^6.23.0",
		"react-hot-loader": "^3.0.0-beta.6",
		"webpack": "^2.2.1",
		"webpack-dev-server": "^2.4.1"
	}
}

Any help is appreciated, thanks!

EDIT: I should additionally note that I built the app.js file using the “webpack -w” command.

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 24

Most upvoted comments

There is no dependence on Flask or any backend in this library. I think you may have this a bit confused. In development, you have the webpack-dev-server which serves two files index.html and main.js. With just the basic set-up, it assumes NO backend API. It looks like here you are trying to use Flask to also serve index.html and main.js (although I see no code right now that additionally serves main.js) This will not work. You cannot use both webpack-dev-server and Flask. You have to use webpack-dev-server. The only use for Flask is to proxy API requests and it looks like now you are not even using webpack-dev-server because you are running webpack -w.

I suggest doing this instead:

Use webpack-dev-server like in the example. Copy exactly the example.
Set up your flask server to target HOST = 0.0.0.0
Enable proxy mode as below to route your api requests starting with /api to localhost:5000

Here is an example config for the dev server with proxy mode(I am using Flask for an API server in project). It has socket.io also, you may not need that.

  devServer: {
    hot: true,
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        pathRewrite: {'^/api': ''}
      },
      '/socket.io': {
        target: 'http://localhost:5000',
        ws: true
      }
    },
    historyApiFallback: true,
    contentBase: resolve(__dirname, 'public'),
    port: 8881,
    publicPath: '/',
    host: '0.0.0.0',
    overlay: {
      warnings: true,
      errors: true
    },
    watchContentBase: true,
    watchOptions: {
      poll: true
    }
  },

mrwillis on Oct 12, 2017

@alexanderwhatley There is no hot reloading in production. All of this is just for development. You don’t need to hot reload anything. In production, you use webpack to bundle main.js and then all you’re doing is hosting the bundled index.html and main.js on a web server. A popular set-up for instance using Flask is using nginx as a reverse proxy, hosting main.js and index.html, and then ‘reverse proxying’ any API requests to a gunicorn server.

mrwillis on Oct 19, 2017