Set up API server with Node.js + Express(ES6, Webpack, Flow, Jest, ESLint)

Implement API server with Node.js

Now , let’s build the API server with Node.js ( Express ). When implementing the front end with Vue.js or React.js , it is assumed that the API server front end will be implemented in the same repository , but in that case, Node.js will also follow the ES6 notation with Webpack. It will be ( not an image that becomes a notation).

const hoge = require(‘hoge’)

import hoge from ‘hoge’

First install Express and build a simple server

$ yarn add express

Then go to the root directory, app.js to create the edit as following.

// app.js
const express = require ('express');
const app = express ();

app.get ('/', function (req, res) {
  res.send ({message:'hello world'});
});

app.listen (3000);

Directory configuration is as follows.

..
├── app.js
├── package.json
└── yarn.lock

node app.jsThen http://localhost: 3000 / should start.

{ 
  " message ": " hello world "
 }

:+1: Did you get “hello world ” in console? then, you are successful.

Make Node.js compatible with Webpack + ES6

In the current state, module import is different from React.js etc. ( import hoge from 'hoge'not const hoge = require('hoge')). In order to support flow , ESLint , and Jest , which are familiar with React.js, ES6 is supported by Webpack.

Webpack setup

$ yarn add -D babel-core babel-polyfill babel-preset-env babel-loader @ 7 webpack webpack-cli webpack-merge flow-babel-webpack-plugin webpack-node-externals
$ yarn add -D babel-regenerator-runtime babel-preset-es2015 babel-preset-stage-2

Write a Webpack configuration file.

webpack.config.base.jsit is implemented as follows named.

const path = require ('path');
const nodeExternals = require ('webpack-node-externals');
const FlowBabelWebpackPlugin = require ('flow-babel-webpack-plugin');

module.exports = {
  target:'node',
  externals: [nodeExternals ()],
  mode:'development',
  entry: ['babel-regenerator-runtime','./app.js'],
  output: {
    path: path.resolve (__ dirname,'../dist'),
    filename:'server.js',
  },
  resolve: {
    modules: ['node_modules'],
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader:'babel-loader',
            options: {
              plugins: ['transform-flow-strip-types'],
              presets: ['flow','stage-2'],
            },
          },
        ],,
        // Exclude node_modules
        exclude: / node_modules /,
      },
    ],,
  },
  plugins: [new FlowBabelWebpackPlugin ()],
  node: {
    net:'empty',
    tls:'empty',
    dns:'empty',
    fs:'empty',
    __dirname: true,
  },
  watchOptions: {
    ignored: ['node_modules'],
  },
};

webpack.config.dev.jsand edit the following in named.

const merge = require ('webpack-merge');
const baseConfig = require ('./webpack.config.base');

const config = merge (baseConfig, {
  mode:'development',
});

module.exports = config;

.babelrc Create a file called, and edit the contents as follows.

{ 
  " presets ": [ " es2015 ", " flow " ] 
}

flow setup

Next, set up the flow.

$ yarn add -D babel-cli babel-preset-flow flow-bin
$ yarn flow init

Then, .flowconfigwill be generated, so edit it as follows.

[ignore]
. * / node_modules /. *
. * / Dist /. *
. * / Test /. *


[include]

[libs]
flow-typed

[lints]
deprecated-call-syntax = off

[options]
esproposal.decorators = ignore
module.name_mapper ='^ src \ / \ (. * \) $'->' <PROJECT_ROOT> / src / \ 1'
module.system = haste
all = false

ESLint setup

Include ESLint, a static analysis tool for code.

$ yarn add -D eslint
$ ./node_modules/.bin/eslint --init

.eslintrc.json Edit the generated one as follows.

{ 
    " extends ": " airbnb-base ",
    " parserOptions ": { 
        " ecmaVersion ": 7 ,
        " sourceType ": " module "
     } ,
    " parser ": " BBEL-eslint ",
    " env ": { 
        " browser ": true ,
        " es6 ": true 
    } ,
    " plugins ": [ " flowtype " ] ,
    " rules ": { 
        " flowtype / no-types-missing-file-annotation ": 1 ,
        " max-len ": [ 2 , 100 , 4 , { " ignoreUrls ": true }] 
    } 
}

Since the eslintrelated library was not installed at the time of initialization above , install it below.

$ yarn add -D babel-eslint eslint-plugin-flowtype eslint-config-airbnb-base eslint-plugin-import

.eslintignore Create a file called, and specify what you want to exclude from ESLint.

server.js
flow-typed
__tests__
__mocks__
node_modules
.idea
.vscode

If yarn eslint .you execute with this, the result of ESLint will be output. The error that appears here yarn eslint . --fixwill be corrected automatically .

Jest setup

$ yarn add -D jest
$ yarn add -D babel-jest babel-core

Launch Node.js with Webpack

At this point, you have everything you need to launch Node.js with Webpack.

package.json is as follows.

{ 
  " main ": " ./dist/server.js ",
  " Scripts ": { 
    " Start ": " Node ./Dist/server.Js ",
    " flow ": " flow ",
    " eslint ": " eslint. ",
    " test ": " jest ",
    " webpack-dev ": " webpack --config config / webpack.config.dev.js "
   } ,
  " dependencies ": { 
    " express ": " ^ 4.16.4 "
   } ,
  " devDependencies ": { 
    " babel-cli ": " ^ 6.26.0 ",
    " Babell-core ": " ^ 6.26.3 ",
    " babyl-eslint ": " ^ 10.0.1 ",
    " Babell-jest ": " ^ 23.6.0 ",
    " babyl-loader ": " 7 ",
    " babyl-polyfill ": " ^ 6.26.0 ",
    " Babell-preset-env ": " ^ 1.7.0 ",
    " Babell-preset-es2015 ": " ^ 6.24.1 ",
    " Babell-preset -flow ": " ^ 6.23.0 ",
    " Babell-preset -stage-2 ": " ^ 6.24.1 ",
    " Babell-regenerator-runtime ": " ^ 6.5.0 ",
    " eslint ": " ^ 5.8.0 ",
    " eslint-config-airbnb-base ": " ^ 13.1.0 ",
    " eslint-plugin-flowtype ": " ^ 3.2.0 ",
    " eslint-plugin-import ": " ^ 2.14.0 ",
    " flow-babel-webpack-plugin ": " ^ 1.1.1 ",
    " flow-bin ": " ^ 0.85.0 ",
    " jest ": " ^ 23.6.0 ",
    " webpack ": " ^ 4.25.1 ",
    " webpack-cli ": " ^ 3.1.2 ",
    " webpack-merge ": " ^ 4.1.4 ",
    " webpack-node-externals ": " ^ 1.7.2 "
   } 
}

app.jsRewrite the first line as follows to make the contents created first correspond to ES6.

import express from 'express';

package.json Try executing the start command as shown in.

$ yarn webpack-dev
$ yarn start

Then, localhost:3000you can see that can be started.

Make the edited file reflect automatically

$ yarn add -D nodemon concurrently

After installing the required libraries, package.jsonadd the following line to:

{
  ...
  "script": {
   ...
    "dev": "concurrently \" NODE_ENV = development webpack -w --config config / webpack.config.dev.js \ "\" nodemon --watch ./dist/server.js \ ""
  },
  ...
}

Success if the localhost starts below. :tada:

$ yarn dev

Please click here :point_right: for the source code .