MEANie - Lightweight MEAN Stack CMS & Blogging Platform

MEANie is an open source website CMS (Content Management System) and blogging platform developed using the MEAN Stack (MongoDB, Express, AngularJS and Node). 

I originally developed MEANie 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 customise.

The software is production ready, this blog is powered by MEANie and deployed at DigitalOcean on Ubuntu using the one-click install MEAN server, at the moment it's serving over 200,000 page views per month on the $5 plan without any issues.

The project is available on GitHub at https://github.com/cornflourblue/meanie.

Demo of the MEAN Stack CMS and Blog

I've put a backend-less version of the MEAN Stack CMS on StackBlitz to quickly give an idea of how it looks and works. The styling is pretty much all done with bootstrap and I've kept the markup minimal to make it easy for developers to customise and extend.

NOTE: The embedded version of the demo can be a bit temperamental so if it's showing an error you can access it directly at https://stackblitz.com/edit/meanie-cms.

(See on StackBlitz at https://stackblitz.com/edit/meanie-cms)

Installing and Running MEANie on your Local Machine

1. Install MEAN Stack dependencies NodeJS and MongoDB, for a guide on how to do this on Windows see Setup the MEAN Stack on Windows
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 example for MongoDB version 3.2 the command is C:\Program Files\MongoDB\Server\3.2\bin\mongod
3. Download the project source code from https://github.com/cornflourblue/meanie
4. Open a command line window and navigate to the "\meanie\server" folder, for example if you downloaded the MEANie project to "C:\Projects" run the command cd C:\Projects\meanie\server
5. Run the command npm install to install all npm packages required by the project
6. Run the command node server.js to start MEANie
7. Open your browser and go to http://localhost:3000/, you'll be automatically redirected to the "/install" page if it's the first time accessing the site
8. Enter your desired admin username and password to create the admin user, you'll then be redirected to the admin login page "/admin"
9. Login to access the blog CMS, here you can enter blog posts, pages and 301 redirects for your blog
10. You can now access the blog front end at http://localhost:3000/, the default front end is a slightly modified version of this blog

Deploying MEANie to Production with DigitalOcean

1. Register an account at DigitalOcean (this is a referral link that will give you a free $50 credit when you sign up)
2. Go to the one-click install MEAN server page at https://www.digitalocean.com/products/one-click-apps/mean/
3. Click Create your MEAN Server
4. Either login (if you already have an account with DigitalOcean) or sign up
5. On the Create Droplets page select the following options:
   • Choose an image: Select One-click apps and MEAN on 14.04 (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 over 100,000 page views per month
   • 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
6. 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
7. When your droplet is ready click the Console link near the top right corner of the page
8. 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
9. Run the following commands to remove the sample MEAN project then deploy and start MEANie
   PM2 is used to manage the NodeJS process in production, for more info on PM2 you can go to http://pm2.keymetrics.io/
   • rm -r /opt/mean
   • cd /opt/
   • git clone https://github.com/cornflourblue/meanie.git
   • cd meanie/server
   • npm install
   • npm install pm2 -g
   • export NODE_ENV=production
   • pm2 start server.js
10. Go back to the drop details page and copy your server's ipv4 address located near the top left of the page (below the droplet icon)
11. Open a new tab and browse to the server's IP address, you'll be automatically redirected to the "/install" page if it's the first time accessing the site
12. Enter your desired admin username and password to create the admin user, you'll then be redirected to the admin login page "/admin"
13. Login to access the blog CMS, here you can enter blog posts, pages and 301 redirects for your blog
14. 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

Customising and Developing your MEANie Blog & CMS

MEANie is designed to be lightweight and easily customisable for web developers, it's organised into two top level folders to separate server side and client side code. To customise, remove or replace any features in the system simply edit the code in your preferred code editor.

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

IMPORTANT: Start Gulp when updating any client (AngularJS) code. Gulp is used for packaging and minifying all front end javascript and less/css files, so ensure that you have gulp running when you are updating the front end code by running the gulp command from the "\meanie\server" folder.

Project Structure

The MEANie 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 AngularJS and styled with Bootstrap, the coding conventions mostly follow the best practice recommendations from the Angular 1 style guide.

The default CMS contains sections for managing blog posts, pages and 301 redirects, 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 a combination of AngularJS and server side rendered EJS (Embedded JavaScript) templates. It was built this way to get the responsiveness of a SPA (Single Page Application) with AngularJS plus the SEO benefits of a traditional server side rendered application.

Install 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.

Login Page

A standalone login page for accessing the CMS. It's separate from the AngularJS CMS so the CMS front end files can be kept secure and only accessible to authenticated users.