Render basic HTML view?

Question

I have a basic Node.js app that I am trying to get off the ground using the Express framework. I have a views folder where I have an index.html file. But I receive the following error when loading the web page:

Error: Cannot find module 'html'

Below is my code.

var express = require('express');
var app = express.createServer();

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

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

app.listen(8080, '127.0.0.1')

What am I missing here?

score 315 · Accepted Answer · answered Jan 19 '12 at 06:49

315

You can have jade include a plain HTML page:

in views/index.jade

include plain.html

in views/plain.html

<!DOCTYPE html>
...

and app.js can still just render jade:

res.render(index)

answered Jan 19 '12 at 06:49

Andrew Homeyer

7,937
5
33
26

2

Just to note that what I want was to serve only one .html file because my app was single page ;) – Diosney Feb 06 '13 at 01:20
This answer is excellent. Note you can also keep using layout and just put the include inside the content block. – paulcpederson Apr 11 '14 at 18:23
1

Can We included multiple HTML/JS pages with this method ? – user3398326 Jul 16 '14 at 05:28
15

shouldn't you be able to render that html page without a jade template just for initial testing of express? – PositiveGuy Feb 24 '16 at 08:32
1

So do we have to create a jade template for each of our HTML files? – Chris - Jr Sep 02 '17 at 01:27
4

More of a hack rather than a solution. – Ozil Dec 22 '17 at 07:58
As suggested above, this answer only works when using Jade template system. It doesn't work with e.g. handlebars. – Tony Jul 24 '20 at 14:34
Make sure to install jade i.e. `npm i jade` to use this setup – VPaul Jan 08 '21 at 23:20
One of the easiest approaches is sending the HTML back to the browser. ``` router.get('/about',function(req,res){ res.sendFile(path.join(__dirname+'/about.html')); }); ``` Or using rendering engines like Pug or Jade. I personally believe that sending the HTML build from frameworks like React.js is the easiest way to achieve rendering of the apps. This https://codeforgeek.com/render-html-file-expressjs/ covers most of it. – Shaikh Shahid May 01 '21 at 10:29

Drew Noakes · Answer 2 · 2014-10-19T23:24:33.873

252

Many of these answers are out of date.

Using express 3.0.0 and 3.1.0, the following works:

app.set('views', __dirname + '/views');
app.engine('html', require('ejs').renderFile);

See the comments below for alternative syntax and caveats for express 3.4+:

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

Then you can do something like:

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

This assumes you have your views in the views subfolder, and that you have installed the ejs node module. If not, run the following on a Node console:

npm install ejs --save

edited Oct 19 '14 at 23:24

answered Aug 17 '12 at 14:59

Drew Noakes

300,895
165
679
742

why does the res.render require the .html extension in this case but not in the default case with jade. with the boilerplate code, it just calls res.render('index', { title: 'Express' }); but here, it's : res.render('about.html'); – Transcendence Jul 26 '13 at 21:19
@Transcendence, I'm not sure exactly. Perhaps you should open a new question. – Drew Noakes Jul 27 '13 at 19:14
7

With Express 3.4.2: app.set('view engine', 'ejs'); – roland Oct 19 '13 at 12:52
3

You should use the command 'npm install ejs --save' to update your package.json – Tom Teman Feb 21 '14 at 17:55
@roland `app.set('view engine', 'ejs');` only worked for me (express 3.5.1) when running from within same directory. To run, e.g. via startup script, I still had to do `app.set('views', __dirname + '/views');`. Just mentioning in case others have this issue. – Tyler Apr 17 '14 at 13:54
16

why do you need ejs? – PositiveGuy Feb 24 '16 at 08:39
I currently have `app.set('view engine', 'hbs');` should I attach another dependency (`ejs`)? – JCarlosR Dec 07 '17 at 18:32
Everything works but remember about correct path. For me works `app.set('views', '../public/views');` because I have `server.js` and `app.js` in different location. – Robert Daraż Sep 17 '19 at 12:22
Hi, how you pass locals to the view in this case? For example how you handle in 'index.html' this locals.title?: router.get('/', function(req, res){ res.render('index', {locals: {title: 'Welcome!'}}); }); I tried ${title} and <%= title%?> but no success. – Vlado Mar 07 '20 at 22:03
Even though this answer is old and it didn't exactly work as described here, I managed to get this to work in a weird way. All the prep work for this answer worked, but when it came to actually rendering a html file, it threw up the same error OP mentioned in his question; Cannot find module 'html.' Then, I realized that regardless of what content is in the file just as long as the file extension is ejs, render procedure renders and client displays it with no errors. So, I changed all of my html files' extension to ejs and they are all being rendered successfully. Horay!!! :) – ThN Jun 11 '21 at 16:14

score 73 · Answer 3 · edited Nov 18 '15 at 09:58

73

From the Express.js Guide: View Rendering

View filenames take the form Express.ENGINE, where ENGINE is the name of the module that will be required. For example the view layout.ejs will tell the view system to require('ejs'), the module being loaded must export the method exports.render(str, options) to comply with Express, however app.register() can be used to map engines to file extensions, so that for example foo.html can be rendered by jade.

So either you create your own simple renderer or you just use jade:

 app.register('.html', require('jade'));

More about app.register.

Note that in Express 3, this method is renamed app.engine

edited Nov 18 '15 at 09:58

nbro

15,395
32
113
196

answered Dec 25 '10 at 18:41

Ivo Wetzel

46,459
16
98
112

57

Note- app.register has been renamed app.engine in Express 3. – Spongeboy Jul 16 '12 at 08:18
8

See answer from Andrew Homeyer. It is the actual answer. – David Betz May 30 '13 at 03:44
7

From some other answer, for Express 4 I ended up using `app.engine('.html', require('ejs').renderFile);` – CrazyPyro Apr 07 '15 at 16:48
In express 4, you could also use: app.set('view engine', 'jade'); – Daniel Huang Oct 26 '15 at 01:48

score 61 · Answer 4 · edited Jan 03 '19 at 19:51

61

You could also read the HTML file and send it:

app.get('/', (req, res) => {
    fs.readFile(__dirname + '/public/index.html', 'utf8', (err, text) => {
        res.send(text);
    });
});

edited Jan 03 '19 at 19:51

Ed The ''Pro''

875
10
22

answered Jun 22 '11 at 09:21

keegan3d

10,357
9
53
77

26

this solution is bad because no caching of the files ; it is read for every request. – Marcel Falliere Sep 05 '12 at 08:17
2

its potentially pretty easy to cache it manually. Just store the read file a variable, and only read again, if that variable is blank. You could also use a JS object and store various files in various variables, with timestamps. Sure its more work than most people would do, but it's good with people new to node. It's easy to understand – Naman Goel Oct 21 '12 at 17:22
7

Yikes. This defeats the entire point of convention-oriented, streamlined architectures (like MVC). – David Betz May 30 '13 at 03:41
1

@MarcelFalliere You're assuming that he wants to cache the file, or that he doesn't want to use a custom caching solution. Thank you keegan3d for the answer. – Benny Schmidt Feb 25 '15 at 17:27
@MarcelFalliere Then, what is the right solution? I see other answers that requiere new dependencies. Is it necessary just for serve html files? – JCarlosR Dec 07 '17 at 18:34
@benny @JCarlos the right solution IIMO is to use the `static` middleware of express. – Marcel Falliere Feb 19 '18 at 10:26
awesome,I like native node.js API – xgqfrms Apr 20 '21 at 16:40
I have just one html file because I am using create-react-app and I need to serve the same HTML file for all URLs for react-router to work correctly. This solution seems perfect when I cache the contents in a variable! – Andrew Nessin Feb 26 '22 at 02:48
This solution is great for me, thanks~ – Ali Aug 18 '22 at 04:24

score 46 · Answer 5 · answered Aug 05 '11 at 17:08

46

try this. it works for me.

app.configure(function(){

  .....

  // disable layout
  app.set("view options", {layout: false});

  // make a custom html template
  app.register('.html', {
    compile: function(str, options){
      return function(locals){
        return str;
      };
    }
  });
});

....

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

answered Aug 05 '11 at 17:08

spectrum

744
8
7

2

had trouble with the exact configuration above, so I removed the dot from ".html" and added this: app.set('view engine', 'html'); app.set('views', __dirname + '/views'); for a perfect render – Bijou Trouvaille Feb 05 '12 at 14:13
8

This is a bit weird... you should serve html as static files. This also gives you the benefit of better caching. Creating a custom "html compiler" seems wrong. If you need to send a file from within a route (which you very rarely need to do) just read and send it. Otherwise just redirect to the static html. – enyo Mar 07 '12 at 11:37
2

@Enyo this comment seems odd, considering HOW TO do what you are saying should be done is THE QUESTION BEING ASKED, and your answer is to just do it. How do you serve a static html with caching? – Kyeotic May 28 '12 at 07:17
@Tyrsius, well not really. I'm saying that you shouldn't just *render* an html file. If you really really have to send it from within a route you could read the file with `fs` and then send the plain text. What I suggest doing is **redirecting** to the html file instead of trying to directly render it inside the route. – enyo Jul 09 '12 at 15:27
3

I see an error on `app.register`. Perhaps it's been deprecated in express 3.0.0.rc3? `TypeError: Object function app(req, res){ app.handle(req, res); } has no method 'register'` – Drew Noakes Aug 17 '12 at 14:30
This suggestion worked for me. All others seemed to either render the view showing the markup on screen or gave me errors in the node console. This was the only one that truly rendered the correct HTML. – sma Nov 18 '12 at 02:48
1

@enyo, you missed the point of the steamlined architecture. When the pattern is controller/view (or /processor/view, whatever your specific architecture is), you can't deviate from that with with the obsolete model of extensions. You need to treat your HTML as rendered content like everything else. Keep it DRY, dude. – David Betz May 30 '13 at 03:39

score 28 · Answer 6 · answered Nov 30 '11 at 14:04

28

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

answered Nov 30 '11 at 14:04

nod

399
3
3

6

sendfile is not cache in production mode so this is not a good solution. – Teo Choong Ping Feb 05 '12 at 11:19
2

@SeymourCakes Kindly correct me if I'm wrong, but I think sendFile now supports caching: http://devdocs.io/express/index#res.sendFile – KhoPhi May 02 '16 at 13:13

score 21 · Answer 7 · edited Nov 18 '15 at 10:02

21

If you're using express@~3.0.0 change the line below from your example:

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

to something like this:

app.set("view options", {layout: false});
app.use(express.static(__dirname + '/public'));

I made it as described on express api page and it works like charm. With that setup you don't have to write additional code so it becomes easy enough to use for your micro production or testing.

Full code listed below:

var express = require('express');
var app = express.createServer();

app.set("view options", {layout: false});
app.use(express.static(__dirname + '/public'));

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

app.listen(8080, '127.0.0.1')

edited Nov 18 '15 at 10:02

nbro

15,395
32
113
196

answered Nov 20 '12 at 15:23

Mark Karwowski

619
6
7

1

Why do you repeat `app.use(express.static(__dirname + '/public'));` after you start the server with `app.listen`? – fatuhoku Mar 05 '13 at 14:44
2

what's the diff of serving the html page as static vs. just loading it non-static with express? – PositiveGuy Feb 24 '16 at 08:37

score 15 · Answer 8 · edited Feb 09 '13 at 11:37

I also faced the same issue in express 3.X and node 0.6.16. The above given solution will not work for latest version express 3.x. They removed the app.register method and added app.engine method. If you tried the above solution you may end up with the following error.

node.js:201
        throw e; // process.nextTick error, or 'error' event on first tick
              ^
TypeError: Object function app(req, res){ app.handle(req, res); } has no method 'register'
    at Function.<anonymous> (/home/user1/ArunKumar/firstExpress/app.js:37:5)
    at Function.configure (/home/user1/ArunKumar/firstExpress/node_modules/express/lib/application.js:399:61)
    at Object.<anonymous> (/home/user1/ArunKumar/firstExpress/app.js:22:5)
    at Module._compile (module.js:441:26)
    at Object..js (module.js:459:10)
    at Module.load (module.js:348:31)
    at Function._load (module.js:308:12)
    at Array.0 (module.js:479:10)
    at EventEmitter._tickCallback (node.js:192:40)

To get rid of the error message. Add the following line to your app.configure function

app.engine('html', require('ejs').renderFile);

Note: you have to install ejs template engine

npm install -g ejs

Example:

app.configure(function(){

  .....

  // disable layout
  app.set("view options", {layout: false});

  app.engine('html', require('ejs').renderFile);

....

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

Note: The simplest solution is to use ejs template as view engine. There you can write raw HTML in *.ejs view files.

Do you have to install `ejs` globally? – Drew Noakes Aug 17 '12 at 14:34 — Drew Noakes, Aug 17 '12 at 14:34
it's tell me it can't find the 'index.html' file – MetaGuru Dec 22 '12 at 03:00 — MetaGuru, Dec 22 '12 at 03:00

score 11 · Answer 9 · answered Apr 17 '17 at 07:21

folder structure:

.
├── index.html
├── node_modules
│   ├──{...}
└── server.js

server.js

var express = require('express');
var app = express();

app.use(express.static('./'));

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

app.listen(8882, '127.0.0.1')

index.html

<!DOCTYPE html>
<html>
<body>

<div> hello world </div>

</body>
</html>

output:

hello world

score 9 · Answer 10 · answered Oct 04 '12 at 16:14

9

If you don't have to use the views directory, Simply move html files to the public directory below.

and then, add this line into app.configure instead of '/views'.

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

answered Oct 04 '12 at 16:14

spectrum

744
8
7

score 8 · Answer 11 · edited Dec 16 '13 at 14:08

8

For my project I have created this structure:

index.js
css/
    reset.css
html/
    index.html

This code serves index.html for / requests, and reset.css for /css/reset.css requests. Simple enough, and the best part is that it automatically adds cache headers.

var express = require('express'),
    server = express();

server.configure(function () {
    server.use('/css', express.static(__dirname + '/css'));
    server.use(express.static(__dirname + '/html'));
});

server.listen(1337);

edited Dec 16 '13 at 14:08

Community

1
1

answered May 30 '12 at 20:55

Markus Hedlund

23,374
22
80
109

`server.configure` is deprecated, so directly use `server.use` – Sam007 Sep 20 '20 at 18:00

score 8 · Answer 12 · edited Dec 23 '20 at 19:36

If you want to render HTML file you can use sendFile() method without using any template engine

const express =  require("express")
const path = require("path")
const app = express()
app.get("/",(req,res)=>{
    res.sendFile(**path.join(__dirname, 'htmlfiles\\index.html')**)
})
app.listen(8000,()=>{
    console.log("server is running at Port 8000");
})

I have an HTML file inside htmlfile so I used path module to render index.html path is default module in node. if your file is present in root folder just used

res.sendFile(path.join(__dirname, 'htmlfiles\\index.html'))

inside app.get() it will work

score 7 · Answer 13 · edited Jul 05 '16 at 06:42

7

To render Html page in node try the following,

app.set('views', __dirname + '/views');

app.engine('html', require('ejs').renderFile);

You need to install ejs module through npm like:
```
   npm install ejs --save
```

edited Jul 05 '16 at 06:42

Geeky Ninja

6,002
8
41
54

answered Jul 05 '16 at 06:07

Trojan

1,396
2
16
19

This solution worked for me. Although I tried static option too. Can you explain the mechanism behind it. Thanks! – harshad Feb 05 '19 at 11:53

score 4 · Answer 14 · answered Apr 17 '14 at 17:44

With Express 4.0.0, the only thing you have to do is comment out 2 lines in app.js:

/* app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade'); */ //or whatever the templating engine is.

And then drop your static file into the /public directory. Example: /public/index.html

score 4 · Answer 15 · answered Jun 25 '20 at 17:17

4

Express 4.x

res.sendFile(path [, options] [, fn])

Send .html files, no template engine...

//...
// Node modules
const path = require('path')
//...
// Set path to views directory
app.set('views', path.join(__dirname, 'views'))
/**
 * App routes
 */
app.get('/', (req, res) => {
  res.sendFile('index.html', { root: app.get('views') })
})
//...

.
├── node_modules
│
├── views
│   ├──index.html
└── app.js

answered Jun 25 '20 at 17:17

Drozerah

236
3
9

I had to use `var app = express(); app.set('views', path.join(__dirname, '../views'));`. Without the "../folderName" it was looking in the routes folder. – Tony Jul 24 '20 at 14:35

score 3 · Answer 16 · answered Oct 15 '14 at 12:40

3

I added below 2 line and it work for me

    app.set('view engine', 'html');
    app.engine('html', require('ejs').renderFile);

answered Oct 15 '14 at 12:40

Naren Chejara

1,124
10
7

it gives me the following error "Error: Cannot find module 'ejs' 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) " – Lygub Org May 31 '15 at 17:13
@LygubOrg run `npm install ejs --save` in your working directory. – A1rPun Dec 16 '15 at 18:27
1

is it necessary to add a dependency only to serv a html file? – JCarlosR Dec 07 '17 at 18:28

score 3 · Answer 17 · answered Jan 20 '15 at 04:24

Try res.sendFile() function in Express routes.

var express = require("express");
var app     = express();
var path    = require("path");


app.get('/',function(req,res){
  res.sendFile(path.join(__dirname+'/index.html'));
  //__dirname : It will resolve to your project folder.
});

app.get('/about',function(req,res){
  res.sendFile(path.join(__dirname+'/about.html'));
});

app.get('/sitemap',function(req,res){
  res.sendFile(path.join(__dirname+'/sitemap.html'));
});

app.listen(3000);

console.log("Running at Port 3000");

Read here : http://codeforgeek.com/2015/01/render-html-file-expressjs/

score 3 · Answer 18 · answered Jun 03 '16 at 14:42

I didn't want to depend on ejs for simply delivering an HTML file, so I simply wrote the tiny renderer myself:

const Promise = require( "bluebird" );
const fs      = Promise.promisifyAll( require( "fs" ) );

app.set( "view engine", "html" );
app.engine( ".html", ( filename, request, done ) => {
    fs.readFileAsync( filename, "utf-8" )
        .then( html => done( null, html ) )
        .catch( done );
} );

Tomáš · Answer 19 · 2014-02-27T10:10:56.280

2

1) The best way is to set static folder. In your main file (app.js | server.js | ???):

app.use(express.static(path.join(__dirname, 'public')));

public/css/form.html
public/css/style.css

Then you got static file from "public" folder:

http://YOUR_DOMAIN/form.html
http://YOUR_DOMAIN/css/style.css

2)

You can create your file cache.
Use method fs.readFileSync

var cache = {};
cache["index.html"] = fs.readFileSync( __dirname + '/public/form.html');

app.get('/', function(req, res){    
    res.setHeader('Content-Type', 'text/html');
    res.send( cache["index.html"] );                                
};);

edited Feb 27 '14 at 10:10

answered Feb 27 '14 at 09:45

Tomáš

2,078
3
22
21

not bad! here is a full file demo! [https://gist.github.com/xgqfrms-GitHub/7697d5975bdffe8d474ac19ef906e906](https://gist.github.com/xgqfrms-GitHub/7697d5975bdffe8d474ac19ef906e906) – xgqfrms Nov 28 '16 at 12:04

score 2 · Answer 20 · answered Mar 05 '14 at 22:37

I was trying to set up an angular app with an express RESTful API and landed on this page multiple times though it wasn't helpful. Here's what I found that worked:

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 in the callback for your api routes look like: res.jsonp(users);

Your client side framework can handle routing. Express is for serving the API.

My home route looks like this:

app.get('/*', function(req, res) {
    res.sendfile('./public/index.html'); // load the single view file (angular will handle the page changes on the front-end)
});

score 2 · Answer 21 · edited Feb 27 '15 at 10:08

2

res.sendFile(__dirname + '/public/login.html');

edited Feb 27 '15 at 10:08

Aleksandr M

24,264
12
69
143

answered Feb 27 '15 at 10:07

himanshu yadav

1,818
2
13
5

Amulya Kashyap · Answer 22 · 2016-02-06T17:51:00.643

2

Add the following Lines to your code

Replace "jade" with "ejs" & "X.Y.Z"(version) with "*" in package.json file
```
  "dependencies": {
   "ejs": "*"
  }
```
Then in your app.js File Add following Code :

app.engine('html', require('ejs').renderFile);

app.set('view engine', 'html');
And Remember Keep All .HTML files in views Folder

Cheers :)

edited Feb 06 '16 at 17:51

answered Feb 06 '16 at 17:39

Amulya Kashyap

2,333
17
25

score 2 · Answer 23 · answered Nov 28 '16 at 12:08

Here is a full file demo of express server!

https://gist.github.com/xgqfrms-GitHub/7697d5975bdffe8d474ac19ef906e906

hope it will help for you!

// simple express server for HTML pages!
// ES6 style

const express = require('express');
const fs = require('fs');
const hostname = '127.0.0.1';
const port = 3000;
const app = express();

let cache = [];// Array is OK!
cache[0] = fs.readFileSync( __dirname + '/index.html');
cache[1] = fs.readFileSync( __dirname + '/views/testview.html');

app.get('/', (req, res) => {
    res.setHeader('Content-Type', 'text/html');
    res.send( cache[0] );
});

app.get('/test', (req, res) => {
    res.setHeader('Content-Type', 'text/html');
    res.send( cache[1] );
});

app.listen(port, () => {
    console.log(`
        Server is running at http://${hostname}:${port}/ 
        Server hostname ${hostname} is listening on port ${port}!
    `);
});

score 2 · Answer 24 · edited Apr 11 '20 at 21:05

index.js

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


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


app.listen(3400, () => {
    console.log('Server is running at port 3400');
})

Put your index.html file in public folder

<!DOCTYPE html>
<html>
<head>
    <title>Render index html file</title>
</head>
<body>
    <h1> I am from public/index.html </h1>
</body>
</html>

Now run the following code in your terminal

node index.js

score 2 · Answer 25 · answered Dec 31 '19 at 09:45

It is very sad that it is about 2020 still express hasn't added a way to render an HTML page without using sendFile method of the response object. Using sendFile is not a problem but passing argument to it in the form of path.join(__dirname, 'relative/path/to/file') doesn't feel right. Why should a user join __dirname to the file path? It should be done by default. Why can't the root of the server be by defalut the project directory? Also, installing a templating dependency just to render a static HTML file is again not correct. I don't know the correct way to tackle the issue, but if I had to serve a static HTML, then I would do something like:

const PORT = 8154;

const express = require('express');
const app = express();

app.use(express.static('views'));

app.listen(PORT, () => {
    console.log(`Server is listening at port http://localhost:${PORT}`);
});

The above example assumes that the project structure has a views directory and the static HTML files are inside it. For example, let's say, the views directory has two HTML files named index.html and about.html, then to access them, we can visit: localhost:8153/index.html or just localhost:8153/ to load the index.html page and localhost:8153/about.html to load the about.html. We can use a similar approach to serve a react/angular app by storing the artifacts in the views directory or just using the default dist/<project-name> directory and configure it in the server js as follows:

app.use(express.static('dist/<project-name>'));

score 1 · Answer 26 · answered Aug 02 '19 at 10:50

1

For plain html you don't require any npm package or middleware

just use this:

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

answered Aug 02 '19 at 10:50

Shivam Chhetri

677
11
16

score 0 · Answer 27 · edited May 23 '17 at 12:02

I wanted to allow requests to "/" to be handled by an Express route where previously they had been handled by the statics middleware. This would allow me to render the regular version of index.html or a version that loaded concatenated + minified JS and CSS, depending on application settings. Inspired by Andrew Homeyer's answer, I decided to drag my HTML files - unmodified - into a views folder, configure Express like so

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

And created a route handler like so

 app.route('/')
        .get(function(req, res){
            if(config.useConcatendatedFiles){
                return res.render('index-dist');
            }
            res.render('index');       
        });

This worked out pretty well.

score 0 · Answer 28 · answered Oct 27 '15 at 05:22

In server.js, please include

var express = require("express");
var app     = express();
var path    = require("path");


app.get('/',function(req,res){
  res.sendFile(path.join(__dirname+'/index.html'));
  //__dirname : It will resolve to your project folder.
});

score 0 · Answer 29 · answered Apr 28 '19 at 16:41

If you are trying to serve an HTML file which ALREADY has all it's content inside it, then it does not need to be 'rendered', it just needs to be 'served'. Rendering is when you have the server update or inject content before the page is sent to the browser, and it requires additional dependencies like ejs, as the other answers show.

If you simply want to direct the browser to a file based on their request, you should use res.sendFile() like this:

const express = require('express');
const app = express();
var port = process.env.PORT || 3000; //Whichever port you want to run on
app.use(express.static('./folder_with_html')); //This ensures local references to cs and js files work

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/folder_with_html/index.html');
});

app.listen(port, () => console.log("lifted app; listening on port " + port));

This way you don't need additional dependencies besides express. If you just want to have the server send your already created html files, the above is a very lightweight way to do so.

score -1 · Answer 30 · answered Nov 25 '12 at 04:15

-1

I usually use this

app.configure(function() {
    app.use(express.static(__dirname + '/web'));
});

Just be careful because that'll share anything in the /web directory.

I hope it helps

answered Nov 25 '12 at 04:15

DiogoNeves

1,727
2
17
36

score -2 · Answer 31 · answered Aug 28 '13 at 11:38

if you are using express framework to node.js

install npm ejs

then add config file

app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router)

;

render the page from exports module form.js have the html file in the views dir with extension of ejs file name as form.html.ejs

then create the form.js

res.render('form.html.ejs');

Render basic HTML view?

31 Answers31

Linked