Basic webserver with node.js and express for serving html file and assets

Question

I\'m making some frontend experiments and I\'d like to have a very basic webserver to quickly start a project and serve the files (one index.html file + some css/js/img files).

Answer 1

Thank you to original posters, but their answers are a bit outdated now. It's very, very simple to do. A basic setup looks like this:

const express = require("express");
const app = express();
const dir = `${__dirname}/public/`;

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

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

// Serve a 404 page on all other accessed routes, or redirect to specific page
app.get("*", (req, res) => {
  //   res.sendFile(dir + "404.html");
  //   res.redirect("/");
});

app.listen(3000);

The above example is if you want to serve individual HTML files. If you were serving a single page JS app, this would work.

const express = require("express");
const app = express();
const dir = `${__dirname}/public/`;

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

app.listen(3000);

If you need to serve other static assets from within a folder, you can add something like this before you start defining the routes:

app.use(express.static('public'))

Let's say you have a js folder inside public like: public/js. You could include any of those files inside of your html files using relative paths. For example, let's say /contact needs a contact.js file. In your contact.html file, you can include the script as easy as:

<script src="./js/contact.js"></script>

Building off of that example, you can do the same with css, images etc.

<img src="./images/rofl-waffle.png" />
<link rel="stylesheet" href="./css/o-rly-owl.css" />

Hope this helps everyone from the future out.

Answer 2

Following code worked for me.

var express = require('express'),
  app = express(),
  http = require('http'),
  httpServer = http.Server(app);

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

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

this loads page with assets

Answer 3

I came across this because I have a similar situation. I don't need or like templates. Anything you put in the public/ directory under express gets served as static content (Just like Apache). So I placed my index.html there and used sendfile to handle requests with no file (eg: GET http://mysite/):

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

Answer 4

You could use a solution like this in node.js (link no longer works), as I've blogged about before.

The summarise, install connect with npm install connect.

Then paste this code into a file called server.js in the same folder as your HTML/CSS/JS files.

var util = require('util'),
    connect = require('connect'),
    port = 1337;

connect.createServer(connect.static(__dirname)).listen(port);
util.puts('Listening on ' + port + '...');
util.puts('Press Ctrl + C to stop.');

Now navigate to that folder in your terminal and run node server.js, this will give you a temporary web server at http://localhost:1337