Develop Reference

How to include contents in EJS?

I am having some trouble with something that (I think) ought to be simple.
My web app is a Node.js one with express and ejs.
I contains code like this (very classical in such a case) in index.js:
var app = express();
app.use('/public', express.static(path.join(__dirname, '/public')));
app.set('port', (process.env.PORT || 5000));
app.use(express.static(__dirname + '/public'));
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
Now here is the issue I have.
Among all my .ejs files, some happen to need the same code (written by me). In order to avoid repetition I want to have this code in a separate file and then include it when necessary, but I can't find the proper way to do it. I put the code in a file called Utils.ejs (in the partials folder) then used this:
<% include ../partials/Utils.ejs %>
but it does not work. I then searched the net and tried a few variations, but found nothing working.
Does any one know how I can do that?
For information about versions, here is what I have in my package.json file:
"ejs": "^2.5.7",
"express": "~4.11.x",
"node": ">=4.3"

Do Not include the file extension while u import the partials
Remove the .ejs from the <% include ../partials/Utils.ejs %> and try

remove ".." and ".ejs", also make sure that "/partials/Utils/" is in public folder
<% include /partials/Utils %>

here in this line
app.set('views', __dirname + '/views');
make it
app.set('views', __dirname + '/views/pages/');
this way it will work fine, you can access all view pages (views/pages/) directly, and your partial views (views/partials/) are also accessible from the pages folder.

How to render HTML view with parameters using ExpressJS (on the home/root view)?

I'd like send a parameter and render a html file when the user go to the home page of my app.
Here is what I did so far:
app.set('view engine', 'ejs');
app.use(express.static(__dirname + '/public'));
app.get('/', function (req, res) {
console.log('Hi !'); // never displayed
res.render('index', { foobar: 'foobar'});
});
The HTML is properly rendered (probably due to express.static) but app.get('/') seems to be never called so I can't return the variable.
How can I return a variable from a call to '/' with the static HTML page public/index.html?
My ultimate goal is to be able to use foobar in my JS without any additional call to the server. Could you help me to achieve this?

If you have a file named index.html in your public/ directory, express.static() will return that file if the url / is requested, so your route handler will never get passed the request.
Generally, templates are stored in a separate directory than static (public) resources. Express, by default, will look for templates in the ./views directory (unless you tell it otherwise) so if you move your index.html to there it will get rendered by EJS (but see below), and you can use your parameters in it.
Since EJS will by default look for files ending with a .ejs extension, if you want to keep on using .html, you need to set up Express as follows:
var ejs = require('ejs');
...
app.set('view engine', 'html');
app.engine('html', ejs.renderFile);
This tells Express to look for files with extension .html in the ./views directory, and to render those files using EJS.

var express = require('express');
var router = express.Router();
router.get('/index',function(req,res){
res.sendFile(path.resolve('./public/index.html'));
});
module.exports = router;

Rendering folder contents like mod_autoindex with express and ejs in my node.js app

I have been using express and ejs to render raw html files in a /public folder.
For example, to render http://localhost:3000/index.html, I have:
var express = require('express');
var ejs = require('ejs');
app.engine('.html', ejs.__express);
app.set('views', __dirname + '/public');
app.set('view engine', 'html');
app.use(express.static(__dirname + './public'));
and can render files from /public:
% find public/
public/index.html
public/favicon.ico
public/stylesheets
public/stylesheets/style.css
public/images
public/images/banner.gif
I want to be able render a folder contents, like http://localhost:3000/images/, exactly like the Apache module mod_autoindex, a table of files as links showing the directory contents.
Is there a way to do this?

The answer is simple, just search the npm library.
https://www.npmjs.com/package/mod_autoindex will do the job.

Webpage cannot find certain files

I am building a simple sandbox/practice style website on heroku I am trying to learn nodejs and I am learning Angular. After much hit and miss I got the server to load my home.html page, however it cannot seem to find my vendor scripts. Such as my angular, contollers, and some images/css.
The path I have setup for angular is: <script src="/vendor/angular.min.js"></script>
<script src="/controller.js"></script>
This is coming from a localhostconnection by the way, so http://localhost Here is an example of what my simple index.js in node looks like:
var express = require("express");
var app = express();
app.set("port", (process.env.PORT || 5000));
app.engine('html', require('ejs').renderFile);
app.set('views engine', 'html');
app.use(express.static(__dirname + "/public"));
app.get("/", function(request, response) {
response.render("home.html");
});
app.listen(app.get("port"), function() {
console.log("Node app is running at localhost:" + app.get("port"));
});
this is located in the root of the webfiles and it points to a views folder which includes my home.html (how I got my home page to finally load) However it still says it cannot find my vendor scripts.
These are located inside their own vendor folder that is in the root folder, and the views folder is also its own folder in the root folder the setup is like so:
-views
---home.html
-vendor
--some vendor folders(bootstrap etc)
---angularjs.js and other vendor scripts
I am sure I am missing something simple here, but I am a beginner with nodejs and still learning at this point. Thank you ahead of time for the help, and let me know if I can offer anymore information.

"Error: Cannot find module html" when visiting HTML page

When I started my application, and visited localhost:8333 in my browser, it threw an error:
Error: Cannot find module 'html'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at new View (C:\Users\fr\node_modules\express\lib\view.js:42:49)
at Function.app.render (C:\Users\fr\node_modules\express\lib\application.js:483:12)
at ServerResponse.res.render (C:\Users\fr\node_modules\express\lib\response.js:755:7)
at allClients (C:\Users\fr\node_modules\apps\chat.js:13:7)
at callbacks (C:\Users\fr\node_modules\express\lib\router\index.js:161:37)
at param (C:\Users\fr\node_modules\express\lib\router\index.js:135:11)
Here's my code:
var io = require('socket.io');
var express = require('express');
var app = express(),
http = require('http'),
server = http.createServer(app),
socket = require('socket.io').listen(server);
app.configure(function(){
app.use(express.static(__dirname));
});
app.get('/', function(req, res, next){
res.render('./test.html');
});
server.listen(8333);
This is my project folder structure:
node_modules/
express/
socket.io/
apps/
chat.js
test.html
This is my new app.configure:
app.configure(function(){
app.use(express.static(path.join(__dirname, 'public')));
});
But that code fails with this error:
path is not defined

I am assuming that test.html is a static file. To render static files, use the static middleware like so:
app.use(express.static(path.join(__dirname, 'public')));
This tells Express to look for static files in the public directory of the application.
Once you have specified this, simply point your browser to the location of the file and it should display.
If, however, you want to render the views, then you have to use the appropriate renderer for it. The list of renderers is defined in the consolidate.js library.
Once you have decided which library to use just install it. I use mustache so here is a snippet of my app file:
var engines = require('consolidate');
app.set('views', __dirname + '/views');
app.engine('html', engines.mustache);
app.set('view engine', 'html');
This tells Express to—
Look for files to render in the views directory
Render the files using mustache
The extension of the file is .html (you can use .mustache too).

A simple way is to use the EJS template engine for serving .html files. Put this line right next to your view engine setup:
app.engine('html', require('ejs').renderFile);

Install the ejs module from npm:
npm install ejs
Then just paste below two lines in your main file (app.js or main.js):
app.set('view engine', 'html');
app.engine('html', require('ejs').renderFile);

Install consolidate and mustache by executing the below command in your project folder.
sudo npm install consolidate mustache --save
And make the following changes to your app.js file
var engine = require('consolidate');
app.set('views', __dirname + '/views');
app.engine('html', engine.mustache);
app.set('view engine', 'html');
And now HTML pages will be rendered properly.

I think you might need to declare a view engine. If you want to use a view/template engine:
app.set('view engine', 'ejs');
or
app.set('view engine', 'jade');
But to render plain HTML, see this post.

Use res.sendFile() instead of res.render(). What you're trying to do is send a whole file.

Try installing the html module from npm:
npm i html