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
-
dotenv: A module that loads environment variables from a
.envfile intoprocess.env.
Configuration
$ open webpack.config.js
const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
require('dotenv').config()
// Content omitted for better readability
// ...
Create the environment file
$ touch .env
$ open .env
# Overrides the NODE_ENV and PORT number
NODE_ENV=development
PORT=9000
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
node_modules
dist
.env
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
- webpack-dev-server: Allows you to serve your app from a local server.
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"
},
...
}
$ yarn start
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
// ...
// 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,
// ...
}
$ yarn start
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)
thanks