[React] Override webpack config for create-react-app without ejection

Posted 2021-01-30 Answer1215

The default service worker that comes with create-react-app doesn‘t allow for very much configuration. We‘ll replace that default service worker in two ways.

First, we‘ll create a blank service worker js file, and use that as our custom service worker.

Next, we‘ll re-write the default webpack config with react-app-rewired, and utilize the InjectManifest workbox webpack plugin. This will allow us to create a totally custom service worker that still allows us to use workbox, without ejecting our app.

 

Install:

    "react-app-rewired": "^1.6.2",
    "react-scripts": "^2.1.1",
    "serve": "^10.1.1",
    "workbox-webpack-plugin": "^3.6.3"

 

Create a config-overrides.js in root folder:

Default create-react-app using ‘GenerateSW‘ function, we want to override with ‘InjectManifest‘ function. 

/* config-overrides.js */

const WorkboxWebpackPlugin = require(‘workbox-webpack-plugin‘)

module.exports = function override(config, env) {
  config.plugins = config.plugins.map(plugin => {
    if(plugin.constructor.name === ‘GenerateSW‘) {
      return new WorkboxWebpackPlugin.InjectManifest({
        swSrc: ‘./src/sw.js‘, // point to the sw.js file we will create later
        swDest: ‘service-worker.js‘ // will be generatedin pulbic folder
      })
    }

    return plugin
  })

  return config
}

 

Update package.json:

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "build:serve": "serve -s build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

 

Create src/sw.js:

workbox.skipWaiting();
workbox.clientsClaim();

 

Run:

npm run build