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
Express Tutorial Part 2: Creating a skeleton website
[Node.js]Express GeneratorーWeb應用程式產生器的使用方式
不要踏到 Node.js 的黑洞陷