A simple web app starter in node.js express

In this web app, there is only going to have one client side html file and two server side node.js files. The html file will have to forms. One with GET method that submits a name to the server server and the server will respond with a greeting message. The other form with POST method that submits two numbers to the server and the server will respond with the sum of the two numbers.

1. Make sure you have node.js installed, it can be downloaded from http://nodejs.org/

2. Create a root folder for the this simple node.js web app with this structures.

└── my-web-app
    ├── node
    └── public
mkdir my-web-app
cd my-web-app
mkdir node
mkdir shell

3. Create the file my-web-app/node/package.json, it is for install the node modules we will need for this simple node express web app.

{
	"name": "my-web-app",
	"version": "1.0.0",
	"description": "A simple node js express web app",
	"author": "yourname <test@example.com>",
	"dependencies": {
		"express": "",
		"body-parser": ""
	},
	"private": true
}

4. With the above we can run the sudo npm install command in to install the dependency node modules express ad body-parser. It will be fine without the package.json file and install these two node modules one by one from the command line.

cd node
sudo npm install

5. The html file, my-web-app/public/index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Simple Node App Template</title>
    </head>
    <body>
        <form action="/svc/greeting" method="GET">
            <input name="firstname" type="text" placeholder="First Name">
            <button type="submit">Submit</button>
        </form>
        <br>
        <form action="/svc/add" method="POST">
            <input name="num1" type="number">
            <span>PLUS</span>
            <input name="num2" type="number">
            <button type="submit">Submit</button>
        </form>
    </body>
</html>

6. The web app init file, my-web-app/node/server.js

var express = require('express'),
    bodyParser = require('body-parser'),
    app = express(),
    service = require('./service.js');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
  extended: true
}));

app.use(express.static('../public'));
service.attachService(app);
app.listen(3333);
console.log("server at http://localhost:3333");

7. The web app service file, my-web-app/node/service.js

function greeting(req, res) {
    var fn = req.query.firstname;
    res.send("Greetings, " + fn);
}

function additon(req, res) {
    var n1 = req.body.num1,
        n2 = req.body.num2,
        sum = parseInt(n1,10) + parseInt(n2,10);
    res.send(n1 + ' plus ' + n2 + ' is equal to ' + sum);
}
var attachService = function (app) {
    app.get('/svc/greeting', greeting);
    app.post('/svc/add', additon);
};

exports.attachService = attachService;

8. To start the web app

cd my-web-app/node
node server.js

9. Open the browser and go to http://localhost:3333

Search within Codexpedia

Custom Search

Search the entire web

Custom Search