This post is part of a Node.js series and is a continuation of my last post, Writing a Simple Server with Node.js and Express.

Now that we know how to start a web server with Node and Express, let’s actually serve some content. We are going to use the get() method from Express to run a given callback function when a user visits a given route (Check out the Express docs for more info on app.get).

The first route we want to handle is the root route, or “/”. In the previous section we started an HTTP server listening on port 3000. This means that while running our server locally, our web application can be found at localhost:3000. The root route, or “/”, refers to the page or data that will be served when visiting localhost:3000/ which can also be referred to as the base url. When someone visits localhost:3000/ we want to show some content in the browser. Here is the code we need to do that:

app.get('/', function (req, res) {
  res.send('Hello World');
});

In this code we are using app.get() and passing in two parameters. The first is the route, ‘/’ and the second is a callback function that express will call when someone visits (AKA requests) the given route. When express calls our callback function it will pass a request object and a response object to the callback function, which we reference as req and res. We then use res.send, to send a response which displays in the browser. Once you’ve added this code, your index.js file should look like this:

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

app.get('/', function (req, res) {
  res.send('Hello World');
});

app.listen(3000, function(){
  console.log("Listening on port 3000!")
});

Screen-Shot-2017-11-21-at-17.02.53

Now let’s start our server and visit our route. Remember, run node index in the command line to start your server. Next, go to http://localhost:3000/ in your browser, and you should see the message “Hello World”.

Serving an HTML file

In this section we are finally going to use one of those folders we created at the beginning of this tutorial. We are going to serve an HTML file from our ‘public’ folder.

First lets add an HTML file to our ‘public’ folder. Any ol’ HTML file will do. I’m going to add a super basic HTML file called index.html that looks like this:

<html>
<head>
    <title>My First Node Project</title>
</head>
<body>
    <h1>Hello from my first Node.js project!</h1>
    <p>It's working!</p>
</body>
</html>

Next, we need to tell Express to use our public folder to serve static files. To do that we need to add this code to our index.js file:

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

Now, let’s update the code that handles our ‘/’ route so that it serves our new HTML file. Delete or comment out res.send('Hello World'); and in its place add res.sendfile('index.html');

Now, instead of using res.send to write plain text to the page, we are using res.sendfile to serve a static HTML file from our ‘public’ folder. When you are finished, your index.html file should look like this:

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

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

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

app.listen(3000, function(){
  console.log("Listening on port 3000!")
});

Screen-Shot-2017-11-21-at-17.31.44

If you restart your node server and refresh the page at http://localhost:3000/, you should see your HTML page rendered in the browser! Nice work!

See you in the next post where we'll serve up some dynamic content using the Pug templating engine!