October 29 2016

MEANie - Lightweight MEAN Stack Blogging Platform & CMS

MEANie is a MEAN Stack blogging platform and CMS I originally developed to run this blog and decided to make open source for any other developers that are looking for a lightweight MEAN Stack 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 time of this writing it's serving over 100,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

Take MEANie for a test drive with a live demo of the MEAN Stack CMS and Blog available on runnable at http://code.runnable.com/WD_87icUROIHmDyh/meanie-lightweight-mean-stack-blogging-platform-cms-for-node-js.

Runnable allows you to edit and run the MEAN Stack application code all within your browser, so you can learn how it all works without needing to install anything on your local machine.


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. Go to the one-click install MEAN server page at https://www.digitalocean.com/products/one-click-apps/mean/
  2. Click Create your MEAN Server
  3. Either login (if you already have an account with DigitalOcean) or sign up
  4. 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
  5. 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
  6. When your droplet is ready click the Console link near the top right corner of the page
  7. 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
  8. 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
  9. 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)
  10. 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
  11. Enter your desired admin username and password to create the admin user, you'll then be redirected to the admin login page "/admin"
  12. Login to access the blog CMS, here you can enter blog posts, pages and 301 redirects for your blog
  13. 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. The blog front end code is located in the "\client\blog" folder, the CMS front end code is located inside the "\client\admin" folder.

The blog front end is structured a bit differently than your typical AngularJS application, it gets server side rendered templates from NodeJS rather than getting JSON data from an api and doing client side rendering, this is to improve support for SEO and social sharing.

The CMS front end is more of a typical AngularJS application because it doesn't need to support SEO or social sharing.

Run Gulp when updating Front End (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.


More Documentation to Follow!

I'll expand on this documentation over time to include more info about the project structure and details on the Node and Angular code, in the meantime please leave any questions and feedback you have in the comments below. Also feel free to add a link back to your MEANie powered blog.

 


MEAN Stack Development Consultant Sydney

Feel free to drop me a line if you're looking for web development or consulting services in Sydney Australia, I also provide remote contracting services for clients outside Sydney.


Sponsored by