NodeJS not serving static html

Question

I am having a problem serving my html file on my node server.

The code in "index.js" looks like this:

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

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

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

app.listen(8081, function () {
  console.log('Magic is happening on port 8081!');
});

Here is a picture of my file structure:

When i run the server, it gives me this error:

TypeError: path must be absolute or specify root to res.sendFile

In the end i need a server that can serve several different pages, this is only the first page i am serving (no sense in going further if the first page doesn't work..)

What am i doing wrong?

I don't know anything about node.js, but try changing the path to '/views/home.html' — Chrisstar
– Chrisstar, Commented Sep 6, 2017 at 12:06
@Chrisstar, when i do that I get: Error: ENOENT: no such file or directory, stat '/views/home.html'. — henrikbossart
– henrikbossart, Commented Sep 6, 2017 at 12:09
What does happen? Do you see an error in the console. What does the browser show, what status code? — t.niese
– t.niese, Commented Sep 6, 2017 at 12:12
A side note: why do you write path.join(__dirname + '/public'), it should be path.join(__dirname, 'public') — t.niese
– t.niese, Commented Sep 6, 2017 at 12:13

henrikbossart · Accepted Answer · 2017-09-06 13:02:09Z

Ok, so i figured out a solution.

I changed the whole setup to this

var express     = require('express');
var app         = express();
var port        = process.env.PORT || 8081;

var path        = require('path');
var http        = require('http');
var router      = express.Router();
//var data        = require('./routes/data');

// Setting the view engine and defining paths
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
app.use(express.static(path.join(__dirname, 'public')));
app.set('views', path.join(__dirname, 'views'));

require('./routes/routes')(app);

app.listen(port, function () {
    console.log('server running on port ' + port);
});

module.exports = app;

This is now working the way i wanted it to. Not sure if its optimal or perfect, but i think it does the job.

Thank you all for your help!!

num8er · Accepted Answer · 2017-09-06 12:15:09Z

0

To make this code work:

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

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

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

app.listen(8081, function () {
  console.log('Magic is happening on port 8081!');
});

You must have such dir structure:

views
  |-home.html
public
  |- some files here
index.js

answered Sep 6, 2017 at 12:15

num8er

19.5k4 gold badges50 silver badges61 bronze badges

Comments

t.niese · Accepted Answer · 2017-09-06 12:20:26Z

0

The documentation and the error tell you that sendFile that [...]Unless the root option is set in the options object, path must be an absolute path to the file[...] (res.sendFile(path [, options] [, fn]))

So you have to write:

res.sendFile(path.join(__dirname, 'public/views/home.html'))

answered Sep 6, 2017 at 12:20

t.niese

41k9 gold badges78 silver badges111 bronze badges

4 Comments

henrikbossart Over a year ago

That works, but i was under the impression that there is a slightly other way to do it, considering that there will be several other pages in addition to the 'home.html' page.

t.niese Over a year ago

@henrikbossart Well you wrote it that way in your question. Your question was not how to solve it for several other pages. But why your code does not serve that given file.

henrikbossart Over a year ago

Sorry, my bad.. i need this to work for several pages

t.niese Over a year ago

@henrikbossart and how should it work? Currently yourdomain.tld/view/home.html would server that or any other file in that directory. If this is not that path you want to have, add another express.static e.g. with path.join(__dirname, 'public/views/') so that the path would be yourdomain.tld/home.html. But from the question it is not clear how the request path should correspond to the file that is served.

raj peer · Accepted Answer · 2017-09-06 12:21:51Z

Run this code, keep on html file in same folder, ex: index.html in browser, localhost:9000/index.html

    var http = require("http");
    var fs = require("fs");
    var port = 9000;

    //create server
    http.createServer(function(req,resp){
        reqUrl = req.url;
        var day = reqUrl.slice(1,reqUrl.length-1);
        file = reqUrl;
        callPage(req,resp,file);
    }).listen(port); 


    function callPage(req,resp,fileName){

        fileName = reqUrl.slice(1,reqUrl.length);
        console.log(fileName)
        fs.readFile(fileName,function(err,html){
            if(err){
                throw err;
            }

            resp.writeHead(200,{"content-type":"text/html"});
            resp.write(html);
            resp.end();
        });

    }

Artem Ilchenko · Accepted Answer · 2017-09-06 12:24:06Z

0

For your dir structure your code must looks like

app.use(express.static(path.join(__dirname, 'public', 'views'), {index: 'home.html'})); app.use(express.static(path.join(__dirname, 'public'))); Serving static files examples

edited Sep 6, 2017 at 12:24

answered Sep 6, 2017 at 12:10

Artem Ilchenko

1,0259 silver badges20 bronze badges

Comments

num8er · Accepted Answer · 2017-09-06 12:37:30Z

0

Here is my recommendations:

1) Move views folder to same location with index.js

2) Update code of index.js:

const 
    DEBUG_MODE = (process.env.DEBUG == 1),
    express = require('express'),
    app = express();

/* DEFINE VIEW RENDERER */
app.set('view cache', !DEBUG_MODE);
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

/* DEFINE VIEW FILES LOCATION */
app.set('views', __dirname + '/views');

/* KEEP STATIC FILES IN SOME CONSTANT (GROUPED) PLACE, EX.: /assets */
app.use('/assets/css', express.static(__dirname + '/public/css'));
app.use('/assets/images', express.static(__dirname + '/public/images'));

/* RENDER home VIEW FOR ROOT REEQUEST */    
app.all('/', (req, res) => res.render('home'));

app.listen(8081, function () {
  console.log('Magic is happening on port 8081!');
});

serving view files is job of express app that is done by simply calling res.render('view-name'); (without extension, cuz already defined in app.engine('html', ...);

P.S. If You need example: https://bitbucket.org/num8er/sum-az-website/src

edited Sep 6, 2017 at 12:37

answered Sep 6, 2017 at 12:32

num8er

19.5k4 gold badges50 silver badges61 bronze badges

2 Comments

henrikbossart Over a year ago

Results in "Cannot GET /home.html"

num8er Over a year ago

@henrikbossart if You want frontend part that requests backend part for data, make 2 apps: frontend-app, backend-api

Collectives™ on Stack Overflow

NodeJS not serving static html

6 Answers 6

Comments

Comments

4 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

4 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related