How to add environment variables to your Svelte JS app
99% of the time, applications are going to need some unique configuration values that are very environment specific. How do we do this with a Svelte application?
You can use a plugin called @rollup/plugin-replace to pass environment variables down to your Svelte application. Let’s go over how to do this!
Use @rollup/plugin-replace to add environment variables
This plugin is more of a emulation of dotenv. This plugin finds the defined properties, and replaces it with the value that it was given during compilation time.
Let’s go step by step how to use this module.
Step 1: Install plugin-replace module
npm install --save-dev @rollup/plugin-replace
Step 2: Update rollup.config.js
Go into the rollup.config.js file, and import the plugin replace module.
import replace from '@rollup/plugin-replace';
const production = !process.env.ROLLUP_WATCH;
export default {
plugins: [
replace({
FOO: 'bar',
// 2 level deep object should be stringify
process: JSON.stringify({
env: {
isProd: production,
}
}),
}),
],
};
Add the replace() inside the plugin property.
The function replace() accepts an object. Any deeper than 1 level objects need to be JSON.stringify().
Step 3: Access env variable in Svelte component
You can access the environment variable as if it was a global variable inside your Svelte component.
<script>
const mssg = process.env.isProd ? 'This is production mode' : FOO;
</script>
<h1>{mssg}</h1>
In the example above I’m creating a variable that uses the environment variables to determine what string output it should print to the user.
Oh wow, you’ve made it this far! If you enjoyed this article perhaps like or retweet the thread on Twitter:
I like to tweet about Svelte and post helpful code snippets. Follow me there if you would like some too!
