From node to website

This post is for people who want to learn to create a website with node.js

During the process some steps are there to let you understand what the code does, this doesn't mean you should use the code as a part of a real website.

Setting up the project

After installing node on your computer, you open the command prompt or terminal and create a directory which will contain your files.

When you are in the directory you run npm init. This command will ask you some questions and generate a package.json file.

Starting to create the site

On the front page of the site you see how to create a webserver which shows Hello world when you go to the url in your browser

I named the file app.js so to run the website with npm start you need to change "start": "node index" to "start": "node app" in the package.json file.

The first webpage

The code above displays plain text but most of you know browsers display html nicer than plain text. So lets change the code to make this possible.

The changes I made:

1. I moved the output of the site to its own function. This keeps the webserver code clean.
2. I put the html code in a separate file. This allows you to change the html without changing the code.
3. I used the fs module to read the file with the html in.
4. Thanks to the callback parameters of the readFile method I can show a page not found error if the file isn't found.
5. And to end it I display the html code that was read from the file.

If the website is running you need to stop it with the key combination ctrl+c, and start it again. Now you see that hello world is bigger and bolder.

More pages

A website has more than one page. It is possible to create multiple pages in the browser using frameworks, but we are going to keep using node to do this.

The changes I made

1. I added page2.html
2. I added a link to page2 in index.html and a link to home in page2.html
3. I added a new parameter to the render function to make it possible to read different files.
4. I checked if the browser send a GET request. At the moment we don't care about POST, PUT, DELETE or PATCH requests
5. Then I checked which url the browser wants

After restarting the webserver again you will see the link to the second page. And clicking on it will display the second page.

Cleanup the webserver code

Because checking the routes is a responsibility of the app it's best to move the code out the webserver code.

1. Created a Router object with the public methods get, nopage and handle. And one private method find.
2. Added an instance of the Router object with the name router.
3. Added the pages with get method, and the 404 page with the nopage method.
4. Used router.handle instead of a anonymus function to let the app decide which content should be visible.

5. Changed the render function to set the status code of the page if there is an error. This is important for SEO and other automated page visits.
6. Added the 404.html file to display a nice page.

Making it real

We can build websites with this code but it isn't very powerful, for instance you have to add all the routes instead of using variables for groups of similar routes.

The most used framework is express

run npm install express --save, mac os users will need to add sudo in front of the command. This will add the express package to the project in the node_modules directory.

Express takes care of the routing for us, and allows us to add a template engine. At the moment we use static html files but when the data comes from somewhere else the html code is going to contain variables and logic.

As you can see express also has a get method to set GET request routes. To display a html 404 error you need to define it with the use method below all other routes.

Express needs to know the root template engine files directory, what method the template engine uses to render the template and declare the default template engine. You can use multiple template engines but this is not a good idea if you want performance and consistency.

Express also has a listen method so you don't need to create the webserver yourself.

Conclusion

I hope this gives you a clue how we went from a webserver that only displayed hello world to a website with multiple pages and html output.