#100DaysOfCode Day 23: Node.Js Blog (Part 1)

Hello, world!

Today, I decided to try and tackle the challenge of making a Blog from Node.js. Fortunately, I found a tutorial that does not require any specific version of the dependencies and has a great explanation.

This tutorial can be found on Vegibit’s website. I highly recommend this tutorial for anyone who is currently learning web development.

This blog project will be powered by Node.js on the back-end side, Bootstrap on the front-end side, and MongoDB as the database to store the entries of the blog. I will also be using several Node packages such as Express, Nodemon, Mongoose, and Express-edge.

Setting Up The Project

Like any project, you will have to set up the project’s directory beforehand. I created a new directory by opening Window’s Command Prompt and inputting mkdir nodejs-blog-tutorial in a folder named “Project”. Afterward, open the project’s directory and initialize node using npm init, which will then create a package.json file with the appropriate information about your project.

Installing a Bootstrap Theme and Other Dependencies

This part is quite interesting, as I have never used Bootstrap in my programming career.

In this blog, I will be installing a Bootstrap theme using the npm install startbootstrap-clean-blog. As you can figure out, the name of the theme is startbootstrap-clean-blog, which will give a blog-like theme for this web app.

After installing Bootstrap, you can install the other dependencies that are going to be used by the web application. At this stage, I will only download Express and Nodemon.

Adding Entry Points

Next, I will add the entry point to the Node.js blog project, which is index.js (it should match the “main” file in package.json). To do so, create index.js in your project’s root directory. Since I am editing with Vim, I will type vim index.js, and then write the following code:

As you can see, we will be using files from public's directory to serve static assets. Because of this, we will have to make a new directory named public in the project’s root.

Building a Home Page

To get started with building a home page, create a pages directory to store static files in. We can start by creating index.html inside pages. The HTML file will have the following code:

<h1>Blog Home Page</h1>

Which will be displayed by updating index.js into the following:

The addition to index.js is in line number 1 and line number 7–9. Doing so will make localhost:3000/ accessible and display “Blog Home Page” as an H1 heading.

To make the blog look better, we can utilize the theme downloaded from Bootstrap by copying the contents of startbootstrap-clean-blog over to a new directory named theme. To do this through the command-line, we will use Window’s xcopy command. The command itself has the following syntax:

xcopy [source][destination]/s

First, we start with the command xcopy, followed by the path of the directory we want to copy and the destination of where to paste. We then use /s so that we are able to copy both files and directories (as writing the command without /s will only copy files).

Thus, the command that I ran to copy the contents of startbootstrap-clean-blog over new theme is the following:

xcopy .\node_modules\startbootstrap-clean-blog .\theme /s

Now, although I already have a folder with all the themes, I will need to copy specific folders over to public, as I have set the public directory as the directory where assets will be served. Specifically, we will need to copy vendor, css, img, and js directories over. We will also copy index.html over to pages in order to replace the HTML code that was once the H1 heading.

Since using xcopy is a new command, I will write them down for further practice:

xcopy .\theme\vendor .\public\vendor /s
xcopy .\theme\css .\public\css /s
xcopy .\theme\img .\public\img /s
xcopy .\theme\js .\public\js /s
xcopy .\theme\index.html .\pages\index.html /s

Afterward, we can run node index.js and open our localhost. There you can see the home page load.

Adding About, Contact, and Post Pages

Since the whole theme is created by Bootstrap, we can find the HTML files of individual pages in the theme directory. So, we can copy about.html to our pages directory using the following command: xcopy .\theme\about.html .\pages\about.html. Afterward, we can add a route handler to serve a GET request to /about.

Update your index.js to the following:

Since we are going to update most of our source code over and over again, we can use nodemon so that the server will restart any time we change our files. This will save time, as you won’t have to run node index.js after every change to your code. To run nodemon, run npx nodemon index.js.

We can then do the same for contact and post pages by copying their HTML files from theme to pages. Run the following command:

xcopy ./theme/contact.html ./pages/contact.html
xcopy ./theme/post.html ./pages/post.html

Don’t forget to also update your index.js file:

Edge Template Engine with Express

We can use Edge Template Engine alongside Express to create a more dynamic feel to our website. To do so, install express-edge through Node Package Manager. After installing express-edge, update index.js to the following:

Note: In line 7 of the code, you can see that I am using app.use(expressEdge.egine) instead app.use(expressEdge). This is because in the newest version of express-edge, edge engine is not exported as the latter. Instead, the package exports as an object, thus the dot-notation form.

Now, create a new directory named views. This will hold our .edge files, which will be used as a templating engine. To read more about edge templating within Node.js, you can read this documentation or refer to NPM’s official website.

Inside views, create a new file named index.edge. Before editing this file, update index.js to the following:

As you can see, we replaced the default GET with a new method that will render an edge template named index from the views folder in stead of the original static file.

Layout with Edge

Like other templating engines, we can create a layout file, which will be the foundation for other files. To create a layout file, create a layouts directory. This will hold a file name app.edge with the following code:

In app.edge, we can add the common markup that all pages will share. Furthermore, in the middle of the page, we can dynamically change it based on each of the page’s content. This works through @!section('content').

With the layout ready, we can simplify any other files that extend the layout.app file. For example, using index.edge which we have already defined in the previous subchapter, we can write the following code:

From the code above, we only need to input the @section part of the content without having to worry about the overall layout of the website.

Conclusion

This marks the end for today’s #100DaysOfCode! Tomorrow, I will add Dynamic Data with MongoDB. So far, here is what I have learned today:

• Bootstrap is good for themes. Might check up on their other themes later on.
• How to use xcopy
• Template engines
• Nodemon

There are still some parts that I need to read more about, especially back-end work such as entry points and routes.