Build Content Management System with React and Node: Beginning Project Setup

Starting a new project typically involves creating a fresh application and installing all the essential dependencies. In this guide, we'll walk through the process step by step, leveraging the official React and Node documentation to ensure we have everything we need to kickstart our project effectively.

First of all, you need to be sure that Node and npm are installed on your computer. If not you can use official Node js documentation for that.

Next, we will create a new folder "blogging_platform" for example, where we will start our project. Then open the VS Code editor or any other editor you like to use, and open this folder.

1. Front-end Setup with React and Redux

To start a new project we will use "Vite", a modern and the simplest way to install all necessary packages without spending time configuring additional tools. For that create a new folder "admin" (for the front-end part) and just type: "npx create vite@latest", then you will need to set a project name or set ".", then a new project will be installed directly in your current folder with the name the same as the folder. Our package.json file is set with all necessary dependencies, we also need to use the "npm i" command to install those dependencies.

Great, we have a ready-to-use project, but before starting, we will install a few more, very important for our project dependencies.

• Redux - is a predictable state container for JavaScript applications, commonly used with React for managing application state. It centralizes the state of an application, making it easier to manage and debug while facilitating predictable behavior through a unidirectional data flow.

To install redux we simply need to use the commands: "npm install @reduxjs/toolkit" and "npm install react-redux".

• React Router - is a popular routing library for React applications, enabling navigation and URL handling in a declarative way. It allows developers to define routes and render different components based on the current URL, facilitating the creation of single-page applications with multiple views.

To start using react router, please, use command: "npm install react-router-dom".

• SASS - Sass, or Syntactically Awesome Stylesheets, is a CSS preprocessor that extends the functionality of CSS with features like variables, nesting, and mixins. Integrating Sass with React allows for more maintainable and modular styling by enabling the use of these advanced CSS features within React components.

To install SASS use the command: "npm install sass".

• Material UI - is a popular React UI framework that provides a set of customizable and accessible components following Google's Material Design guidelines. It offers a wide range of components, including buttons, forms, navigation, and layout elements, allowing developers to build aesthetically pleasing and responsive user interfaces efficiently. Material-UI also provides theming support, enabling easy customization of the design system to match specific project requirements.

MUI will help us to simplify and make faster our development process. To start using it we need to install a few important dependencies: "npm install @mui/material @emotion/react @emotion/styled".

That's it we installed all necessary dependencies and are ready to start.

I'm offering you to remove all files from the src folder, because we will not need them, except App.js and index.js. Add a simple div into the App.js file, run our app, and check if all works correctly.

function App() {
  return (
    <div>
      <h1>BlogCraft</h1>
    </div>
  );
}
export default App;

Use command: "npm run start", to run your app and check the result.

By the way, it would be great if you would give a name to your project, as for me I decided to name it: "BlogCraft".

2. Setting Up the Node.js and Express Server

We will create a new "server" folder in the root, this folder will contain only the back-end part of our CMS. Next, we can use the "npm init -y" command, and wait until the node package manager creates the default package.json file, then we will use the "npm i express" command to install express and all initial dependencies for our back-end part.

We will need some help with the development process, that is why we will use nodemon. Nodemon is a utility tool that automatically monitors changes in your Node.js application's source code and restarts the server whenever it detects any modifications. This tool helps streamline the development process by eliminating the need to manually stop and restart the Node.js server every time you make changes to the code, making it easier to see the effects of your changes immediately. We will use "npm install --save-dev nodemon" to install nodemon to the development section of our project. Also, we need to add a new setting to the scripts part of the package.json file that will start nodemon.

"watch": "nodemon src/server.js",

Inside the server folder create a new "src" folder that will store all our app files, then create a server.js file where we will use the "http" module to create a new server with an express app.

const http = require('http');

const app = require('./app');

const PORT = 8443;

const server = http.createServer(app);

server.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
})

Then, create an app.js file for the express framework. App.js file while storing our routes, middlewares, and other express configs. For now, we will add the first route that will return "Hello World" just to check if the server works fine.

const express = require('express');
const app = express();

app.use(express.json());
app.get('/', (req, res) => {
    res.send('Hello, World!');
});

module.exports = app;

Now, we can use nodemon to start our dev server ("npm run watch" command) and use localhost and the set previously port 8443 in your browser. You should see the famous "Hello World" message.

We will need to install MongoDb Community Edition and Mongoose, I will use this instruction from official MongoDb documentation. I will not write about mongoDB installation because it already has step-by-step instructions, but if you have some issues with it, please feel free to write me, and let's solve it together.

In conclusion, we have successfully set up the foundation for our full-stack blogging CMS project. We have installed and configured the necessary dependencies for the front-end, including React, Redux, React Router, Sass, and Material UI. On the back-end, we have set up a Node.js server using Express.js, installed Nodemon for streamlined development, and configured our initial routes. With this solid foundation in place, we are now ready to dive deeper into building our blogging platform's features and functionality. Stay tuned for the next article, where we'll start exploring the intricacies of creating a user-friendly and feature-rich blogging experience.

If you need a source code for this tutorial you can get it here.

Found this post useful? ☕ A coffee-sized contribution goes a long way in keeping me inspired! Thank you)

Next step: "Building a React CMS: Fonts, SCSS Resets, and Layout Implementation"