Example of razzle with PWA?

[rwehresmann]

Is there a working example of razzle with PWA? I know there is a plugin made with this intention, but I just cannot make it work, not sure if there aren't missing instructions there.

If someone could provide an example, it would be great!

[fivethreeo]

https://github.com/jaredpalmer/razzle/discussions/1448

[rwehresmann]

How can I merge this whit my current razzle.config.js below?

module.exports = {
  plugins: ['babel-ts'],
  modify: require('razzle-heroku'),
};

[fivethreeo]

You should install razzle canary. https://github.com/jaredpalmer/razzle/blob/canary/examples/with-heroku/README.md

[fivethreeo]

const { InjectManifest } = require("workbox-webpack-plugin");

module.exports = {
  options: {
    forceRuntimeEnvVars: ['HOST', 'PORT']
  },
  modifyWebpackConfig({
    env: {
      target, 
      dev, 
    },
    webpackConfig, 
    webpackObject, 
    options: {
      razzleOptions,
      webpackOptions, 
    },
    paths, 
  }) {
    const appConfig = Object.assign({}, webpackConfig);
    if (target === "web") {

      appConfig.plugins.push(
        new InjectManifest({ swDest: "sw.js", swSrc: "services.js" }),
      );
    }

    // Do some stuff...
    return appConfig;
  },
};

If you figure this out, please report on your findings 😀

[fivethreeo]

Ts is builtin in canary.

[fivethreeo]

with decorators even https://github.com/jaredpalmer/razzle/tree/canary/examples/with-typeorm-graphql

[rwehresmann]

I couldn't make workbox-webpack-plugin configuration work. There is some issue of invalid MIME type when loading the service worker. However, I gave another try to razzle-plugin-pwa and could make it work now. I think this is the easiest way to go :)