documentation available at Express website
npm i express --save
Once the Express is installed, let us see a simple Hello World! code with Express
const path = require("path");
//Importing express
const express = require("express");
//we dfine a port so that we not only have development address but also on which port is it on
const PORT = process.env.PORT || 3500;
const app = express();
app.get("/", (req, res) => {
res.send("Hello World");
});
app.listen(PORT, () => console.log(`Server is running on PORT: ${PORT}`));
*This should now show hello world when visiting to http://localhost:3500/
Let us see how to serve an Index.html file using express
const path = require("path");
//Importing express
const express = require("express");
//we dfine a port so that we not only have development address but also on which port is it on
const PORT = process.env.PORT || 3500;
const app = express();
//1. Getting the index.html - With Regex ^(starts with) $(ends at) |(or) (html)?(This is optional contion making html optional)
app.get("^/$|/index(.html)?", (req, res) => {
//This is first way, here we explicitly provide root with directory name in which it looks for views folder and index.html
// res.sendFile('./views/index.html', {root: __dirname})
// Another easier way is
res.sendFile(path.join(__dirname, "views", "index.html"));
});
//2. let us serve another page to another route
app.get("/new-page(.html)?", (req, res) => {
//we have a folder name views in our directory, so we join views with new-page.html
res.sendFile(path.join(__dirname, "views", "new-page.html"));
});
//3. Let us see how redirecting works ?
app.get("/old-page(.html)?", (req, res) => {
res.redirect(301, "/new-page"); //301 is we are manually setting to 301 redirect i.e, permanent redirect
//because by default it sets to 302 redirect code.
});
//4. Setting up a default route, i.e, /all or /*
app.get("/*", (req, res) => {
res.status(404).sendFile(path.join(__dirname, "views", "404.html"));
});
app.listen(PORT, () => console.log(`Server is running on PORT: ${PORT}`));
- Notice that the Express sets the status code automatically, if the page was found the status code is 200 automatically. Also notice that the Express can handle the regex expression, There we have mention that all routes that starts and ends with / and then we could easily keep .html as optional. This makes things easier
- Note that Express follows like waterfall technique, i.e, it first looks for / or /index or /index.html then it moves down and found /new-page or /new-page.html . Means it doesn't just stop at / it goes beyond it.
- The redirecting is also easier with
res.redirect()
but to note here by default the status code is 302 by Express which means temporary moved to different location. We might have to redirect to a page that has been permanently relocated, in that case we can set the status code manually by passing it as the first parameter and then the redirected parameter. - We can add a 404 page not found manually by making a default route or
/*
means all routes to load a manual 404 error page. But in this case the status code will be 200 by default since the Express has essentially found the page that we are looking for. So we have to manually adjust that by doingres.status(404).sendFile()
this will then simply fix the issues.
Route Handlers
Now there is a concept of route handlers and chaining of the route handlers. Let us see them in short. Note these develop a basic understanding of a concept middleware's in Express
example code
app.get("/chain(.html)?",(req, res, next) => {
console.log("Attempt to render the chain");
next();
},
(req, res) => {
res.send("Chain Rendered");
}
);
So as in this code, there is a keyword next
and then at the end of the code block of app.get
we are calling next()
this allows to run the next function that chained with this one. so in this case the output is, at first in the terminal it prints Attempt to render the chain
and then it sends the small text chain Rendered
in the browser on visiting the link http://localhost:3500/chain
There is one another method, i.e. we can make several functions like this and then chain them by passing them in the array, here is an example
const one = (req, res, next) => {
console.log("One executed");
next();
};
const two = (req, res, next) => {
console.log("Two executed");
next();
};
const three = (req, res, next) => {
console.log("Three executed");
next();
};
const finish = (req, res) => {
res.send("Render Finished");
};
app.get("/chain(.html)?", [one, two, three, finish]);
Output will be shown as
Server is running on PORT: 3500
One executed
Two executed
Three executed
and on visiting the link http://localhost:3500/chain it renders the page with the text Render Finished
So this is how the chaining works in Express.
Now this will brings up something call the [[Middleware's]]
Steps to write the Express server
NPM install the dependencies -
nodemon
cors
express
configure the
package.json
in thescript
add thedev : 'nodemon server'
this is for starting the server file afternpm run dev
and every time server.js is saved the server will restartcreate the file folder structure [[Node Folder Structure.canvas|Node Folder Structure]]
Import all modules in server.js (express, path, cors, )
create a port and create the app from express
listen to the port and log the console
-
add middleware's using
app.use
app.use(cors())
- Remember to use
cors
it is better to make the whitelist, then create an object lets saycorsOptions
this object has two keys,origin :
andOptionsSucessStatus
, in the origin it is a function with a callback and origin arguments, and check if the origin is in the index of the whitelist. if the index of origin returns -1 then it is not in the whitelist therefore it returns thecallback(new Error("message"))
otherwise it returnscallback(null,true)
const whiteList = [
"http://www.site.com",
"http://127.0.0.1:3500",
"http://localhost:3000",
];
const corsOptions = {
origin: (origin, callback) => {
if (whiteList.indexOf(origin) !== -1 || !origin) { // ||!origin is only for dev
callback(null, true);
} else {
callback(new Error("Not Allowed by CORS!!"));
}
},
OptionsSuceessStatus: 200,
};
module.exports = corsOptions;
app.use(express.urlencoded({extended : false}))
app.use(express.json())
-
app.use(express.static(path.join(__dirname, '/public'))
this is for root files in views -
app.use('/subdir', express.static(path.join(__dirname,'/public'))
this is for the sub routes in this example it is subdir. - Add routes using
app.use('/', require("./routes/root)"
- Add sub-routes if there are any
- Add
app.all('*', (req,res)){}
in this case add the status of 404 and also add the conditions ofreq.accepts('html')
orreq.accpets('json')
to send the relevant 404 error page byres.sendFile(path.join(__dirname, "views",'404.html'))
or the JSON asres.json({err : '404 not found'})
else send the text byres.type('text').send('404 not found!)'
- Inside the routes, import the express and path module, then make the router from
express.Router()
and then use therouter.get('/index.(html)?', patth)
and at last domodule.exports = router
const express = require("express");
const path = require("path");
const router = express.Router();
router.get("^/$|/index(.html)?", (req, res) => {
res.sendFile(path.join(__dirname, "..", "views", "index.html"));
});
router.get("^/about(.html)?", (req, res) => {
res.sendFile(path.join(__dirname, "..", "views", "about.html"));
});
module.exports = router;
Steps to write the API
- Basic Steps :
- Create a separate folder
api
inside the folderroutes
and make the JavaScript file - Inside it import the express and path, then create the router from
express.Router()
. - use
router.route('/').get('path', (req,res){}).put().delete().post()
- export the router using
module.exports = router
- Create a separate folder
- More Advance Steps :
- First create the controllers folder, inside the controllers folder we keep all the functional logic of CRUD operations and exports them in form of
modules.exports
- Now inside the routes, make the specific api routes for authentication or register and inside them use the
router = express()
and userouter.route("/").get(function from controller)
- Export the router and then edit the server.js file to add the api route on call.
- First create the controllers folder, inside the controllers folder we keep all the functional logic of CRUD operations and exports them in form of
I hope this would help you refresh your knowledge in using the Express framework in NodeJS.
The above information is compiled from :
References of all the source of information from my learning notes from YT creator and his 7 hour series of learning NodeJS
Author : Dave Gray
Top comments (0)