How To Use EJS to Template in Node Application with login page

admin

1/16/2024
All Articles 

  #How To Use EJS  Template in Node Application with login page

How To Use EJS to Template in Node Application with login page

How To Use EJS to Template in Node js

EJS is effectively a JavaScript runtime. Its entire job is to execute JavaScript. If you run the EJS render method without checking the inputs yourself, you are responsible for the results.check official tutorial on ejs portal.


Step 1 — Creating the app.js Page
Create a new app.js file and open it with your code editor and add the following lines of code

var express = require('express');
var app = express();
app.set('view engine', 'ejs');

app.get('/', function (req, res) {
   res.send('Hello World');
})

app.get('/myLogin', function (req, res) {
    res.render('login');
 })
 
var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port
   
   console.log("Example app listening at http://%s:%s", host, port)

})

 

Step 2 — Creating the Ejs Page

Created a folder views and keep the below  file in that folder

<!DOCTYPE html>
<html lang="en">
<head>
  <title>How To Use EJS to Template in Node Application with login page</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Vertical (basic) form</h2>
  <form action="/save.ejs">
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
    </div>
    <div class="checkbox">
      <label><input type="checkbox" name="remember"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>
</body>
</html>

 

Step 3 — setup the package.json

{
  "name": "How To Use EJS to Template in Node js",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "./node_modules/.bin/node-dev ."
    },
  "keywords": [
    "node.js",
    "http2"
  ],
  "author": "developer India",
  "license": "MIT",
  "dependencies": {
    "ejs": "^3.1.9",
    "express": "^4.18.2",
    "morgan": "^1.10.0",
    "spdy": "^3.4.7"
  },
  "devDependencies": {
    "node-dev": "^3.1.3"
  }
}

Step 4 — Run the command to execute code

  1. npm install ejs
  2. node app.js

 

Conclusion


You can create applications with EJS when you don't need any extra complexity.
You can create amazing applications fast by using partials and making it simple to add login page and render to your views.