Node.js 101 - Create my first Template

I strongly recommend learning javascript first. Here a series of post I did on Dev.to: https://dev.to/rickavmaniac/javascript-my-learning-journey-part-1-what-is-javascript-role-and-use-case-49a3

I am now ready to continue my Node.js learning journey :)

Click follow if you want to miss nothing. I will publish here on Dev.to what I learn everyday.

Without further ado here is a summary of my notes for my last day.

First template

A template enables you to use static html files in your application. At runtime, the template engine replaces variables in a template file with actual values, and transforms the template into an HTML file sent to the client. This approach makes it easier to design an HTML page.

Like I mention yesterday, in Node.js we can use a framework like Espress.js to help automate many things including Template. But it is important to understand how thing work in the background. So here is a small example to help you with that.

Let create a small static html page

<h1>Hello Mike<h2>
<p>Your age are 42<p>

This static page will always display the same information, if we want to display another person information we will have to create another page. If we have a list of 20 people that will create 20 html files. Of course we would never do that.

The solution here is to create a template engine that will replace key word with actual data.

<h1>Hello {%name%}<h2>
<p>Your age are {%age%}<p>

In this template we create 2 placeholder that will be inject in the page at runtime.

The code could look like this:

const friends = [
    {id: 1, name: 'Mike Taylor', age: 42},
    {id: 2, name: 'John Lamkin', age: 44},
]

let page = `<h1>Hello {%name%}<h2>
<p>Your age are {%age%}<p>`

page = page.replace('{%name%}', friends[0].name)
page = page.replace('{%age%}', friends[0].age)

console.log(page) 
// <h1>Hello Mike Taylor<h2>
// <p>Your age are 42<p>

This fill template can now be send to the client

// the http module have method to help create the server
const http = require('http')
const server = http.createServer((req, res) => {
    res.writeHead(200, {
         'Content-type': 'text/html'
     })
    res.end(page)
})

// start server listening for request
server.listen(5000, 'localhost', () => {
    console.log('Server is listening at localhost on port 5000')
})

This is a very rough crash course on template. Like mention earlier you would never really code that. It's just for learning purpose.

What we learn so far?

If we sum everything we learn in the last couples lessons, we now start to gaps how a web server work.

• It's start from a request
• That request is match to a route
• The route url is parse to extract informations (path, id, etc)
• If the request is for a API the server will create a JSON response
• If the request is for html page. The server will dynamically fill the template
• Finally, the response code and response content is sent to the client

And don't forget that, there is a framework call Espress.js that drastically simplified all those task. Actually there are many framework that can do that but Express is by far the most popular.

Conclusion

That's it for today. Tomorrow is the last lessons of the series and we will look at how to install and use third party packages.

Follow me on Twitter: Follow @justericchapman