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.

Sucesso! Nosso primeiro componente atinge 20 mil downloads

Em dezembro de 2018, precisava de um componente visual que simulasse uma barra horizontal com múltiplos valores diferenciados por cores. Foi difícil de encontrar. Muitos componentes estavam agrupados em pacotes com milhares de outros componentes. Não era o que eu queria.

react-horizontal-stacked-bar-chart

Então pensei: muitas outras pessoas devem estar precisando do mesmo componente que eu. Porque não criar um e disponibilizá-lo nos repositórios do git e npmjs?

Criei o react-horizontal-stacked-bar-chart e desde então já foram mais de 20 mil downloads, 45 outros projetos que o utilizam, 41 commits, 11 estrelas no git, 4 forks 3 defeitos/sugestões implementados, além de várias melhorias.

Obrigado a todos que o utilizam! E agradeço a quem puder contribuir com esse projeto.