Install Express on Mac and Make a Project

thumbnail

Recently, I have faced difficulties on my individual project. In this case, I often reset directory except for git files.

I restarted from the beginning. Let’s make a Express project!

What’s Express?

Express is a simple framework for Node.js. Making web server is pretty troublesome by Node.js. And it might be long. If you use express, it’s much easier. This is why I use Express.

There’s a framework called “LoopBack” that is good at managing API. But there’s fewer information and more complicated than Express. I concluded it’s difficult to extend yet. If your application is SPA1 and doesn’t do server side rendering, I recommend it.

Installing

$ mkdir tutorial
$ cd tutorial
$ npm init
... 

Just press Enter.

$ npm install --save express 

That’s it.

Starting WEB Server

Start WEB Server, and display “Hello World!”.

$ vim app.js 
var express = require('express');
var app = express();

app.get('/', function (req, res) {
    res.send('Hello World!');
    });

app.listen(3000, function () {
    console.log('Example app listening on port 3000!');
    });
$ node app.js 

Check http://localhost:3000! If it displays “Hello World!”, it’s done.

Methods of Express

The format of Express is like app.[method]([path], function(req, res){ });.

You will use mainly below methods.

In previous example, you access to the path “/” by GET method, then Express runs res.send('Hello World');.

Express Generator

Enable to use express project generator.

$ npm install -g express-generator 

Make a project directory like this.

$ express tutorial 

Now your directory is like below.

$ tree tutorial
tutorial
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
├── error.jade
├── index.jade
└── layout.jade

Install dependencies.

$ cd tutorial
$ npm install 

Let’s check how it works.

$ npm start 

Open http://localhost:3000 again. If it’s like below, that’s OK.

Additionally, if you access to http://localhost:3000/users, it displays “respond with a resource”.

See the files…

...
var index = require('./routes/index');
var users = require('./routes/users');
...
app.use('/', index);
app.use('/users', users);
... 
var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
    res.send('respond with a resource');
    });

module.exports = router; 

“routes/users.js” has a independent path. If you change it into like below…

$ vim routes/users.js 
var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/user', function(req, res, next) {
    res.send('respond with a resource');
    });

module.exports = router; 

You can access previous page at “http://localhost/users/user”

Reference

  1. Single Page Application.