Node.js is a runtime environment for running Javascript on servers(outside browsers).
Express.js is a Node.js web framework for building APIs and web applications using JavaScript.
1. Now see the following code:
const express = require('express');
const app = express();
- Here, we are using the
requirefunction to import the Express.js framework for using it in our application. - In the following line of code, we execute
express(). This creates an instance of the Express application and stores it in theappvariable. This variable can be used to define the routes, middleware, and other components of your web application.
2. Routing and HTTP Methods
Web frameworks provide resources such as HTML pages, scripts, images, etc. at different routes.
2.1. Define Routes
The following function is used to define routes in an Express application −
app.method(path, handler)
- This METHOD can be applied to any one of the HTTP verbs – get, set, put, delete.
- Path is the route at which the request will run.
- Handler is a callback function that executes when a matching request type is found on the relevant route.
2.2. HTTP Methods
app.get('/',(req,res)=>{
console.log("Hello World");
})
-The get method is used to send a request to the server to retrieve data.
In addition, there are other fundamental methods such as POST, PUT and DELETE.
In this second line, we are printing Hello World.
3. Middleware
"A middleware is a function that sits between the request (req) and response (res) objects in an application's processing pipeline."
Middleware functions are functions that have access to the request object (req), the response object (res), and the next function in the application’s request-response cycle.
- Middleware functions are executed in the order they are declared in the application. Each middleware function has access to the next function, which is used to pass control to the next middleware in the stack.
app.use((req, res, next) => {
console.log('This middleware runs first');
next();
});
const myMiddleware = (req, res, next) => {
console.log('This is a custom middleware');
next(); // Call the next middleware in the stack
};
app.use(myMiddleware);
4. Dynamic Routing
const express = require('express');
const app = express();
app.get('/:username',(req,res)=>{
res.send(`Welcome ${req.params.username}`);
})
app.listen(5000);
- We are displaying the request we sent as a query.
- To receive a response from the server on the window, the
sendmethod is used. - The code
app.listen(5000)indicates that it is being executed on port number 5000.
5. Template Engine
HTML is not equipped to perform calculations or JavaScript operations. In the backend, web developers do not use HTML directly. Instead, they use template engines such as Ejs, Pug, and others to create HTML templates. These template engines are often used to create dynamic web pages.
5.1. EJS
Embedded JavaScript templating is a simple templating language that lets you generate HTML markup with plain JavaScript.
- Install EJS
npm i ejs
- Configure EJS
app.set("view engine",""ejs")
To proceed, please create a folder named 'views' and then create ejs files inside it.
Instead of using the
sendmethod, we use therendermethod to automatically locate the ejs file (within the views folder).To use JavaScript inside Embedded JavaScript (EJS), we can simply declare it within
<%- -%>tags.When passing values to ejs, always declare them as
<%= value %>.
5.2. EJS use case
We will create a 'views' folder and create two ejs files inside it.
The first file is named header.ejs:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1>Welcome <%=user.name %>
</h1>
- The second file is named hello.ejs:
<%- include('header'); -%> //here we are rendering header file inside another ejs file which is possible.
<h2>Email : <%=user.email %></h2>
<h3>Age : <%=user.age %></h3>
<ul>
<% user.skills.forEach((items)=>{ %>
<li><%=items %></li>
<% }) %>
</ul>
</body>
</html>
- In our JavaScript file, we will use the EJS file to display/render the content.
const express = require('express');
const app = express();
app.set('view engine','ejs');
app.get('/hello',(req,res)=>{
const user = {
name: 'abcde',
email: 'abc@xyz.in',
age: 20,
skills: ['html','css','Js','React','Nodejs']
}
res.render('hello',{user});
});
app.listen(5080);
The render method sends a user object to the hello.ejs file and then renders it.
6. Static Files
Static files, such as images, JavaScript, and stylesheets, are used in web applications.
We will create a 'public' folder containing three subfolders named images, javascripts, and stylesheets.
Now, we will use this code in our file to make use of static files:
app.use(express.static('./public'))
- Now we no longer need to specify the full address of a static file to use it. For example, if we want to use a CSS file, we only need to provide the link as
./stylesheets/style.cssinstead of./public/stylesheets/style.css.
7. Error Handling
Error Handling refers to how Express catches and processes errors that occur both synchronously and asynchronously.
Now declare this after the last route declared:
app.use(function errorHandler (err, req, res, next) {
if (res.headersSent) {
return next(err)
}
res.status(500)
res.render('error', { error: err })
})
- We are storing the error message, referred to as
err, in a variable callederror. This variable is then sent to the route named./error.
app.get('/error', (req, res, next) => {
throw new Error('BROKEN')
})
- We are storing the word 'BROKEN' in the '
error' variable. -Whatever ejs view we set to the./errorroute can display this text using <%= error %> tag.
8. Express Generator
Use the application generator tool, express-generator, to quickly create an application skeleton.
To install it:
npm install -g express-generator
After installation, we need to create an Express application:
express myapp --view=ejs
npm i
After executing the command in the terminal, the entire structure that we previously had to create manually is now generated automatically, and two new folders named "routes" and "bin" are also created.
Instead of using app.get(), we will now use route.get() to handle our routing.
To run the application:
npm start
or
npm nodemon
nodemon is a package that eliminates the need to manually save and reload code, making programming more efficient.
9. Sessions and Cookies
Sessions are data that are stored on the server while Cookies are data that are stored on the client side.
9.1. Sessions
Sessions are more secure than cookies as it is saved on the server side.
To proceed with the task, we must first install 'express-session' and then add it to the 'app.js' file.
Then do the following coding:
app.use(expressSession({
resave: false,
saveUninitialized: false,
secret: "rndomxxxx"
}))
The term "resave" refers to the action of not saving the session if there have been no changes in the values.
saveUninitializedmeans don't save the data which is not defined.secretis the encryption string.
app.get("/",function (req,res){
req.session.ban= true;
res.render("index")
})
app.get("/removeban",function (req,res){
req.session.ban= false;
res.send("ban remmoved")
})
- We are setting the value of a variable to "true" but for route"/". The variable can be named anything.
app.get("/checkban",function (req,res){
console.log(req.session)
})
- To delete any session manually we will need to write
req.session.destroy.
**Note: **The sessions are automatically deleted upon restarting.
9.2. Cookies
- To proceed with the task, we must first install 'cookie-parse' and then add it to the 'app.js' file.
Then add this to the app.js:
app.use(cookieParser())
- Create a Cookie:
app.get("/",function (req,res){
res,cookie("age",25);
res.render("index")
})
We are setting the value of a variable named age to "25" but for route"/". The variable can be named anything.
- Reading Cookies:
app.get("/read",function (req,res){
console.log(req.cookies);
res.send("check")
})
To get specific cookie, we will use req.cookies.age.
- Delete a Cookie:
app.get("/clear",function (req,res){
res.clearCookie("age");
res.send("cleared")
})
10. Connect-Flash
- We will be using a package called
connect-flashto flash messages. - This package enables data transfer between routes using sessions, without which it will not function.
const flash = require("connect-flash")
app.use(expressSession({
resave: false,
saveUninitialized: false,
secret: "rndomxxxx"
}))
app.use(flash())
We can now utilize the flash.
app.get("/pass",function (req,res){
req.flash("age",17);
req.flash("name","ABC");
res.send("created")
})
app.get("/check",function (req,res){
console.log(req.flash("age"),req.flash("name"))
})
Top comments (0)