When I decided to use React in my projects, I wanted, besides upgrading language, framework and libraries to a new one, to remove a lot of other problems that old languages could have or could be difficult to solve.
The first deploy was successful. Great! But, a few days after, the second one wasn’t. What happened? My new page was in the code but it didn’t appear in production… A CTRL+F5 solved it… But it shouldn’t be like that. What could I do?
After a lot of research, I finally found a way to solve it. And it was more simpler than I imagined.
The problem is that the index.html generated in the build process was cached and was never replaced. So, when there were new pages, they just weren’t displayed.
The solution:
To resolve it, in your webpack file, use the HtmlWebpackPlugin plug-in and use a different number as a uri parameter for each new deployment, as follows:
const HtmlWebpackPlugin = require('html-webpack-plugin');
...
const DEPLOY_NUMBER = '999';
...
plugins: [
...
new HtmlWebpackPlugin({
filename: 'index.html?d=' + DEPLOY_NUMBER,
template: 'public/index.html',
}),
...This will place the parameter at the end of the URI, for example: https://yoursite.com/index.html?d=999 and when you change the deployment number, the browser will load another version of the server file.
Easy, isn’t it? If you liked it, leave a comment, or a suggestion below! Thank you.