How do I use HTML as the view engine in Express?

Question

I tried this simple change from the seed and created the corresponding .html files (e.g. index.html).

//app.set('view engine', 'jade');
app.set('view engine', 'html');

and this file remained the same:

exports.index = function(req, res){
  res.render('index');
};

but while running I get

500 Error: Cannot find module 'html'

Is my only option to use 'ejs'? My intent was to use plain HTML in conjuction with AngularJS.

See this topic for an answer: http://stackoverflow.com/questions/4529586/render-basic-html-view-in-node-js-express Hope this helps, — roland, Jul 28 '13 at 18:13

score 107 · Answer 1 · answered Jul 28 '13 at 19:14

107

The answers at the other link will work, but to serve out HTML, there is no need to use a view engine at all, unless you want to set up funky routing. Instead, just use the static middleware:

app.use(express.static(__dirname + '/public'));

answered Jul 28 '13 at 19:14

Dan Kohn

33,811
9
84
100

4

I went ahead and commented out the reference to app.set('view engine', html). I then got an error message that "No default engine was specified and no extension was provided", which is expected. But when I changed the res.render("index") to res.render("index.html"), I got the following error: TypeError: Property 'engine' of object # is not a function. – Julio Jul 29 '13 at 04:11
4

There is no more view engine, so I don't think `res.render()` will work any more. Instead, put your raw HTML files in `public` and let the static middleware deal with serving the files directly. If you need fancier routes than this, you could probably set up your own HTML view engine. – Nick McCurdy Nov 16 '14 at 06:09
6

So what do you write in the app.get() call? – ajbraus Jul 07 '15 at 03:20
5

@ajbraus you don't even need an app.get() call at all. This will just serve whatever html files you have in the /public folder directly. So in the browser, you just point to the html directly and that's it... basically no routing – dm76 Mar 31 '16 at 10:20
The problem I have been getting with this is if you refresh the page after it loads it gives you an error saying Error: No default engine was specified and no extension was provided. then if you use Auth, {provide: LocationStrategy, useClass: HashLocationStrategy} ], it ads a hash to your url which is a pain for other reasons. Is there a way around this? – wuno Nov 12 '16 at 20:44
@ajbraus - You could serve the html file with `res.sendFile`, e.g. `app.get('/', (req, res) => res.sendFile("index.html"));` – rovyko Sep 20 '20 at 16:55

score 41 · Answer 2 · edited May 02 '16 at 00:00

41

To make the render engine accept html instead of jade you can follow the following steps;

Install consolidate and swig to your directory.

 npm install consolidate
 npm install swig

add following lines to your app.js file

var cons = require('consolidate');

// view engine setup
app.engine('html', cons.swig)
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');

add your view templates as .html inside “views” folder. Restart you node server and start the app in the browser.

Though this will render html without any issue, I would recommend you to use JADE by learning it. Jade is an amazing template engine and learning this will help you achieve better design & scalability.

edited May 02 '16 at 00:00

ThisClark

14,352
10
69
100

answered Feb 14 '16 at 20:10

AnandShanbhag

6,389
1
20
20

has no method 'engine' - after all steps – Mani Feb 27 '16 at 12:59
Which version of express are you using? Express 4.x contains the app.engine API. More info is @ http://expressjs.com/en/api.html#app.engine – AnandShanbhag Mar 03 '16 at 13:48
Worked great! I love when a year old answer works the first time. – Matthew Snell Sep 15 '17 at 05:02
why it still cant render my css and other – frustrated-dev Jul 25 '20 at 16:31

score 34 · Answer 3 · edited Apr 03 '21 at 14:08

34

In your apps.js just add

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

Now you can use ejs view engine while keeping your view files as .html

source: http://www.makebetterthings.com/node-js/how-to-use-html-with-express-node-js/

You need to install this two packages:

npm install ejs --save
npm install path --save

And then import needed packages:

var path = require('path');

This way you can save your views as .html instead of .ejs.
Pretty helpful while working with IDEs that support html but dont recognize ejs.

edited Apr 03 '21 at 14:08

Theblockbuster1

308
6
15

answered Jun 25 '16 at 05:34

Sudhanshu Gupta

1,889
1
17
15

2

app.set('views', path.join(__dirname, '/path/to/your/folder')); app.set("view options", {layout: false}); app.engine('html', function(path, opt, fn) { fs.readFile(path, 'utf-8', function(error, str) { if (error) return str; return fn(null, str); }); }); – nilakantha singh deo Nov 13 '16 at 03:18

score 22 · Answer 4 · answered Sep 06 '16 at 12:47

22

No view engine is necessary, if you want to use angular with simple plain html file. Here's how to do it: In your route.js file:

router.get('/', (req, res) => {
   res.sendFile('index.html', {
     root: 'yourPathToIndexDirectory'
   });
});

answered Sep 06 '16 at 12:47

Ashish Rawat

3,363
5
29
35

2

Absolutely the easiest solution. I have no view engine installed / configured and the html is sent. – Newclique Jun 24 '18 at 18:15

score 18 · Answer 5 · answered Mar 05 '14 at 22:50

try this for your server config

app.configure(function() {
    app.use(express.static(__dirname + '/public'));         // set the static files location
    app.use(express.logger('dev'));                         // log every request to the console
    app.use(express.bodyParser());                          // pull information from html in POST
    app.use(express.methodOverride());                      // simulate DELETE and PUT
    app.use(express.favicon(__dirname + '/public/img/favicon.ico'));
});

then your callback functions to routes will look like:

function(req, res) {
    res.sendfile('./public/index.html');
};

score 10 · Answer 6 · answered Nov 17 '18 at 10:28

I recommend using https://www.npmjs.com/package/express-es6-template-engine - extremely lightwave and blazingly fast template engine. The name is a bit misleading as it can work without expressjs too.

The basics required to integrate express-es6-template-engine in your app are pretty simple and quite straight forward to implement:

const express = require('express'),
  es6Renderer = require('express-es6-template-engine'),
  app = express();
  
app.engine('html', es6Renderer);
app.set('views', 'views');
app.set('view engine', 'html');
 
app.get('/', function(req, res) {
  res.render('index', {locals: {title: 'Welcome!'}});
});
 
app.listen(3000);

Here is the content of the index.html file locate inside your 'views' directory:

<!DOCTYPE html>
<html>
<body>
    <h1>${title}</h1>
</body>
</html>

This almost gets me to server-side rendering of a React page, all one-page HTML/CSS/JS/React. I didn't realize I can actually now just do `
${customer.name}
` in my React render! I'm wishing I could find how to extract `{locals: { rows: [ ]}` to map out a set of elements. Any clue? — Neil Gaetano Lindberg, May 25 '21 at 20:34

score 6 · Answer 7 · answered Aug 02 '19 at 10:42

6

Comment out the middleware for html i.e.

//app.set('view engine', 'html');

Instead use:

app.get("/",(req,res)=>{
    res.sendFile("index.html");
});

answered Aug 02 '19 at 10:42

Shivam Chhetri

677
11
16

Dinesh Kanivu · Answer 8 · 2017-07-06T09:39:14.927

4

Answer is very Simple. You Must use app.engine('html') to render *.html Pages. try this.It must Solve the Problem.

app.set('views', path.join(__dirname, 'views'));
**// Set EJS View Engine**
app.set('view engine','ejs');
**// Set HTML engine**
app.engine('html', require('ejs').renderFile);

the .html file Will work

edited Jul 06 '17 at 09:39

answered Jul 06 '17 at 09:33

Dinesh Kanivu

2,551
1
23
55

2

Incomplete answer. Where are these changes made? Assuming app.js but your answer needs to be specific. Also, this is likely not all that needs changing because the result of making just these three changes/additions is "Cannot find module 'ejs'". Your answer is probably close but you need to add just a bit more info imho. – Newclique Jun 24 '18 at 17:55
Also, rendering is not the same as serving a file. Rendering requires the server to pre-process a file and add whatever dynamic content is passed into the render method. Maybe that's what the OP wanted but some people conflate rendering with serving. Very different concepts. – Newclique Jun 24 '18 at 18:18
@wade its for rendering html file rather than the ejs file. – Dinesh Kanivu Sep 04 '18 at 07:12

score 4 · Answer 9 · answered Jul 10 '20 at 13:48

Html files do not need to be rendered.
what a render engine does is turn a file that is not an Html file into an Html file.
to send an Html file, just do:

res.sendFile("index.html");

you might need to use __dirname+"/index.html" so express will know the exact path.

JerryFZhang · Answer 10 · 2016-04-04T19:37:08.213

3

HTML files can be rendered using ejs engine:

app.set('view engine', 'ejs');

And make sure your files under "/views" are named with ".ejs".

For example "index.ejs".

edited Apr 04 '16 at 19:37

answered Apr 04 '16 at 19:27

JerryFZhang

41
3

It works but feels a bit hacky. Do you know if there are any caveats from using .ejs in place of .html? Cheers for probably the quickest fix suggested all the same! – mikeym Feb 21 '17 at 20:02

score 3 · Answer 11 · answered May 14 '19 at 14:11

3

html is not a view engine , but ejs offers the possibility to write html code within it

answered May 14 '19 at 14:11

Wael Chorfan

686
7
9

score 3 · Answer 12 · answered Oct 08 '19 at 23:36

Install ejs template

npm install ejs --save

Refer ejs in app.js

app.set('views', path.join(__dirname, 'views'));`
app.set('view engine', 'ejs');

Create a ejs template in views like views/indes.ejs & use ejs tempalte in router

router.get('/', function(req, res, next) {
    res.render('index', { title: 'Express' });
});

score 1 · Answer 13 · answered Jan 13 '16 at 07:41

to server html pages through routing, I have done this.

var hbs = require('express-hbs');
app.engine('hbs', hbs.express4({
  partialsDir: __dirname + '/views/partials'
}));
app.set('views', __dirname + '/views');
app.set('view engine', 'hbs');

and renamed my .html files to .hbs files - handlebars support plain html

score 1 · Answer 14 · answered Apr 29 '17 at 01:37

To make the render engine accept html instead of jade you can follow the following steps;

Install consolidate and swig to your directory.

 npm install consolidate
 npm install swig

add following lines to your app.js file

var cons = require('consolidate');

// view engine setup
app.engine('html', cons.swig)
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');

add your view templates as .html inside “views” folder. Restart you node server and start the app in the browser.

This should work

Kiryamwibo Yenusu · Answer 15 · 2019-06-14T14:03:08.527

1

Try out this simple solution, it worked for me

app.get('/', function(req, res){
    res.render('index.html')
  });

edited Jun 14 '19 at 14:03

answered Feb 08 '18 at 17:43

Kiryamwibo Yenusu

158
11

1

you should add all your lines, this on its own is not working. – MushyPeas Jan 17 '19 at 16:15

score 0 · Answer 16 · answered Mar 12 '20 at 06:55

Render html template with the help of swig.

//require module swig    
    var swig = require('swig');

// view engine setup    
    app.set('views', path.join(__dirname, 'views'));
    app.engine('html', swig.renderFile);
    app.set('view engine', 'html');

How do I use HTML as the view engine in Express?

16 Answers16

Linked

Related