tags: `Instructions` `node.js` `Express`

Express Application Generator Setting Up

Use the application generator tool, express-generator, to quickly create an application skeleton.

Environment

I run these instructions on windows 10(2004), node v12.18.4 and npm 6.14.8

Installation

Install Express Generator in AppData\Roaming\npm\node_modules
```
$ npm install express-generator -g
```
The -g or –global argument will cause npm to install the package globally rather than locally.
Cheke parameters by running:
```
$ express -h
```
then you will see the result like this:
Specify express to create a project

You can choose a view (template) engine using –view and/or a CSS generation engine using –css. Here I choose to use EJS(Embedded JavaScript) and sass.

Note: Change directory to your project. If you haven't created it, then you can add the project name at the tail of the following command.
```
$ express --view=ejs --css=sass
```
Install all the packages
```
$ npm install
```
This just like requirements.txt in Python. With generated package.json, when you move the project into another environment, you can just run npm install (without any package name) then the npm will install all the dependency that your project needs.

Start Running

Normal Running
```
$ npm start
```

Debug mode

On Windows, use this command(by MDN Doc):

$ SET DEBUG=project_name:* & npm start

but I failed. I found that it consist of two parts, so I ran in two steps:

$ DEBUG=project_name:*

then

$ npm start

On macOS or Linux, use this command:

$ SET DEBUG=project_name:* & npm start

I haven't try it in Ubuntu.

Enable server restart on file changes

Any changes you make to your Express website are currently not visible until you restart the server. So, we should install nodemon to enable server restart on file changes.

Install nodemon
I installed and used it locally as a developer dependency, so that any developers working with the project get it automatically when they install the application.
```
$ npm install --save-dev nodemon
```
-D, –save-dev: Package will appear in your devDependencies.

Or, you can choose to install it globally. It depends on you.
```
$ npm install -g nodemon
```
After installing, you can find it in package.json:

Update it by putting a comma at the end of that line, and adding the "devstart" and "serverstart" lines

"scripts": {
    "start": "node ./bin/www",
    "devstart": "nodemon ./bin/www",
    "serverstart": "SET DEBUG=protect-you-and-me:* & npm run devstart"
},

Run the project with nodemon for developing
```
$ npm run serverstart
```

Directory Structure

www file
/bin/www is the entry of the application. The first thing it does is to require('../app') which is app.js in the root, the "real" entry point.

MDN Docs: require() is a global node function that is used to import modules into the current file. Here we specify app.js module using a relative path and omitting the optional (.js) file extension.
okay, MDN Web Docs provide more information about.

Troubleshooting

Port is already in use
I got this trouble when I was launching Browser Sync from Sublime Text to show my front-end design. The Browser Sync uses port 3000, and the default port of express is also port 3000. There are two ways to deal with it, one is to close Browser Sync, two is to set another express port.

I chose to close Browser Sync but I couldn't find it in task manager.
So, I tried to find its PID by running this (windows 10):
```
$ netstat -ano | findstr :3000
```
and killed the process by its PID:
```
taskkill -PID <pid_number> -F
```

References

npm-install
Express Tutorial Part 2: Creating a skeleton website
[Node.js]Express GeneratorーWeb應用程式產生器的使用方式
 不要踏到 Node.js 的黑洞陷

tags: Instructions node.js Express