MEANcore-CMS - MEAN Stack CMS & Blogging Platform

David Oravsky82 VIEWS
Last Updated - May 3, 2019
Summary : MEANcore-CMS is an open source CMS (Content Management System) and blogging platform developed using the MEAN Stack (MongoDB, Express.JS, Angular, and Node.JS). This post will cover how to set up this CMS on a DigitalOcean droplet, but the steps are relatively the same for any host.

Introduction

MEANcore-CMS is an open source CMS (Content Management System) and blogging platform developed using the MEAN Stack (MongoDB, Express, Angular and Node). 

I originally developed MEANcore-CMS to power this blog and decided to make open source for other web developers that are looking for a lightweight MEAN Stack CMS or blog application that's easy to extend and customize.

The software is production ready, this blog is powered by MEANcore-CMS and deployed at DigitalOcean on CentOS using the the $5 plan without any issues.

The project is available on GitHub at https://github.com/mrdav30/MEANcore-CMS.

Installing MEANcore-CMS on your Local Machine

  1. Install MEAN Stack dependencies Angular-CLINodeJS and MongoDB.
    • For a guide on how to do this on Windows see Setup the MEAN Stack on Windows.
    • NOTE: This guide instructs you to clone the MEANcore repository, which is what MEANcore-CMS is based on.  All the steps are the same, but you can clone the MEANcore-CMS repository instead and skip to step 8.
  2. Ensure that MongoDB is started and running, to start it run "mongod.exe" from the command line.
    • It's located in the folder "C:\Program Files\MongoDB\Server\[MONGODB VERSION]\bin".  For MongoDB version 4.0 the command is "C:\Program Files\MongoDB\Server\4.0\bin\mongod".
  3. Use git to clone the project source code from https://github.com/mrdav30/MEANcore-CMS.
  4. Open a command line window and navigate to the root of the meancore-cms project folder.
    • For example, if you cloned the MEANcore-CMS project to "C:\Projects" run the command "cd C:\Projects\meancore-cms".
  5. Run the command "npm install" to install all npm packages required by the project.
  6. Review the readme.md file provided with the project to create a .env file in the project's root folder.
  7. Run the command "npm run start:dev" to start MEANcore-CMS.
  8. Open your browser and go to http://localhost:4200/admin, you'll be automatically redirected to the "/sign-up-admin" page if it's the first time accessing the site.
  9. Enter your desired admin username and password to create the admin user, you'll then be logged in and redirected to the admin page "/admin".
    • Here you can enter blog posts, pages, 301 redirects, or modify your account for your blog.
  10. You can now access the blog front end at http://localhost:4200/, the default front end is a slightly modified version of this blog.

Deploying MEANcore-CMS to Production with DigitalOcean

  1. Register an account at DigitalOcean (this is a referral link that will give you a free $100 credit when you sign up)
  2. Either login (if you already have an account with DigitalOcean) or sign up
  3. On the Create Droplets page select the following options:
    • Choose an image: Select Distributions and CentOS 7.5 (version number may differ)
    • Choose a size: Select a plan based on the amount of traffic you're expecting, I'm currently using the $5/mo plan and haven't had any issues serving
    • Choose a datacenter region: Select the region that is closest to your users
    • Choose a hostname: Enter the name of your website or blog
    • Click Create
  4. Select your new droplet from the Droplets page and wait for your droplet to be ready, this will be indicated by a green dot on the droplet icon
  5. When your droplet is ready click the Console link near the top right corner of the page
  6. Login to the console window with the username and password in an email you should have received from Digital Ocean, you will be required to change the password on first login.
  7. Now you’re ready to follow this guide on How to Install the Mean Stack on CentOS.
    • NOTE: This guide instructs you to clone the MEANcore repository, which is what MEANcore-CMS is based on.  All the steps are the same, but make sure you clone the MEANcore-CMS repository instead.
  8. Once you have the initial setup complete, go back to the droplet details page and copy your server's ipv4 address located near the top left of the page (below the droplet icon).
  9. Open a new tab and browse to the server's IP address, you'll be automatically redirected to the "/home" page.
  10. The admin menu is hidden by default, so change the url to “/admin” and if it's the first time accessing the site you’ll be redirected to “/sign-up-admin”.
  11. Enter your desired admin username and password to create the admin user, you'll then be redirected to the admin page "/admin".
    • Here you can enter blog posts, pages, 301 redirects, or modify your account for your blog.
  12. You can now access the blog front end by browsing to the server's IP address again (without "/admin"), the default front end is a slightly modified version of this blog.

Customizing and Developing your MEANcore-CMS

MEANcore-CMS is designed to be lightweight and easily customizable for web developers.  It's organized into two top level folders to separate server side and client-side code.  To customize, remove or replace any features in the system simply edit the code in your preferred code editor.

The blog front end code is in the "\client\blog" folder and the CMS front end code is located inside the "\client\admin" folder. The server-side code includes controllers, routes, services and helpers.  The routes are used to define API routes, controllers handle business logic, models are used to handle all database interaction, and services and helpers are for other bits and pieces.

IMPORTANT: When updating any client (Angular) code, make sure to run “npm run build:dev” or “npm run build:prod”.  This is used for packaging and minifying all front end JavaScript and less/css files, so ensure that you run these commands when you are updating the front-end code by running them from the "\meancore-cms\" project folder.
Project Structure

The MEANcore-CMS project is made up of 4 main pieces / sub applications:

Admin System / CMS

The CMS is a secure application used for managing the content displayed on the front-end website.  It's written in Angular and styled with Bootstrap 4 and a little Material Design, the coding conventions mostly follow the best practice recommendations from the Angular style guide.

The default CMS contains sections for managing blog posts, pages, 301 redirects, subscribers, and your account, but these could be easily changed by a developer to any content types required by the front-end website.

Public Website / Blog

The front-end website or blog that's visible to the public, the default front end is pretty much the same as this blog but can be replaced by any website that a developer wants to build.

The default front end is written in Angular to get the responsiveness of a SPA (Single Page Application).  The server-side can determine if a SEO bot makes a request and will send a traditional server side rendered page as a response.

Sign-Up Admin Page

A standalone page that runs once the first time the application is accessed, it's used for creating an admin login for accessing the CMS.

Sign-In Page

A standalone login page for accessing the CMS. It separates the Angular CMS from the public facing site, so the CMS front end files can be kept secure and only accessible to authenticated users.

Conclusion

I learned a lot developing this platform and am continuously looking to evolve it as I learn better ways to handle specific tasks or issues.  Feel free to contribute to the open-source MEANcore-CMS project hosted on github, and good luck with your own project!

If you any questions or thoughts on the tutorial, feel free to reach out in the comments below.

Additional Reading: