#100DaysOfCode Day 24: Node.js Blog — Adding Dynamic Data with MongoDB (Part 2)

Richard Russell
Jun 14, 2020 · 5 min read

[Read Part 1 here].

Hello, world!

Another picture of Leonardo da Vinci (Source).

In the previous article, we left off with creating a dynamic page using Edge as a Node.js templating engine. Today, we will be going over how to connect the Node.js blog with MongoDB to store and retrieve blog posts from the database.

Installing Mongoose

Start by installing mongoose through Node’s Package Manager. Next, update your index.js file to include the mongoose as a dependency and connect it to the database. Your index.js file should look like the following:

Making Mongoose Models

Next, create a dedicated directory to store the Mongoose database models. For this project, I will be making a directory named database inside my project’s root directory. Now, create another directory within database, I will call this models. This subdirectory should include a file named Post.js, which contains the following code:

Making the Blog Post Page

Now, let’s create an .edge file to make a page where users can input their blog posts. To do this, create the file create.edge inside your views directory. The file should have the following code:

Now, we will have to create a route in index.js to present the form. However, I would like to add that I faced a problem in this part of the project. According to the tutorial that I am following, the route that should be written is as follows:

However, running the code above will not render the page. While it did show the bare-bones HTML elements, it did not render any CSS to it. Take a look at the screenshot below:

I tried searching for the problem, but I wasn’t able to find any solution. What I found interesting is that if I wrote the following code:

The page could also render the CSS parts:

Right now, I will leave the code like the former. Hopefully, I can find a solution to this really weird problem.

Setting up POST Request in Express

Now, we will need to make a POST request so that the user can actually send the data of the blog entry to the database. To do this, we will need to install body-parser from the Node’s Package Manager. Afterward, include body-parser to index.js so that it will look like the following:

In line 5, I included body-parser to the project, which we will call in lines 16–19. Afterward, we call a POST method (remember, make it app.post(), not app.get()) that will print the content of the blog entry to the console and redirect the user to the homepage. Since we are still logging the entry of the blog, it will not be saved to the database yet.

Storing the Blog Post to MongoDB

Now that we have created a page in which the user can write the blog entry, let’s create the code to save it inside the database. To do this, we will include the Post.js model we created earlier using the following code:

and then updating the app.post() method with the following:

Thus, your index.js file should look like the following:

You can view whether your database has successfully been posted using Compass.

Displaying Blog Post from the Database

After successfully POSTing the blog post to the database, let us create a page that will retrieve said blog post from the database. We can do this by using the dynamic data from MongoDB to display the post and modifying the '/' route to fetch data from Mongo:

Our index.edge file must then be changed to account for the dynamic change in data instead of using static markup. To do this, we can use @each directive, which allows us to loop over multiple blog posts stored in the database and display them.

This way, every time the website redirects the user back to '/', the user will immediately see the changes applied.

Displaying a Single Blog Post

Now, let us set up each blog post so that the user can view the whole content instead of just the title. To do this, add a new app.get() route in index.js to the following:

Your index.js should then look like the following (while also taking into consideration the edit in the previous section):

Now, we will have to make the title of the blogposts clickable. Change your index.edge file so that when the user clicks a blog post title, the user will see the whole post:

Note the anchor tag ( <a></a>) which links the unique post id to each of the blog posts. Next, create the individual page of the post by making a new file, post.edge. This will display the blog post dynamically:

Note the use of post.title and post.content, this is what creates the webpage into a dynamic one instead of static.

Conclusion

This marks the end of today’s #100DaysOfCode! Daily baby steps are better than year-long strides. Here are the things I learned today:

  • I’m beginning to understand how to write API methods.
  • There’s a bug that I still need to fix involving Express’ Edge Template.
  • Templating Engine with a layout is really helpful in making a uniformly well-designed web page.

Cold Brew Code

Brewing Code Everyday

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store