enter image description hereI am trying to run an ejs file and gets error Error: Could not find the include file "partials/head".
i have checked most of the articles from stackoverflow and github however not able to resolve it ...
Error: Could not find the include file "partials/head"
at getIncludePath (C:\Users\Junia\Desktop\node\node_modules\ejs\lib\ejs.js:162:13) enter
code here at includeSource
(C:\Users\Junia\Desktop\node\node_modules\ejs\lib\ejs.js:306:17)
at C:\Users\Junia\Desktop\node\node_modules\ejs\lib\ejs.js:672:26
at Array.forEach ()
at Template.generateSource (C:\Users\Junia\Desktop\node\node_modules\ejs\lib\ejs.js:648:15)
at Template.compile (C:\Users\Junia\Desktop\node\node_modules\ejs\lib\ejs.js:552:12)
at Object.compile (C:\Users\Junia\Desktop\node\node_modules\ejs\lib\ejs.js:388:16)
at handleCache (C:\Users\Junia\Desktop\node\node_modules\ejs\lib\ejs.js:212:18)
at tryHandleCache (C:\Users\Junia\Desktop\node\node_modules\ejs\lib\ejs.js:251:16)
at View.exports.renderFile [as engine] (C:\Users\Junia\Desktop\node\node_modules\ejs\lib\ejs.js:480:10)
var express=require('express');
var app=express();
var router=express.Router();
var mysql=require('mysql');
var cookieParser=require('cookie-parser');
var session=require('express-session');
app.use(session({
secret: 'secret',
resave: true,
saveUninitialized: true
//cookie : { maxAge : 60000 }
}));
var path=require('path');
var bodyParser=require('body-parser');
app.use(express.static('/'));
//Serves all the request which includes /images in the url from Images folder
app.use('/images', express.static(__dirname + '/images'));
app.use('/bs4', express.static(__dirname + '/bs4'));
app.use(cookieParser());
const ejsLint = require('ejs-lint');
var con=mysql.createConnection(
{
host:'localhost',
user:'root',
password:'',
database:'shintoj'
});
var path = require('path');
app.use('/',router);
app.use('/',express.static(__dirname + '/'));
app.set('views', path.join(__dirname, 'views/pages'));
app.set('view engine', 'ejs');// use res.render to load up an ejs view file
// index page
router.get('/', function(req, res) {
//res.send('Welcome');
res.render('index');
});
app.listen(8080);
console.log('8080 is the magic port');
console.log(app.get('views'));
index.ejs file
<head>
<%- include partials/head %>
</head>
<body class="container">
<header>
<% include partials/header.ejs %>
</header>
<div class="jumbotron">
<h2>Welcome to our services .</h2>
<p>Hello</p>
</div>
<footer>
<% include partials/footer.ejs %>
</footer>
expected actual result is ..
when i run node server.js , it should display the index.ejs file
That's because your ejs file is in another directory which is views
which mean that your partials directory is outside if your views directory..
Try this:
<%- include('../partials/head.ejs') %>
Remove include tag header and footer from ejs tag in your index.ejs file.
Or jsut include header and footer file properly. Like this
<%- include views-directory/filename %>
I got the same issue while implementing and after investing around 2-3 hr I figured out I was writing
<%- include ('partials/header') %>
instead of
<%- include('partials/header') %>
Well, the only difference was the space between include and opening bracket.
In 2021, October
I'm also having the same issue with importing files on ejs. But I used to figure it out the following way to include my other ejs partials from the parent directory.
Pros
Don't need to set up view engine and directory path on server file.
Independent directory names and locations we can achieve.
Working file: src/views/en/confirmation.ejs
Parent file: src/views/common/footer.ejs (Needs to included on each ejs file)
In src/views/en/confirmation.ejs`
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html data-editor-version="2" class="sg-campaigns" xmlns="http://www.w3.org/1999/xhtml">
<body>
<h1>this is body</h1>
</body>
<% var dir = process.cwd() %>
<%- include(dir + "/src/views/common/footer.ejs") %>
</html>
This can happen, given the way you are calling the page you need, currently the correct way to get one page within another is
<%- include('partials/navigation.html')%>
Related
I have been stuck on this error for a while and cannot figure out why I am getting this error.
In my main server file I have set the view engine to ejs :
app.set("view engine", "ejs")
Now, when I am rendering a file from Routes
router.get("/", async function (req, res) {
res.render("main")
}
main.ejs
<h1>Hello :)</h1>
It works fine. But if I try to include partials:
<% include ./partials/header %>
<h1>Hello :)</h1>
<% include ./partials/footer %>
I get the error:
SyntaxError: Unexpected token / in C:\Users\Dacvid\Desktop\Comp Web\views\main.ejs while compiling ejs
My directory structure is shown below:
I think you're using the old syntax of ejs.
Try replacing
<% include ./partials/header %>
by
<%- include("./partials/header") %>
Even though i have created static public folder in app.js
when i navigate to "http://localhost:3000/calenders/add" and i don't get any styles which is in public folder. because express has added "calenders/add/" to the public folder URL.
So it looks like "http://localhost:3000/calenders/add/content_inside_public".
But the correct URL should be "http://localhost:3000/content_inside_public"
Navigate to app index works fine and load all the styles.
Of course i can set static path in app.js like this
app.use('/calenders/add',express.static(__dirname + '/public'));
but it's not practical if i have many routes in my app.
I believe this is happening because i have a separated folder called partials inside the view directory to store headers,footers and navigation bar, so that i can include them any where in the app easily without writing same html code again and again.
This is how i included them in calender/add.ejs
<!DOCTYPE html>
<html>
<% include ../partials/head.ejs %>
<body>
<!-- Side Navbar -->
<% include ../partials/side_nav.ejs %>
<div class="page">
<!-- navbar-->
<% include ../partials/header.ejs %>
<% include ../partials/footer.ejs %>
</div>
</body>
</html>
This is how i have access the folders and style-sheets inside the public directory in headers.ejs and footers.ejs
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/popper.js/umd/popper.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="js/grasp_mobile_progress_circle-1.0.0.min.js"></script>
<script src="vendor/jquery.cookie/jquery.cookie.js"></script>
<script src="vendor/chart.js/Chart.min.js"></script>
This is my project structure.
/public
/css
/js
/vendor
.......
/routes
calendars.js
control_panel.js
index.js
/views
/calendars
add.ejs
/control_panel
index.ejs
calendars.ejs
/partials
header.ejs
footer.ejs
......
index.ejs
Here is the app.js
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(express.static(__dirname + '/public'));
app.use('/', index);
app.use('/users', users);
app.use('/control_panel', control_panel);
app.use('/calenders', calenders);
Calendars.js
router.get('/add', function(req, res, next) {
res.render('calenders/add', { title: 'Express' });
});
control_panel.js
router.get('/', function(req, res, next) {
res.render('control_panel/index', { title: 'Express' });
});
This has nothing to do with express,
this is because in /calenders/add, src of <script src="vendor/jquery/jquery.min.js"></script> will resolve to http://localhost:3000/calenders/add/vendor/jquery/jquery.min.js,
because vendor/jquery/jquery.min.js is a relative path.
what you need is to change the url to this:
<script src="/vendor/jquery/jquery.min.js"></script>
<script src="/vendor/popper.js/umd/popper.min.js"></script>
<script src="/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="/js/grasp_mobile_progress_circle-1.0.0.min.js"></script>
<script src="/vendor/jquery.cookie/jquery.cookie.js"></script>
<script src="/vendor/chart.js/Chart.min.js"></script>
I am learning node and using expressjs the problem is that the css file is only working on the main page and not any other page following is the code for the app:
var express = require("express");
var app = express();
// assets
app.use(express.static("public"));
// simple file testing
app.get("/anything/:stuff", function(req, res){
var stuff = req.params.stuff;
res.render("love.ejs", {stuff: stuff});
});
// posts page
var books = [
{title:"Harry Potter",author:"JK Rowling",editions:7},
{title:"Peere Kamil",author:"Humaira Saeed",editions:4},
{title:"Mushaf",author:"Abdullah khan",editions:2}
];
app.get("/books", function(req, res){
res.render("books.ejs",{books:books});
});
app.listen(3000, process.env.IP, function(){
console.log("Serving Now!");
});
The following is the code for the page where it is not working.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="app.css" />
<title>demo app</title>
</head>
<body>
<h1>You fell in love with : <%= stuff %> </h1>
<%
if(stuff.toUpperCase() === "WAQAS"){ %>
<P>GOOD CHOICE HE IS THE BEST</p>
<% } %>
<p>P.S This is the love.ejs file</p>
</body>
</html>
The file is under public directory.
Use an absolute URL for the CSS file, so the browser doesn't look for it relative to the current URL:
<link rel="stylesheet" href="/app.css" />
Explanation: say that you open the URL /anything/helloworld in your browser. When your HTML contains just app.css, without the leading slash in front of it, the browser will try and load /anything/app.css (because without that slash it's relative to the current URL), which doesn't point to your CSS file.
When you add the leading slash, express.static will be able to find the CSS file in public/.
I am using express and ejs to build a website:
"dependencies": {
"ejs": "^2.5.2",
"express": "^4.14.0",
in my app.js I have defined ejs as template engine and the root of views:
app.set('view engine', 'ejs'); // set view engine
app.set('views', 'app/views'); // set custom root for view engine
I then created my index.ejs file in which I included a partial from a subdirectory:
index.ejs
<head><% include ./partials/template/head %></head>
folder structure:
- views
index.ejs
-- partials
-- -- template
head.ejs
When a start the server, index is loaded without errors but without the head section.
If I change the include (pointing to a wrong location) the server fails to start highlighting the problem, so ejs is able to locate the head.ejs.
if I move head.ejs in the views directory the head is correctly loaded in the index.ejs.
So... I am a bit puzzled, it seems that in the subdirectory the file read but not loaded into the include.
After searching for around I tried using express-partials but it has not helped much.
Any clue?
Cheers, Giovanni
just change your include statement like this
<%- include("./partials/template/head.ejs") %>
this worked for me.
With Express 4.0
<%- include header.ejs %>
this worked for me.
I've never used an EJS template in <head> section.
I use ejs and express-ejs-layouts packages together.
So if you want to create a top division which would be fixed and appears on every different page (maybe a navigation part), you might create a main layout ejs for your application.
When I render an EJS on a route by using res.render('index'), rendered EJS page (index.ejs in my case) replace with <%- body %> parts in the example below.
And I use a navbar.ejs file with <% include navbar %> line. And the navbar is shown on the top of the page at every page, fixedly.
Example
app.js - needed variables, settings and middleware
var express = require('express')
var expressLayouts = require('express-ejs-layouts') // to use EJS layout
var app = express()
app.set('view engine', 'ejs');
app.set('views', __dirname + '/views');
app.use(expressLayouts) // EJS Layout.ejs
layout.ejs file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<% include navbar %>
<%- body %>
<% include page_footer %>
</body>
</html>
with express 4.0 using "ejs-mate module
In app.js
// Khởi tạo express
var express = require('express');
var app = express();
var engine = require('ejs-mate');
var port = process.env.PORT || 3000;
// Khởi tạo public, view engine...
app.use(express.static(__dirname + "/public"));
// Sử dụng đuôi html
var ejs = require("ejs");
app.set('view engine', 'ejs');
app.engine('ejs', engine);
// Cấu hình thư mục views
app.set("views", __dirname + '/views');
// Khởi tạo Web Server
var server = app.listen(port, function () {
var host = server.address().address;
var port = server.address().port;
console.log("Example app listening at http://%s:%s", host, port);
});
app.get('/Admin', function (req, res) {
res.render('./admin/layout.ejs');
});
In layout.ejs
<html>
<head>
<%-partial('./sub-folder/header')%>
</head>
<body>
<-- -->
<h1>
buiducanh.net
</h1>
<%-partial('./sub-folder/footer')%>
</body>
</html>
I believe the problem to be not related to subfolders. If you look at your code:
<head><% include ./partials/template/head %></head>
We can see the include directive is used which will invoke the templating engine and return the html that you desire to render in your <head /> section of index.ejs.
However it doesn't get rendered simply because you forgot to include a "-", which tells it to actually print the contents into that section of html, you can also use a "=" which does the same thing only escaped.
So to fix you should edit your index.ejs as follows:
<head><%- include ./partials/template/head %></head>
Notice the inclusion of the "-" following the "<%".
Hope this helps.
Im trying out EJS as a view engine with Express. It seems that my layout.ejs is not used. I have two views index.ejs and layout.ejs both in my 'views' folder. It seems that index.js is rendered but layout.ejs is not. The layout.ejs file should be including a CSS file but when the page is rendered in the browser this is not there. Any test test text that I place in the layout.ejs file is not output with the response.
Am I missing an additional configuration step?
Thanks!
My server.js code:
var express = require('express');
var app = express();
app.set('view engine', 'ejs');
app.use(express.static(__dirname + '/public'));
app.get('/', function(req, res){
res.render('index.ejs', {title: 'EJS Engine'});
});
app.listen(8080);
In my layout.ejs I am linking to a single css file which resides in the public folder.
layout.ejs:
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<%- body %>
</body>
</html>
index.ejs
<div id="container">
index.html
</div>
Here's the module you need:
https://www.npmjs.org/package/express-ejs-layouts
Do the following:
npm install express-ejs-layouts // install the layout module from the command line
var express = require("express")
,path = require('path')
,fs = require('fs')
,expressLayouts=require("express-ejs-layouts") // add this requirement
, app = express();
app.use(express.bodyParser());
app.use(expressLayouts); // add this use()
app.use(express.static(__dirname));
Now the ejs engine should use your layout.
app.set('view options', { layout:'layout.ejs' });
Place layout.ejs into your views folder.
Alternately you can place layout.ejs into views/layouts folder and then use
app.set('view options', { layout:'layouts/layout.ejs' });
I have a similar issue. In my case I would rather use Jade but I have a requirement for a more "html" style template engine for a particular project. At first I considered express-partials or ejs-locals (as mentioned in a comment by Jonathan Lonowski) or even using html via the pipe or dot syntax within Jade templates (see here for more information about that option and this SO post). I am not able to introduce the additional dependencies for express-partials and ejs-locals into this project. These two projects do look good and might meet your needs.
If you do not want to use these projects, you can do something like the following:
views/layout-head.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The title</title>
</head>
<body>
views/layout-foot.ejs
</body>
</html>
views/index.ejs (or any other page)
<% include layout-head %>
This is the index page - <%= title %>
<% include layout-foot %>
routes/index.js
exports.index = function(req, res){
res.render('index', { title: 'Express' });
}
This is not an optimal solution but it works. Most of my application will be a single page app and I have some other restrictions I have to work within so this works for my needs. This may not the best solution in many cases - especially if you have complex and/or changing layouts.