I want to navigate to next page using link but i'm facing 404 error I'd changed my template from jade to ejs
<html>
<body>
<div>
<ul style="color:white; float: right;" class="nav navbar-nav">
<li><a href="/login">Login </a> </li>
<li><a href="#">Sign Up </a> </li>
</ul>
</div>
</body>
</html>
I want to navigate to next page using link but i'm facing 404 error I'd changed my template from jade to ejs
<html>
<body>
<div>
<ul style="color:white; float: right;" class="nav navbar-nav">
<li><a href="/login">Login </a> </li>
<li><a href="#">Sign Up </a> </li>
</ul>
</div>
</body>
</html>
- 1 Can you show js file. – digit Commented Dec 25, 2016 at 15:59
8 Answers
Reset to default 14@Asad, in order for you to go to /login, you must have this route declared in your server side. Something like:
app.get('/login', (req, res) => {
res.render('login');
});
Otherwise, you will always have 404.
Using the following dependencies NPM:
"dependencies": {
"body-parser": "^1.19.0",
"ejs": "^3.0.1",
"express": "^4.17.1",
"mongoose": "^4.13.20"
In app.js file:
const express = require("express");
const bodyParser = require("body-parser");
const mongoose = require("mongoose");
const app = express();
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static("public"));
In Ejs File:
<a class="btn btn-dark btn-sm" href="/someFile" >Link to some EJS File</a>
your file structure:
project
node modules
public
views
index.ejs
someFile.ejs
By setting the view engine to ejs in the app.js file and setting the static file folder in the same app.js you may be able to call out to other ejs files in the same directory utilizing "/" for href. Hope this helps. This is my first answer on Stackoverflow so take it easy on me.
"Image for Navigating Different Web Pages"
As illustrated in the image above, the best way to navigate different web pages using ejs template is to ensure you create a folder called "partials" in your project's "views folder directory" where you have your other ejs files.
1) Then in that "partials folder" create 2 separate ejs files called header.ejs & footer.ejs.
2) Then go to your home.ejs or index.ejs file depending on how you have named your starting ejs file, and then cut ("All contents including the css and probably the bootstrap links in the boiler plate down to the opening body tag <body> and paste in the header.ejs file in the partials folder").
3) Also cut ("All contents from the closing body tag </body> of the "home or index.ejs " file to the footer.ejs file in the partials folder"). Then instead of repeating the header and footer sections for the subsequent pages i.e about.ejs or contact.ejs just link them to the header.ejs and footer.ejs files in the partialss folder as below:
//Sample page of the about.ejs file
Visual Illustration:
<%- include("partials/header"); -%>
<h1> About Page </h1>
<p> This is an about page </p>
<%- include("partials/footer"); -%>
//Do same for other pages.
Finally, following the image above, link the navigation to the different pages at the anchor tags in the header.ejs file which is located in the partials folder using:
"/" ----- To Home Page. "/about" ------ To About Page. "/contact" ------ To Cntact Page.
I hope this helps. Please let me know your views.
Something similar to this should be on your login.ejs page. Also, pay attention to spellings and all.
<a href="/login">...</a>
In server file
app.get('/login', (req, res) => {
res.render('login');
});
I faced the same issue and that's how I got it fixed. And the login file should actually be created.
App js.
const express = require("express");
const ejs = require("ejs");
const startingContent = "Home Page";
const aboutContent ="About Us Page";
const app = express();
app.set('view engine', 'ejs');
app.use(express.urlencoded({extended: true}));
No Need for body parser, express handles that already, by using : app.use(express.urlencoded({extended: true})); .
app.use(express.json());
app.use(express.static("public"));
app.get("/", (req, res)=>{
res.render("home", {homeStart: startingContent});
});
app.get("/about", (req, res)=>{
res.render("about", {aboutStartingText: aboutContent});
});
app.listen(3000, ()=> {
console.log("Server started on port 3000");
});
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My Site</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/styles.css">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<p class="navbar-brand">My Site</p>
</div>
<ul class="nav navbar-nav navbar-right">
<!-- 6 -->
<li id="home"><a href="/">HOME</a></li>
<li id="about"><a href="/about">ABOUT US</a></li>
</ul>
</div>
</nav>
<body>
<div class="container">
Header.ejs
Best practice is to have your header and footer in a folder partials Example : views
partials
header.ejs
footer.ejs
home.ejs
about.ejs
Then you render in your ejs file.
<%- include("partials/header") -%>
<h1>Home</h1>
<p><%= homeStart %></p>
<%- include("partials/footer") -%>
For example:
Routes in *.js:
app.get("/", function (req, res) {
res.render("home", { contentHome: homeStartingContent});
});
app.get("/about", function (req, res) {
res.render("about", { contentAboutpage: aboutContent });
});
app.get("/contact", function (req, res) {
res.render("contact", { contentContactpage: contactContent });
});
Links in HTML:
<li id="home"><a href="/">HOME</a></li>
<li id="about"><a href="/about">ABOUT US</a></li>
<li id="contact"><a href="/contact">CONTACT US</a></li>