Lab #3 - Getting started with Express
Steps:
1) Create a new directory in the C:\NodeReactClass folder
and name it: Express-Example
2) Open a command prompt into that directory ,
and following the instructions in Lab #2 initialize a Node application there
(You can use npm or yarn)
3) Add the following modules to the application:
express
body-parser
4) Create a file named index.js in the C:\NodeReactClass\Express-example
folder and add this content:
---------------------------------------------------------------------
const express = require("express");
const app = express();
const port = 3000;
app.get("/", function (req, res) {
res.send("Hello World!");
});
app.listen(port, function () {
console.log(`Example app listening on port ${port}!`);
});
---------------------------------------------------------------------
5) Save the file and in a command prompt, start the application by running:
node index.js
6) Open a Browser to:
http:/localhost:3000
you will see the Hello World message
7) Create a new file in the Express-example folder named: index.html
and add this content:
---------------------------------------------------------------------
Hello From Node/Express
Hello World!
---------------------------------------------------------------------
8) Edit the index.js to reflect this content:
------------------------------------------------------------
var express = require('express');
var app = express();
var path = require('path');
const port = 3000;
app.get('/', function (req, res) {
res.sendFile(path.join(__dirname,"index.html"));
})
app.listen(port, function () {
console.log(`Example app listening on port ${port}!`);
});
---------------------------------------------------------------------
9) Stop (Ctrl-C) and restart the Node application
10) Refresh the Browser to see the HTML page being rendered
11) Add this form to the index.html tag
---------------------------------------------------------------------
---------------------------------------------------------------------
12) Edit the index.js to add a handler for the form URL, then stop and restart the Node application
---------------------------------------------------------------------
app.get('/process_get', function (req, res) {
// Prepare output in JSON format
response = {
first_name:req.query.first_name,
last_name:req.query.last_name
};
console.log(response);
res.end(JSON.stringify(response));
})
---------------------------------------------------------------------
13) Stop and restart the Node application
Refresh the Browser to see the HTML page being rendered
enter your name in the form, and see the resulting JSON
14) Edit the index.html to change the form to a post, and change URL
---------------------------------------------------------------------
---------------------------------------------------------------------
15) Edit the index.js file to add the function to handle the POST request
---------------------------------------------------------------------
var bodyParser = require('body-parser');
var urlencodedParser = bodyParser.urlencoded({ extended: false })
app.post('/process_post', urlencodedParser, function (req, res) {
// Prepare output in JSON format
response = {
first_name:req.body.first_name,
last_name:req.body.last_name
};
console.log(response);
res.end(JSON.stringify(response));
})
---------------------------------------------------------------------
15) Stop and restart the Node application
Refresh the Browser to see the HTML page being rendered
enter your name in the form, and see the resulting JSON