Building a CMS in React (0.0.1) – React Project Setup

At my present employer, I built a CMS in ReactJS. Why? Well, it’s a long story that I’ll get into in a separate post but here’s the TL; DR; The product managers and content creators had been using WordPress for some time and had gotten comfortable with the WYSIWYG experience. At some point, the startup decided they needed an in-house dev team. That team saw the beast that the WordPress site had grown to become over the years. It had become unwieldy and we needed to replace it with React. Not so fast! The PMs still want WYSIWYG control! This is what lead me to build a completely custom CMS solution.

I’m going to walk you through how I built the CMS for my company so that if you’re up to the challenge you can build one too! I do want to mention that the one I built for my company had certain performance requirements so we won’t be using the exact tech stack. It’s far too complex to cover in a few blog posts. In this tutorial series, we will use ReactJS, NodeJS, and Firebase to keep it simple. After all, a CMS is complex enough!

My hope is that you might set this up for yourself and it will help you streamline website development and safily give your clients content control.

So what are we waiting for?! Let’s get started! Just aheads up. We are going to work in vertical Slices. Each post will be a single feature from front to back. This will help us move more quickly to add features in the future.

React Project Setup

We are going to use Create React App as our script to get going. If this tutorial falls out of date please defer to the setup guide here.

Open your terminal and run the following commands.

yarn create react-app react-studio-cms
cd react-studio-cms 
yarn start

You should be able to see your application running on http://localhost:3000/

Adding Redux

Go ahead and run the following command to add dependancies

yarn add redux react-redux react-router-dom connected-react-router redux-thunk  history

Now let’s add some files to get Redux wired up to our application state. Go ahead and add a folder inside the src folder called store. Create this index.js file inside the folder.

Reducers

Make another folder in the src folder called reducers. Inside this folder make another index.js file.

Let’s make our first Reducer! In the reducers, folder make a file called viewReducer.js.

This is a neat little reducer that saves you a lot of time writing media queries. It gives you a global breakpoint state of mobile vs desktop. Feel free to add other breakpoints to this if you want to support medium tablet width. In a future post, I’ll show you how to use a library called classnames by Jed Watson to set styles conditionally based on this state.

Now that we have our first Reducer it needs actions and action creators. Create a folder in your src folder called actions. Add a file inside this folder called viewActions.js.

Now that we have a single reducer in place we need to wire it up to the root of our application. Update your App.js file to look like this.

Create React App comes with several pre-baked styles that I don’s think are terribly helpful. Let’s clean it App.css.

CSS Helpers

I have a few helper CSS files that we’ll use. But for brevity, I won’t embed all of it here. Just download these 2 files and place them right inside your src file.

flex.css
global.css

These css class files are imported at the root of our application. They help us quickly add frequently used styles without having to frequently add CSS files to every component. At my company, we add more style guide things like c-brand for brand colors or ff-primary for the primary font family. Feel free to add your own. It makes it really easy to change styles across your app in the future.

Now let’s add our first component which will be our Homepage. Create a Components folder in the src directory, add a Home folder inside that, and lastly a Home.js file inside the Home folder.

End Result

By now you should be able to run the application with yarn start and see the following.

Up to this point I have not spent too much time explaining how each of these files work together because it basically all boiler plate. Since we have a lot to cover I want to get us building the CMS functionality as soon as possible.

If you’ve gotten to this step and your code doesn’t run review the files above and also feel free to leave me a comment with questions. If you’d just like to get going here’s the branch you can pull with the code completed up to this step.

https://github.com/CodeCareerCoach/ReactStudioCMS/tree/feature/01-Boiler-Plate

This concludes this vertical slice! In the next tutorial, we will be adding Node.js!
Let’s Go!