Menu
This seems like a pretty simple problem with Node JS + Express to resolve and I've done some research to resolve my issues but it came out didn't so I am here posting question!
All I am trying to do is render .ejs file from my routes. Just like any other basic Node JS app's file structure, my app is divided into
/public , /views , /routes/ ,node_modules , app.js , package.json
Inside my app.js , I have declared
app.set('views', path.join(__dirname, '/views'));
app.use('/', express.static(__dirname + '/public'));
Inside my /views I have subfolders called /characters and /series So it looks like /views/characters/sample.ejs
Now in my routes I have this ('ejs' has been declared as view engine in app.js),
app.get('/series' , function(req,res){
res.render('series/some');
});
Problem: Before I moved some.ejs file into /series ,
res.render('some');
worked perfectly.But after moving the file into /series I've realized Node JS can't render (well..can't find the some.ejs file).I could just remove all the sub folders and just drop all .ejs files under /views but it would be messy.
PS. I've tried passing multiple directories under **app.js attempts.**
for example:
app.set('views', [path.join(__dirname, '/views'),path.join(__dirname,
'/views/characters/'), path.join(__dirname, '/views/series/')]);
File Structure:
/myapp
->/node_modules
->/public
->/css
->/fonts
->/images
->/js
->/template
->/video
->/routes
->characters.js
->etc.js
->index.js
->series.js
->/views
->/characters
->characters_index.ejs
->/series
->series_index.ejs
->index.ejs
->app.js
->package.json
This the structure. So I want to render either series_index.ejs or characters_index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<title><% include ../public/template/title %></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<% include ../public/template/scripts %>
</head>
<body id="series_body">
<% include ../public/template/background_effect %>
<% include ../public/template/navigation_bar %>
<div class="container-fluid">
<div class="row content-fluid">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 " >
<div id="series_description" class="content-fluid">
<h2>Batman (1989)</h2>
<a href="/series/batman" ><img class="img-responsive"
src="http://localhost:3000/images/series/batman_1989.jpg" width="200px"
height="300px"/></a>
</div>
<div id="series_description" class="content-fluid">
<h2>Batman and Robin (1997)</h2>
<a href="/series/batman_and_robin"><img class="img-responsive"
src="http://localhost:3000/images/series/batman_and_robin.png"
width="200px" height="300px"/></a>
</div>
<div id="series_description" class="content-fluid">
<h2>The Dark Knight Rises (2012)</h2>
<a href="/series/the_dark_knight_rises"><img class="img-responsive"
src="http://localhost:3000/images/series/the_dark_knight_rises.jpg"
width="200px" height="300px"/></a>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 " >
<div id="series_description" class="content-fluid">
<h2>Batman Returns (1992)</h2>
<a href="/series/batman_returns"><img class="img-responsive"
src="http://localhost:3000/images/series/batman_returns.png"
width="200px" height="300px"/></a>
</div>
<div id="series_description" class="content-fluid">
<h2>Batman Begins (2005)</h2>
<a href="/series/batman_begins"><img class="img-responsive"
src="http://localhost:3000/images/series/batman_begins.jpg"
width="200px" height="300px"/></a>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 " >
<div id="series_description" class="content-fluid">
<h2>Batman Forever (1995)</h2>
<a href="/series/batman_forever"><img class="img-responsive"
src="http://localhost:3000/images/series/batman_forever.png"
width="200px" height="300px"/></a>
</div>
<div id="series_description" class="content-fluid">
<h2>The Dark Knight (2008)</h2>
<a href="/series/the_dark_knight"><img class="img-responsive"
src="http://localhost:3000/images/series/the_dark_knight.jpg"
width="200px" height="300px"/></a>
</div>
</div>
</div>
</div>
<% include ../public/template/footer %>
</body>
</html>
541
I think the problem is lying in your slashes, try setting this array of views:
app.set('views', [path.join(__dirname, 'views'),
path.join(__dirname, 'views/characters/'),
path.join(__dirname, 'views/series/')]);
then just call your view normally:
res.render('some');
you can check your mounted view folder by:
app.get('views');
79
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
