How do you use variables in the HTML webpack outputs?

Through the use of html-webpack-plugin you can inject variables into the HTML your webpack build generates - no more hardcoding!

Here's how you use it:

First, run yarn add -D html-webpack-plugin or npm install --save-dev html-webpack-plugin

Then, add the following to your webpack config:

/* webpack.config.js */
const HtmlWebpackPlugin = require('html-webpack-plugin');
// rest of your config
plugins: [
  new HtmlWebpackPlugin({
    template: 'index.tmp.html',
    filename: 'index.html',
    templateParameters: {
      some_variable: process.env.SOME_VAR,
    },
  }),
];

index.tmp.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title><%= some_variable %></title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

In order for process.env.SOME_VAR to have a variable, you can either use a .env file, or enter the values as part of your CI's configuration (services such as CircleCI and Netlify support this).

Remember that variables injected this way are visible to your users!

Tired of infinite re-renders when using useEffect?

A few years ago when I worked at Atlassian, a useEffect bug I wrote took down part of Jira for roughly one hour.

Knowing thousands of customers can't work because of a bug you wrote is a terrible feeling. To save others from making the same mistakes, I wrote a single resource that answers all of your questions about useEffect, after teaching it here on my blog for the last couple of years. It's packed with examples to get you confident writing and refactoring your useEffect code.

In a single afternoon, you'll learn how to fetch data with useEffect, how to use the dependency array, even how to prevent infinite re-renders with useCallback.

Master useEffect, in a single afternoon.