DEV Community

Edielton Dantas
Edielton Dantas

Posted on

Webpack Environment Variables Environment variables and DevServer

#react #webpack

Environment variables

When developing an application, we must make a distinction between production and development environments. This is where environment variables come in handy. You probably encountered such variables before such as PATH or PORT.

In this part of the tutorial, we'll install and setup dotenv and create its environment file with a few variables.

Installing the dependencies 

$ yarn add dotenv -D
Enter fullscreen mode Exit fullscreen mode
  • dotenv: A module that loads environment variables from a .env file into process.env.

Configuration 

$ open webpack.config.js
Enter fullscreen mode Exit fullscreen mode 
const  path  =  require('path')
const  HtmlWebPackPlugin  =  require('html-webpack-plugin')
const { CleanWebpackPlugin } =  require('clean-webpack-plugin')

require('dotenv').config()

// Content omitted for better readability
// ...
Enter fullscreen mode Exit fullscreen mode

Create the environment file 

$ touch .env
$ open .env
Enter fullscreen mode Exit fullscreen mode 
# Overrides the NODE_ENV and PORT number
NODE_ENV=development
PORT=9000
Enter fullscreen mode Exit fullscreen mode

Warning: It's recommended that you do not add this .env file to your repo because of the sensitive information it might contain (e.g, connection strings, username, and password...).

Untrack .env (recommended) 

$ open .gitignore
Enter fullscreen mode Exit fullscreen mode 
node_modules
dist
.env
Enter fullscreen mode Exit fullscreen mode

Serving files from dev server

So far we've been testing our app by going to the dist folder and opening index.html file from our favorite browser.

There's a much easier and better way to do that: enter WebpackDevServer.

Installing the dependencies 

$ yarn add webpack-dev-server -D
Enter fullscreen mode Exit fullscreen mode

Add script to start up the server 

{
  "scripts": {
    "build": "yarn lint && yarn test && webpack",
    "build:watch": "yarn build --watch",
    "test": "yarn lint && yarn jest",
    "test:watch": "jest --watchAll",
    "lint": "standard",
    "start": "webpack-dev-server"
  },
  ...
}
Enter fullscreen mode Exit fullscreen mode 
$ yarn start
Enter fullscreen mode Exit fullscreen mode

Alt Text

Configuration

WebpackDevServer is highly configurable. If you want to override its default behavior, such as the port number or whether to serve your app in a new browser tab, you just need to provide it under devServer, like in the example below:

$ open webpack.config.js
Enter fullscreen mode Exit fullscreen mode 
// ...
// Content omitted for better readability

/*
    1. Destruct process.env object
    2. Rename PORT to port
    3. Rename NODE_ENV to mode
*/
const {
  PORT: port,
  NODE_ENV: mode
} = process.env

const devServer = {
  port,
  open: true
}

module.exports  = {
    mode,
    devServer,
    // ...
}
Enter fullscreen mode Exit fullscreen mode 
$ yarn start
Enter fullscreen mode Exit fullscreen mode

Alt Text

Conclusion

In this tutorial, we learned how to work with environment variables and how to serve our app with Webpack's dev server.

Top comments (1)

Collapse
 
mortezasabihi profile image
Morteza Sabihi •

thanks