Chris Wang

Posted on Jun 6, 2023

Express & ES6 Boilerplate

#node #express #es6 #babel

Let's set up an Express.js app using ES6. I will be using the Babel compiler to compile our ES6 code to ES5. Babel is a JavaScript compiler that enables one use next generation JavaScript, today. This Tutorial assumes that you have installed the Node Package Manager(NPM) and the Node.js Engine in your development environment. If you do not have Node.js installed, you can download and install it from the Node.js website. Also, you can download the full codebase here if you are interested in this es6 node-express boilerplate.

Step 1: Set up the project

Create a new directory for your project and navigate to it.
Initialize a new Node.js project by running the following command in your terminal:

npm init -y

Step 2: Install dependencies

Install Express and other required packages by running the following command:

npm install express

Step 3: Configure Babel

Install Babel and the necessary plugins by running the following command:

npm install --save-dev @babel/core @babel/preset-env @babel/register

Create a file named .babelrc in the root directory of your project and add the following content:


{
  "presets": ["@babel/preset-env"]
}

Step 4: Create the Express app

Create a file named app.js in the root directory of your project.
Add the following code to app.js to set up a basic Express application:

import express from 'express';

const app = express();

// Define routes and middleware here

const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

In your terminal, run the following command to start the server:

node -r @babel/register app.js

Step 5: Install nodemon

Install nodemon as a development dependency by running the following command in your project's root directory:

npm install --save-dev nodemon

Open your project's package.json file and modify the "scripts" section to include a new script called "start" with the command to run the server using nodemon("start": "nodemon --exec babel-node app.js"). Your package.json file should look like this:

{
  "name": "express-amazon-cognito",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon --exec babel-node app.js",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2"
  },
  "devDependencies": {
    "@babel/core": "^7.22.1",
    "@babel/node": "^7.22.1",
    "@babel/preset-env": "^7.22.4",
    "@babel/register": "^7.21.0",
    "nodemon": "^2.0.22"
  }
}

Save the changes to package.json.
Open your terminal and navigate to your project's root directory.
Start the server using the following command:

npm start or yarn start

Now, nodemon will automatically monitor your files for changes and restart the server whenever you save changes to your code.

Step 6: Set up Prettier and ESLint

Install the necessary packages as dev dependencies:

npm install --save-dev prettier eslint eslint-config-prettier eslint-plugin-prettier

Create an ESLint configuration file by running the following command and following the prompts:

npx eslint --init

This command will guide you through setting up ESLint. Make the following selections when prompted:

- How would you like to configure ESLint? -> Use a popular style guide
- Which style guide do you want to follow? -> Airbnb
- Do you use TypeScript? -> No
- Where will your code run? -> Node
- How would you like to define a style for your project? -> Use a configuration file
- Which format do you want your config file to be in? -> JavaScript

Install the necessary Babel ESLint plugin:

npm install --save-dev babel-eslint

Open the .eslintrc.js file that was created in your project's root directory. Modify the configuration file to extend the plugin:prettier/recommended configuration and set the parser option to babel-eslint. It should look something like this(source file):

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['airbnb-base', 'plugin:prettier/recommended'],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  rules: {
    'prettier/prettier': 'error',
  },
};

Create a .prettierrc file in your project's root directory and specify your desired Prettier formatting rules.

{
  "singleQuote": true,
  "trailingComma": "es5"
}

Add a Prettier script to your package.json file's "scripts" section:

"scripts": {
  "prettier": "prettier --write '**/*.{js,json}'"
}

Now you can run ESLint and Prettier on your project. For example, to run ESLint on your entire project, use the following command:

npx eslint .

To format your code with Prettier, run the following command:

npm run prettier

Feel free to adjust the ESLint and Prettier configurations to meet your specific project requirements.

Step 7: Set up env

Install the dotenv package, which allows you to load environment variables from a .env file:

npm install dotenv

Create a .env file in your project's root directory. Add the following line to the .env file, specifying the desired port number:

PORT=3000

In your main entry file (e.g., app.js or index.js), import the dotenv package using ES6 syntax at the top of the file:

import dotenv from 'dotenv';

Load the environment variables from the .env file by invoking the config method on the dotenv object:

dotenv.config();

Update the code where you define the port for your Express.js server. Use destructuring to extract the PORT variable from process.env:

const port = process.env.PORT || 3000;

In this example, the PORT variable will hold the value from the .env file. If it is not set, the port variable will default to 3000.

Start your Express.js server using the port variable:

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

Now your Express.js server will read the port number from the .env file using ES6 syntax.

You can adjust the code and syntax to match your specific project structure and requirements.
You can download the full codebase here for this article.

If you like this type of content you can give me a star on my GitHub repository for the latest updates.