Environment Variables
Environment variables are a way to store app state and config data outside of your codebase. A guide to access them safely within Remix PWA
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 Logger
s), 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