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

Image for post
Image for post

Implement API server with Node.js

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

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

$ 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

$ yarn add -D eslint
$ ./node_modules/.bin/eslint --init
Image for post
Image for post

.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

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 .

Written by

Passion, Together

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