Creating a development environment of Node.js (Use Express and VS Code)
Explain how to create a development environment of Node.js (Use Express) including a function of hot reload. (VS Code)
This article explains how to create a development environment of Node.js (Use Express) including a function of hot reload. (VS Code)
The following lists are the table of contents about this article.
Target audience
- Those who want to create the development environment of Node.js (Express) on VS Code.
Environment
- Windows 10 (1903)
- Visual Studio Code (1.38.1)
- Node.js (v10.16.3)
- npm (6.11.2)
Preconditions
- Installed Node.js, npm and VS Code
Creating the development environment
Make project directory
Execute the following command to make the directory.
Use the command that is the same on Windows, Mac and Linux.
mkdir [project name]
Install Express
Install
First, Move to the directory that was made.
Then execute the following command to install Express locally.
npm install express --save-dev
Create a environment for test
First, execute the following command to init npm.
npm init
Then create a app.js file and copy the following codes to the file.
const express = require("express");
const app = express();
app.get("/", (req, res) => {
res.send("Hello World!");
});
const server = app.listen(3000, () => {
const host = server.address().address;
const port = server.address().port;
console.log("Example app listening at http://%s:%s", host, port);
});
Creating a developing environment of Node.js (Express) that finished.
Next, setting up an environment of hot reload.
Install Nodemon globally
Use Nodemon to creating an environment of hot reload.
Install
Execute the following command to install nodemon globally.
npm install nodemon -g
Make a setting file
Make .nodemon.json file at project’s root path.
Then paste the following codes to the file.
{
"watch": "./*",
"ext": "js,json",
"exec": "node ./app"
}
Make and edit launch.json
First, make launch.json by the following work.
[Debug] in a left menu -> [Gear icon] -> Choose “Node.js” on Select Environment.
Then replace the contents of “configuration” from source to the following code.
{
"type": "node",
"request": "attach",
"name": "Node: Nodemon",
"processId": "${command:PickProcess}",
"restart": true,
"protocol": "inspector"
}
The following codes are complete form.
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Node: Nodemon",
"processId": "${command:PickProcess}",
"restart": true,
"protocol": "inspector"
}
]
}
Edit package.json
Finally, adding a command to package.json for executing program.
Adding the following command to “script” in the package.json.
"debug": "nodemon --inspect app.js"
This is the end of creating the development environment.
How to execute in debug mode
To start the program in debug mode, execute the following command at project’s root path.
npm run debug
Then press “F5” key on VS Code.
If VS Code ask for you about “Pick the node.js process to attach to”, choose “node –inspect app.js”.
When you want to exit, press F5 or click “Disconnect” in a debug menu. And, press Ctrl + C in Command Prompt or PowerShell.
