Developer’s Mind: How I had resolved the cache problem of React to not break new pages in production

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.