Node.js 101 - Create my first Template
Tags: javascript, node, beginners, tutorial
Published: 2021-03-13 15:03:19

---
title: Node.js 101 - Create my first Template
published: true
description: 
tags: javascript, node, beginner, tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4anecy5mdl4pho8w7519.jpg
series: Node.js 101
---

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.

<h2>First template</h2>
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
```html
<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.
```html
<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:
```js
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
```js
// 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')
})
```

![First Template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u4h6x8ukp701xb5txnam.png)

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

<h2>What we learn so far?</h2>
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.

<h2>Conclusion</h2>
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: <a href="https://twitter.com/justericchapman?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @justericchapman</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>