Managing Multiple Environment in Snowpack
Snowpack are build tools for frontend application similar to webpack. Here tricks on how to manage more than two environments for our app.
When we working on projects, mostly we have different environments, minimum of three: development, staging, and production.
Snowpack itself has a plugin to manage .env file, called @snowpack/plugin-dotenv . The tricky part of setup the multiple environments relies on the script that is used to run development server on our local device.
Because we use create-snowpack-app to init a new project, as default, it just runs snowpack dev command to start the development server.
At this point, the development server that we just start will read the value from the .env file that we create.
What about we want to run staging environment? Maybe we can create a script called start-staging that also runs snowpack dev command. But, the development server will also read from the same .env file that has the value for development environment.
The trick to solve this issue is just using a simple bash command. Create another .env file for each environment that we want to manage.
file .env.dev
SNOWPACK_PUBLIC_ENV=DEV
SNOWPACK_PUBLIC_API_URL=https://dev.comfile .env.staging
SNOWPACK_PUBLIC_ENV=STAGING
SNOWPACK_PUBLIC_API_URL=https://stag.comfile .env.prod
SNOWPACK_PUBLIC_ENV=PROD
SNOWPACK_PUBLIC_API_URL=https://prod.comAfter that, change our script to:
"start-dev": "cp -v .env.dev .env && snowpack dev""start-stag": "cp -v .env.staging .env && snowpack dev""start-prod": "cp -v .env.prod .env && snowpack dev"
So, another time we want to develop in a staging environment we can start npm run start-stag and the development server will read the correct values for it because essentially we just copy the value before running the snowpack dev server.
And if we want to build the app so we can deploy it, we can use these script:
"build-dev": "cp -v .env.dev .env && snowpack build""build-stag": "cp -v .env.staging .env && snowpack build""build-prod": "cp -v .env.prod .env && snowpack build"
Again, we need to copy the correct values to the only one .env file, because that the way snowpack will read any environment file.
If we want to read the environment value that we just define on the .env file, we can use import.meta.env.SNOWPACK_PUBLIC_* .
Snowpack itself has a rule that we must define our environment variable name after SNOWPACK_PUBLIC_ . This is for security reminder reason because snowpack wants to tell us this will go to the browser where everyone can access it, so we want to avoid sending sensitive keys/env.
I know there is another solution for this that includes creating a script file that more complex. But, if we need a simple solution and don't have a problem with it, this approach is enough.
Do you have another solution to manage multiple environments in your front-end app? I would like to hear about it.
Thank you for reading. Have a good day.
