“Process is not defined”, the compiler just slapped you in the face again. You are tempted to hardcode your environment variables values in your code, then you realize just how much of a bad idea this is!

The default configuration of the sveltejs/template starter project doesn’t allow the use of environment variables out-of-the-box, The purpose of this article is to show you how you can change that.

Few tweaks in the default configuration will be all that is required, and rollup.js is where all the magic will happen.

Let’s start!

Make sure you already have a svelte project setup. If not, you can create one quickly:

degit sveltejs/template your-super-secret-project

---

Dependencies

First of all, you’ll want to install two dev dependencies. open your terminal and paste the following code:

npm i dotenv @rollup/plugin-replace --save-dev

#Or If you are using yarn
yarn add dotenv @rollup/plugin-replace -D

_dotenv _will load your environment variables from the .env file in the root directory of your project.

@rollup/plugin-replace will replace process.env.YOUR_ENV_VARS with their respective values.

#svelte #front-end-development #sveltejs #javascript