This is in order to prevent the browser caching a previous version of the bundle when we make a new release.
We're using django-webpack-loader and the associated webpack-bundle-tracker to achieve this.
The webpack-bundle-tracker runs as a webpack plugin on the client-side and creates a JSON file with information about all the bundles webpack created and their location.
The django-webpack-loader provides a django tag render_bundle that renders a bundle using the latest hash from the location specified in settings.py.
The location is either:
in development mode is the webpack-dev-server running in the node container on port 3000.
in production mode all the bundles are generated by our build script into static/bpaotu/js/.
Hot reloading for the FE
As described above, the webpack-dev-server is responsible for watching the file system and recompiling our front-end code on each change. The bundles it creates are served using HTTP running in the node container on port 3000.
CORS had to be set up on the webpack-dev-server to allow request from localhost:8000.
The latest react hot loader works only with babel, but babel is happy to compile ts and tsx files for us. Our webpack configuration has been changed to use babel instead of ts-loader.
Babel doesn't do any type-checking though, so we use the fork-ts-checker-webpack-plugin webpack plugin to do the TypeScript type checking. This is to ensure that our compilation fails if there are any TypeScript errors in both development or production compilation mode.
References:
Blog post explaining setting up React hot reloading with Django. Unfortunately, this is outdated so many changes have to be applied, but it still explains the concepts.
Hashes included in the js bundles
This is in order to prevent the browser caching a previous version of the bundle when we make a new release.
We're using
django-webpack-loaderand the associatedwebpack-bundle-trackerto achieve this.The
webpack-bundle-trackerruns as a webpack plugin on the client-side and creates a JSON file with information about all the bundles webpack created and their location.The
django-webpack-loaderprovides a django tagrender_bundlethat renders a bundle using the latest hash from the location specified insettings.py.The location is either:
webpack-dev-serverrunning in thenodecontainer on port3000.static/bpaotu/js/.Hot reloading for the FE
As described above, the
webpack-dev-serveris responsible for watching the file system and recompiling our front-end code on each change. The bundles it creates are served using HTTP running in thenodecontainer on port3000.CORS had to be set up on the
webpack-dev-serverto allow request fromlocalhost:8000.The latest react hot loader works only with
babel, butbabelis happy to compiletsandtsxfiles for us. Our webpack configuration has been changed to usebabelinstead ofts-loader.Babeldoesn't do any type-checking though, so we use thefork-ts-checker-webpack-pluginwebpack plugin to do the TypeScript type checking. This is to ensure that our compilation fails if there are any TypeScript errors in both development or production compilation mode.References:
Blog post explaining setting up React hot reloading with Django. Unfortunately, this is outdated so many changes have to be applied, but it still explains the concepts.
ReactJS and Django Hot Reloading
Docs for the latest version of React Hot Loader, especially the Typescript Integration part.
React Hot Loader Typescript integration