1.2 - Setting up a basic Express project

  • Posted on: 25 July 2018
  • By: Ryoma Ohira
Tools: 
NodeJS
Express
Difficulty: 
Intermediate
Prerequisites: 
1.1 - Introduction to Node - Writing Your Own Routes

Express

As you saw in our previous tutorial, creating your own routes for your webserver can be a little convoluted and lengthy. Luckily, there is an npm package that simplifies this process for you. Meet Express

Firstly, set up a new project. Make sure you do the following:

  1. Create a new folder. We can call it workshop-1.2 if you like.
  2. Initialise your new node project by opening terminal in the folder and typing npm init
    1. Either leave the answers blank or fill in with your meta-data about your project if you like

Now we can install our Express package with the following terminal command: npm install express --save

This will get the node package manager to download and install your express module. The --save flag will save this into your package.json for you.

server.js

Lets create a new file called server.js and add the following lines of code:

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

This will add the express package to your server.js file. The we can then get our http package to use our express app. 

The next thing we want to do is create another folder inside workshop-1.2 named www. The directory structure should be workshop-1.2/www. We can then use this folder as a way of storing our html files and any files that are going to be accessed by our webpages (such as images etc). We can then add this as a directory that express server can use for public files by adding the following code to server.js:

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

HTML pages

In workshop-1.2/www, create two pages:

  • index.html
  • account.html

We will be using these pages for testing our routes later. The content isn't too important at the moment but we can fill it with simple HTML like the following:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Workshop 1.2</title>
</head>

<body>
  <h1>This is the index.html page</h1>
</body>
</html>

Make sure that the content is visibly different between index.html and account.html.

server.js

Going back to our server.js file, we can now set up the server to run by adding the following code:

var host = '127.0.0.1';
var port = 3000;

var server = http.listen(port, host,function(){
  console.log('Server is listening on ' + host + ':' + port);
});

127.0.0.1 is the localhost and we're going to be using port 3000 so that we don't interfere with ports that other programs may be using. Our http.listen() function includes the port, the host and an anonymous function which lets us print a message to our console just to give us a bit of feedback on which address and port the server is currently running on. 

To start the server, we can type "node server.js" in our command line and we should see: Server is listening on 127.0.0.1:3000

If you go to http://localhost:3000 you should be able to see your server running and displaying your index.html page. 

Routes

With your server set up, we can now have a look at making your routes work. Let's start with a basic route by adding the following lines of code to server.js:

app.get('/',function(request,response){
    response.sendFile(__dirname + "/www/index.html");
});

If the user accesses the server with an empty route, we can render the index.html file. To create the route for the account.html file, we can add the following code:

app.get('/account',function(request,response){
    response.sendFile(__dirname + "/www/account.html");
});

Now we should be able to access our two routes when you run the server. 

Images 

If you want to add images to your website, it is a good idea to create an images folder inside www. The directory structure should look like workshop-1.2/www/images. Any images that you want to display, you can add into this folder. Let's assume you are using an image called cat.jpg

You can then add this image into your html using your standard <img> tags. Using our account.html as an example, your code might look like:

<!doctype html>

<html lang="en">

<head>
    <meta charset="utf-8">

    <title>Account Page</title>
</head>

<body>
  <h1 class="display-3">Workshop 3</h1>
  <p>This is the account page. You are a cat.</p>
  <img src="images/cat.jpg">
</body>

</html>

Make sure that you have the static directory set up in your server.js file so that the images folder can be accessed by your web server.

Category Terms: 
Tutorial Weight: 
12

Comments

I was enjoyed a lot to receive the innovative topics to gather source on basic project. The express is needed marketing tool with their exitors issued interesting concepts. Then everyone will be lucky to introduce the following assignments.