Creating Web Applications in Node.js with Express.js
Let's look at Node.js, a powerful server-side language of JavaScript.By using this we can create a web server easily. Essentially, the Node is a javascript runtime by this we run javascript outside the web browser. Node is not a web application framework. Creating a web application in Node requires lots of coding. So node has framework Express.js by using this we can create web applications easily with less code.
Before starting,
You have to download node.js from its official sites and follow the steps to install it. After installation is finish create a folder and give any name to that folder. open that folder in Visual Studio.
Open terminal in Visual Studio type npm init in it. To create a pakage.json file and initialize our project.
You will get this,
Once you type npm init and hit enter you will get this hit enter till you get yes
Fig. Npm Init.
Once it has done we will install express.js by this command npm install express and hit enter it will get install. Create a file called app.js Now we will start coding our web application.
First, let's create an express server that looks like this
Fig. app.js file
Now run the app using this command node app.js and hit enter. Go to browser typelocalhost:8000
like this
Fig . Server ran Output
So now as our server is ready we will now integrate HTML file with node to use we need a view engine that is used for rendering web pages Here we are using ejs.
Install EJS npm install ejs once it installs we need this add it in app.js file app. set("view engine","ejs");
Now create a views folder inside the folder you created at first (in your root folder)
in that folder create an index.ejs file and add any HTML code you want. once you did
everything.app.js will look like this and index.ejs look like this.
Fig.app.js file with added ejs
Fig.index.ejs
Now run the code again by node app.js the output looks like this
Fig. Final output of our application
Now we will see how the code working, As we have install express we have imported it using
require("express") in express variable so that we can use express in our application now
there is const app = express() this call the express application and put in app variable.
Now we have created routes for our application so we have to HTTP methods like
GET, POST. As we are only dealing with rendering web pages we only use the GET
method app. get('/',(req, res)=>{res. render("index");})so here we are calling
get by app variable in that get() method we pass routes ("/") and call back
function and in that call back function, we are sending the response for that
request of route("/") when it matches that route it will give a response as
an index.ejs file. And in an index.ejs file there is only HTML code which is getting
render when get() method executes Ejs is not the only view engine available there
are different view engines there. They are PUG, Handlebars, Nunjucks you can
use any one of them.
We can also send data from express to HTML using scriptlet tag <%= %>
by passing object ininsideres.render("index",{message:"Jhon Doe"});
in app.js And inside index.js we can usethat object like this
<h1>Hello <%= message %></h1> it will looks like this
Fig. passing data from the express
Fig . using scriptlet tag for rendering data from the express
Once this done run the app again you will get this output
Fig. Output
As we can see here creating a web application using express is not complex but if you compare only node code with express code. It is very much understandable and easy to code
as to compared to node
var http = require('http'); // Import Node.js core modulevar server = http.createServer(function (req, res) { //create web serverif (req.url == '/') { //check the URL of the current request
res.writeHead(200, { 'Content-Type': 'text/html' });
res.write('<html><body><p>This is home Page.</p></body></html>');
res.end()
}});
server.listen(5000);
As we can see how much code node require to create only server so we use express.js
as framwrok in node js which give us good feature to create web applications.
No comments:
Post a Comment