Environment Variables

Remix PWA does not do anything to or with environment variables (mostly). In Remix PWA, the process object is not available (as service workers run in the client), and as such, accessing them directly is not possible.

However, Remix PWA isn't unaware of some of these variables. The main and only one being NODE_ENV, this variable is used to determine the state for which the service worker is bundled. As a production value will bundle the service worker with optimizations and less exposed stuffs (like Loggers), while a development value will bundle the service worker with full utilities to help you debug and develop.

You can also utilise process.env.NODE_ENV (in that order) within your service worker as Remix PWA would handle substituting the value for you at compilation time.

​

Custom Variables

Remix PWA now allows for injecting custom variables via the buildVariables option in the Vite plugin configuration. This allows you to inject variables that are accessible within the service worker.

// vite.config.ts
export default defineConfig({
  plugins: [
    remixPWA({
      buildVariables: {
        'process.env.PUBLIC_KEY': 'my-public-key',
        // can also be in another format
        'myVery_PuBlick3y': 'my-public-key-2',
      },
    }),
  ],
});

// entry.worker.ts
console.log(process.env.PUBLIC_KEY); // my-public-key
console.log(process.env.myVery_PuBlick3y); // my-public-key-2