0
votes

I have a client-server architecture with React+Redux app that uses Webpack to bundle the code into a dist folder, and a go server which serves this files and I'm trying to implement react-hot-reloading in this configuration. The client communicates with the go server with API calls and web-sockets.

All the examples and guides which I saw were talking about Express or Webpack-Dev-Server server as a prerequisite for the implementation of hot reloading, for example: https://www.javascriptstuff.com/webpack-hmr-tutorial/

https://thoughtbot.com/blog/setting-up-webpack-for-react-and-hot-module-replacement

Is there a way to implement hot-reloading in such configuration? The only solution I could think of was to use an Express or a Webpack-Dev-Server server in the development process and redirect the API calls and web-sockets to the server, but it seems like an overkill.

1

1 Answers

0
votes

There are 2 common pitfalls related to those issues:
1. Running webpack-dev-server in production.
2. Getting CORS security violations when React script bundle(s) are downloaded from one server and then the code in the bundles attempts to call another server API.

If the client gets everything, including script bundles and API responses, from Express then there is no room for CORS.

To facilitate Hot Reloading in development, Express should get the bundles from webpack-dev-server and then serve it to the client. It is not an overkill, it should be a norm that saves a lot of development time. Finally, in production Express should get bundles from disk.