Table of Contents
Implementing NodeJS CMS with Express and MongoDB will enable you to debug popular CMSs, get a template to customize when building applications with NodeJS, and learn critical backend skills.
Let's get started.
Understanding the technologies used in Implementing NodeJS CMS
Here are the key technologies we will use in implementing NodeJS CMS with Express and MongoDB.
3. Express and MongoDB
Express is a pool of middleware. The (middleware) functions operate between browser requests and server responses, determining the extent of authorization and authentication. Authorization controls the resource you are permitted to access. On the other hand, authentication involves knowing the users of your application.
Express routes maintain authorization, whereas JSON Web Tokens and Passport.js identify your application's users. They cache the user data through express sessions and custom middleware. We can then control who views what and who does what.
For example, a logged-in user becomes an admin and can create posts, categories, and comments. When the session expires, the user cannot access the dashboard.
The application's data is often stored on a scalable, JSON-like database called MongoDB with the help of browser cookies and sessions.
Now that you have a rough idea of the technologies we are about to use, let's dive into implementing NodeJS CMS step-by-step.
Understanding the components of the CMS
Here is the project we are building. Get the code on GitHub, and clone the repo, in readiness to configure the environment variables. First, let me walk you through CMS logic before diving into the code structure.
We have divided the application into two main parts: pages and the admin dashboard. The primary pages are landing, about, user register, and log in. The landing page explains what the site does, highlighting the latest posts.
A new user registers through the register page and is redirected to the login page, where they get authenticated with Passport.js. A session starts, and the user has permission to access the dashboard.
The dashboard has links for the user to create and view (in tabular form) posts and categories. They can read a single post and drop a comment. The logged-in user also has permission to update and delete individual posts. Lastly, they can log out, clearing their details from the session.
Implementing NodeJS CMS with a scalable file structure
Let's start by cloning the repository, getting into the CMS directory then opening it with a code editor like Visual Studio Code.
The project has nine main folders and files.
The config file containers database and Passport.js settings.
The middleware folder houses the auth.js file for controlling who sees the dashboard, and custom functions,
globalVariables, visible through the application. For example, we want a logged-in user to be known by all pages irrespective of the controller.
The MVC is a conventional file structure for managing a complex application, for example, when implementing NodeJS CMS.
The M in MVC stands for models. Models entail a group of files whose sole purpose is to interact with the database. We have the User, Post, Category, and Comment models here. They store respective data in MongoDB with the help of mongoose.
The views mimic the application's frontend: the pages the user sees on a website. We could implement views with public
We further divide the views folder into
- users: register the user before logging them into and logging out of the session.
- Index: access the landing page and read a single post.
- Partials: shared views like headers, dashboard sidebar, and the footer.
- Dashboard: enables us to view routes linking to personal admin tables and CRUD operations on posts and categories.
Finally, let's understand the C (for controllers) in the MVC folder structure. It is one of the crucial components of the CMS because it creates a communication channel between models and views. We divide it into two parts for simplicity: routes and controllers.
Routes get the logic from functions in controllers and configure the logic with the app's entry file: app.js. We could write all the logic in the routes folder, but that would complicate the structure as the amount of code increases in each function.
.env file holds environment variables. Environment variables are dynamic and often sensitive files whose configuration changes depending on the host.
For instance, we configure the express server to listen on port 3000 locally. However, after deploying the application on Heroku, the platform determines the port. We also hold sensitive data like session secret or MongoDB URI there.
The cloned repository has a
.env.example file to guide you on what to include in the file. Let's configure the requirements right away.
.env.example file to
.env. You can use local or atlas MongoDB URI. And put anything in the secret part.
mongoURI = mongodb://127.0.0.1:27017/cms SECRET = session secret PORT = 3000
app.js is the entry file to the application. It tells the application how to interact with the internet. That happens through modules whose data lies in the node_modules and whose versions are tracked in the
Starting the server
Now that you understand the role of each folder and key files, let's install the packages before starting the server. Before that, ensure you have the latest version of Node.js.
Open your terminal and run the npm install command.
npm install #OR npm i
Next, start the server by running the dev command I have specified in the
If the server crashes, it means your configurations could be wrong. You can debug the issue starting with the MongoDB configuration. Otherwise, you should be able to open the application should open in the browser through localhost:3000 or your specified port.
Implementing NodeJS CMS with Express.js and MongoDB involves understanding the components and building technologies of the CMS. You should then create a scalable folder structure and code the application as guided in this tutorial.