Using Environment Variables with Express for Local Dev & Azure App Service

Environment variables are an important part of all projects, passing configuration settings, connection strings, etc, from local to production environments.

By the end of this post, you’ll be able to configure both local and Azure App Service environment variables for your node express app using VS Code.

We’ll start from scratch with a basic express application.

  • Node.js
  • Visual Studio Code (VS Code)
  • Microsoft Azure Account

First, follow these steps to create the project.

  • mkdir node-express-envs
  • cd node-express-envs
  • touch index.js
  • npm init -y to create a default package.json file
  • npm install express
  • npm install nodemon dotenv --save-dev
  • code . to open VS Code

Let’s start with setting up our index.js file. This will be the startup file for the application. Add the following 4 lines,

const express = require('express')
const app = express()
app.use('/', (req, res) => res.status(200).send('Hello world!'))app.listen(3000, () => console.log('Express server running on http://localhost:3000'))

Next, we have to edit package.json scripts to setup nodemon

nodemon is a tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected. — https://www.npmjs.com/package/nodemon

Add start to the scripts section of the file, this will allow us to run the application using npm start in the terminal.

"scripts": {
"start": "nodemon index.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
...

Give it a go… run the server and navigate to http://localhost:3000, you should see “Hello world!”

Nice, that’s the express app working, let’s add some environment variables using dotenv .

Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env. Storing configuration in the environment separate from code is based on The Twelve-Factor App methodology. — https://www.npmjs.com/package/dotenv

Create a new file called .env in the root of the project. Your project should look like this now.

Open .env and add the following values.

PORT=3000
MY_VARIABLE=My Variable

We now have to update the package.json file again to tell express when we want use the .env file.

// Replace
"start": "nodemon index.js",
// with
"start": "nodemon -r dotenv/config index.js dotenv_config_path=.env",

So now, when we start our application, it will preload .env ready for us to use.

This my preferred way, as I only use .env for local development, check the documentation for the basic usage approach and creating multiple .env.{environmentName} files.

Next, we update the index.js file to use our environment variables, copy and paste below, replacing the last two lines.

app.get('/', (req, res) => res.status(200).send(`Hello ${process.env.MY_VARIABLE}!`))app.listen(process.env.PORT, () => console.log(`Express server running on http://localhost:${process.env.PORT}`))

I’ve added both PORT and MY_VARIABLE. For the application to access these values use process.env .

Restart the server to see the changes. The server is now using the PORT variable and navigating to http://locahost:3000, should now give you “Hello My Variable!”.

That’s it for local usage, next we’ll deploy to Microsoft Azure and create and configure the App Service.

You’ll need to have the Azure App Service extension installed for VS Code or even better install the Azure Tools extension, which includes many useful Azure extensions, like Azure Functions, Azure Storage, etc.

Once installed, let’s create a new app service.

Assuming you have an account, sign in using ctrl + shift + p (windows) and typing sign and selecting Azure: Sign in

Sign in to Azure

Navigate to the Azure extension tab in the sidenav.

Azure VS Code Extension tab

Select App Service

App Service panel

You can either click the + icon to Create New Web App… and follow the steps or press ctrl + shift + p and type azure adva and this will let you choose from existing Resource Groups, App Service Plans, etc.

Advanced create new web app

Here is the quick process,

  1. Click the + icon to Create New Web App…
  2. Enter a unique name for the new web app. node-express-envs-01
  3. Select a runtime stack. Node 14 LTS
  4. Select a pricing tier. Free

Great, our app service will now be created and you’ll be notified when its done.

You’ll find the new web app under your subscription, expand the node to see the settings. Now right-click Application Settings and select Add New Setting…

  1. Enter the setting name. MY_VARIABLE
  2. Enter the value for “MY_VARIABLE”. My Azure App Service Variable
Application Settings for our App Service

That’s it, we’ve added the environment variable, the Application Settings is like the .env file from our local env, let’s test it.

Note, the reason we’ve not added the PORT variable is that Azure assigns a port number itself and should not be hard-coded.

To deploy, right-click your app service and select Deploy to Web App… select your project folder and confirm you want to deploy.

Once deployed browse the web app and see your new Azure variable in the browser. — https://node-express-envs-01.azurewebsites.net/

I hope you enjoyed this quick walk through. We’ve created an Express app, used local environment variables, deployed our web app to Azure using VS Code and configured App Settings.

These app settings can also be configured within the Azure Portal and you might want to choose a different deployment strategy, e.g. SFTP, GitHub Actions, Docker, etc.
Many possibilities and it’s what make our jobs so much fun.

Happy coding!

Lead Developer. Angular. Node. GraphQL. JavaScript enthusiast.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store