Install Express on Mac and Make a Project

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 SPA[ref]Single Page Application.[/ref] 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.

  • get
  • post
  • put
  • delete

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

Express – Node.js Web Application Framework
JavaScriptエンジニアのためのNode.js入門

Leave a Reply

Your email address will not be published. Required fields are marked *