Saturday, October 21, 2017

Serving static file using node.js and express

Setup:

Make sure you have NODE and NPM installed in your local box.

Rajas-MBP: raja$ node -v
v6.11.3
Rajas-MBP: raja$ npm -v
3.10.10

Step-1

Initialize Node Project and Install Express.js

Rajas-MBP:Youtube raja$ mkdir node-static-page
Rajas-MBP:Youtube raja$ cd node-static-page/
Rajas-MBP:node-static-page raja$ npm init

* Give the project related information or you can choose default by pressing enter.

Rajas-MBP:node-static-page raja$ ls
package.json

Rajas-MBP:node-static-page raja$ cat package.json 
{
  "name": "node-static-page",
  "version": "1.0.0",
  "description": "Node Server to Serve Static Page",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "raja",
  "license": "ISC"
}

Install Express.js

Express.js is the web framework for the node application. It will route the incoming http request to the proper destination to serve the static content. For more information on express please check the following link : http://expressjs.com/

Install express locally through npm in your project.

Rajas-MBP:node-static-page raja$ npm install express --save

Rajas-MBP:node-static-page raja$ cat package.json 
{
  "name": "node-static-page",
  "version": "1.0.0",
  "description": "Node Server to Serve Static Page",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "raja",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.2"
  }
}

--save will add the package information to package.json


Step-2

Add Static Page inside Public folder

Rajas-MBP:node-static-page raja$ ls
node_modules package.json

Rajas-MBP:node-static-page raja$ mkdir public
Rajas-MBP:node-static-page raja$ cd public

Rajas-MBP:public raja$ touch index.html

Add the basic html content inside index.html file present in public folder.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Served From Node</title>
</head>
<body>
    <h2>Hello World !! </h2>
</body>
</html>


Step-3

Create the node-js server

Rajas-MBP:node-static-page raja$ ls
node_modules package.json public

Rajas-MBP:node-static-page raja$ touch index.js


* Add the following lines inside index.js

var express = require('express');
var app = express(); // Create the express APP
var path = require('path'); //To Access the folder path

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

var server = app.listen(3200,function(){ //Server listening to port 3200
    console.log("We have started our server on port 3200");
});


Step-4

Start the server


Rajas-MBP:node-static-page raja$ node index.js 

We have started our server on port 3200


Visit localhost://3200



Note :

If you are interested to read few more node.js articles:

1) http://www.fullstacktechnos.com/2016/09/how-to-push-nodejs-app-to-heroku.html

2) http://www.fullstacktechnos.com/2017/09/how-to-update-nodejs-in-mac.html

No comments:

Post a Comment