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.
The project assumes you understand JavaScript, NodeJS, Express, MongoDB, EJS, and Bootstrap 5. However, that should not prevent you from following this tutorial because I will briefly explain the fundamental concepts before diving into Implementing NodeJS CMS step-by-step.
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.
1. JavaScript and Bootstrap 5
JavaScript is the language we use to build the frontend and backend of the application. Frontend entails code that runs in the browser. HTML builds the web page structure, and CSS styles it.
You can write a stylesheet from scratch or implement a dynamic, responsive, scalable framework like Bootstrap 5. JavaScript works closely with CSS and its frameworks to make the frontend interactive. For example, the carousel we will implement in this CMS relies on JavaScript.
An application built entirely on the browser with HTML, CSS, and frontend JavaScript is often a static website. We introduce dynamism with NodeJS and Express.
2. NodeJS
NodeJS is an environment to run JavaScript code outside the browser. It is a lucrative choice for building extremely fast applications because of its asynchronous non-blocking I/O.
The sweet spot of NodeJS is noticeable when building web servers with unopinionated JavaScript backend frameworks like Express.
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.
1. Config
The config file containers database and Passport.js settings.
2. Middleware
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.
3. Public
The public folder contains the static frontend assets: custom CSS and JavaScript.
4. Models
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.
5. Views
The views mimic the application's frontend: the pages the user sees on a website. We could implement views with public .html files or a frontend JavaScript framework like React.js. However, we keep everything server-side with a templating engine (EJS) for simplicity.
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.
6. Controllers
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.
7. .env
The .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.
Rename the .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
8. app.js
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 package.json file.
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 package.json file.
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.
Conclusion
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.
