Creating a simple local server from scratch using node and express

Objectives

Create a local server on your machine using node.js We will first create a simple app that shows hello world and then use express.js for routing. Finally, we will create some APIs and route them.

Prerequisites

Mac OS Catalina

Create an app with a simple local server that returns Hello World

// create your own directory
$ mkdir node-practice && cd node-practice
// initialize your project
$ npm init -y
// create your app.js
$ touch app.js
$ vi app.js

Edit your app.js.

const http = require('http');
const server = http.createServer((req, res)=>{
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello World!');
})
server.listen(8080);

Run the command below, and access localhost:8080. You should see Hello World appear in the page.

$ node app.js

Introducing express

We will install express.

$ npm install express -save

Create our public folder

$ mkdir public && cd public
$ touch index.html
$ mkdir css img js

Your folders should look like this now, excluding the node_modules.

$ tree -I node_modules
.
├── app.js
├── package-lock.json
├── package.json
└── public
    ├── css
    ├── img
    ├── index.html
    └── js

4 directories, 4 files

We will create the following files inside each of our files.

node-practice/public$ cd css && touch sample.css
node-practice/public$ cd js && touch sample.js

I will have a sample photo inside my img folder.

So now your folders should look like this.

$ tree -I node_modules
.
├── app.js
├── package-lock.json
├── package.json
└── public
    ├── css
    │   └── sample.css
    ├── img
    │   └── sample.jpeg
    ├── index.html
    └── js
        └── sample.js

4 directories, 7 files

For our index.html:

<!DOCTYPE html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>TEST</title>
    <link rel="stylesheet" href="/css/sample.css">
  </head>

  <body>
    <h1>Hello World!</h1>
    <p id="hoge"></p>
    <div>
      <img src="/img/sample.jpeg">
    </div>
    <script src="/js/sample.js"></script>
  </body>
</html>

For our sample.js:

/* /public/js/sample.js */
{
  const el = document.getElementById('hoge');
  el.innerText = 'HAHAHAHAHAHAHA!!!!';
}

For our sample.css:

/* /public/css/sample.css */
h1 {
  font-size: 1.5rem;
  color: #0000ff;
}
img {
  max-width: 100%;
}

Edit our app.js

const express = require('express');
const app = express();
const path = require('path');

app.listen(8080, () => {
  console.log('Running at Port 8080...');
});

app.use(express.static(path.join(__dirname, 'public')));

app.use((req, res) => {
  res.sendStatus(404);
});

When you run the following, you should see the web page on localhost:8080.

$ node app.js

Create our APIs

We will create our apis, by creating a folder first.

// at the root directory of the project.
$ mkdir api && cd api
$ touch data.json index.js

We will create some random data in data.json:

{
  "id": "W0001",
  "title": "I Love Cats and Dogs",
  "price": 3000000000000
}

For index.js, we export our api router.

const express = require('express');
const router = express.Router();

router.use(express.json());

router.get('/foo', (req, res) => {
    res.sendFile(__dirname + '/data.json', (err) => {
        if (err) {
            res.sendStatus(400);
        } else {
            console.log('completed');
        }
    });
});

router.route('/bar')
    .get((req, res) => {
        res.json(req.query);
    })
    .post((req, res) => {
        const nameArray = ['id', 'name', 'address'], failed = nameArray.some(v=>!req.body[v]);
        if (failed) {
            res.sendStatus(400);
        } else {
            res.sendStatus(200);
        }
    });

module.exports = router;

Our folders should look like this now.

$ tree -I node_modules
.
├── api
│   ├── data.json
│   └── index.js
├── app.js
├── package-lock.json
├── package.json
└── public
    ├── css
    │   └── sample.css
    ├── img
    │   └── sample.jpeg
    ├── index.html
    └── js
        └── sample.js

5 directories, 9 files

Now, we will edit our app.js in our root directory.

const express = require('express');
const app = express();
const path = require('path');
const api = require('./api/');

app.listen(8080, () => {
    console.log('Running at port 8080...');
});

app.use('/api', api);
app.use(express.static(path.join(__dirname, 'public')));

app.use((req, res) => {
    res.sendStatus(404);
});

Now, we run node app.js.