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.
Related
How do you host multiple webpages with an extension file of .ejs? I have a login page coded in .ejs and I wanted to host it on node.js by using those .ejs file and other pages connected with the login page I have or rather I wanted the login.ejs file to run using node.js. Thank you very much
Put all your *.ejs files in views folder (recommended way) and then set them as views in express using following code
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
Now you can start rendering them on the path you wanted like below
router.get('/foo', function(req, res) {
res.render('foo') // this renders /views/foo.ejs
}
I have an express app where my views are set to HTML, but I'm actually using the ejs engine, to preserve the .html extension. It looks like this:
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');
app.engine('html', ejs.renderFile);
app.use(expressLayouts);
I want to use ejs includes in my templates. My folder structure is as follows:
views/includes/include.html
My include looks like this:
<% include includes/include %>
When setting the view engine to ejs (so for example app.set('view engine', 'ejs');) the includes works as expected. But when using the view engine configuration that I have now (app.set('view engine', 'html');
app.engine('html', ejs.renderFile);) I get this:
GET / 500 2.074 ms - 2580 Error: Could not find include include file.
In my view engine, do I need to explicitly set it to ejs, vs. the approach I'm taking now? How can I get includes to work with the .html extension?
I think the relevant line in the EJS source code is here:
https://github.com/mde/ejs/blob/67ca0a80a5a68277774c693204ce49ef11bb84b4/lib/ejs.js#L112
That appends .ejs to the end of the filename for an include if it doesn't already have an extension. There doesn't seem to be any way to change that but you could explicitly add the .html extension to your include.
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;
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.
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