###### 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
1. 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.
2. Cheke parameters by running:

    $ express -h

then you will see the result like this:

3. 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


4. 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
1. Normal Running

    $ npm start

2. 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.
1. 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`:


2. 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"
    },


3. Run the project with nodemon for developing

    $ npm run serverstart

## Directory Structure
1. 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.

2. okay, MDN Web Docs provide more information about.

## Troubleshooting
1. 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](https://atmos.washington.edu/~nbren12/reports/journal/2018-07-16-NN-conservation/node_modules/npm/html/doc/cli/npm-install.html)
[Express Tutorial Part 2: Creating a skeleton website](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website)
[[Node.js]Express GeneratorーWeb應用程式產生器的使用方式](https://seanyeh.medium.com/express-generator%E3%83%BCweb%E6%87%89%E7%94%A8%E7%A8%8B%E5%BC%8F%E7%94%A2%E7%94%9F%E5%99%A8%E7%9A%84%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F-b31d779c0aa9)
[不要踏到 Node.js 的黑洞陷](https://medium.com/@will.wang/nodejs-and-nodemon-blackhole-2651c7f8307e)