In this Tutorial, we will learn to build your own Content Management System (CMS). This Tutorial iS for Beginners as well as for Expert Developers
Until now, we have been heavily dependent on external web services to handle all our backend server-side work. Now, we will build our own backend using MongoDB, ExpressJS, angularjs, and Node.js; all these together are also popularly known as the MEAN stack.
This Tutorial will focus more on making angularjs work smoothly with a backend system.
As we get through this tutorial , some of the interesting things that we’ll learn are as follows:
- Building RESTful web services using Node.js and ExpressJS
- Saving and reading data from MongoDB
- Working with ExpressJS and angularjs routes within the same application
Download full code
Why the MEAN stack?
An obvious question would be why the choice of MongoDB, Node.js, and Express, when we could use any other stack.
To be politically correct, we could use any other technology, such as Java, PHP, ASP.NET, or even Ruby on Rails, to build the backend part of this project, and angularjs would work just as fine.
The main reason to choose this stack is that all the tools within this stack use a single language, which is JavaScript. Other than this, each of the following tools offers certain unique benefits that make it equally suitable to build this application:
- Node.js: This is the most important tool in this stack. It allows us to build event-driven, nonblocking I/O applications using JavaScript. Thanks to Node.js, we are now able to write server-side applications in JavaScript.
- ExpressJS: This is a lightweight web application framework that allows us to build a server-side application on Node.js using the Model View Controller (MVC) design pattern.
- MongoDB: This is a very popular NoSQL database. It uses JavaScript to read and modify data, and the data is stored in the Binary JSON (BSON) format.
- MongooseJS: This is an object modeling tool for MongoDB. It provides a schema-based approach to model our data and also a much easier way to validate and query data in MongoDB.
Getting started with the MEAN stack
Let’s start by installing the various tools that we’ll need to build our application.
By this time, you probably already have Node.js installed and have become reasonably comfortable with starting and stopping the web servers.
As we proceed, take a moment to verify your current version of Node.js and upgrade it if necessary. The status of the latest version and how to upgrade it can be found on the Node.js site at http://nodejs.org/.
Setting up MongoDB
Depending on your operating system, MongoDB can be installed in multiple ways.
Perform the steps mentioned at the following links to install MongoDB on your operating system:
- For Windows, refer to http://docs.mongodb.org/manual/tutorial/install-mongodb-on-windows/
- For Mac OS X, refer to http://docs.mongodb.org/manual/tutorial/install-mongodb-on-os-x/
- For Ubuntu, refer to http://docs.mongodb.org/manual/tutorial/install-mongodb-on-ubuntu/
Once you have installed MongoDB, the next most important step is to create the folder to store your data.
Create an empty folder named data/db on the root using the following command line:
mkdir /data/db
You can also create the folder directly in the C: as follows:
c:md data c:md datadb
Next, we’ll connect to the MongoDB database using the following command:
mongod
Tip
You will need to either give read or write permissions to the data/db folder or use the sudo or admin privilege to run the MongoDB command with root-level privileges.
In the following steps, we will start the mongo shell and create a new database named angcms.
With MongoDB running in a terminal window, we will open a new terminal window and fire the following commands.
mongo use angcms
MongoDB comes with a default test database; one can also use this to test and play around with some MongoDB command
Setting up ExpressJS and MongooseJS
In case you don’t have ExpressJS yet, you can install it using the following command:
npm install -g express-generator
The next step is to create your ExpressJS project folder, which will be done using the following command:
express angcms
This will create a folder named angcms and put the boilerplate Express files into it. Note that we still don’t have ExpressJS installed; we will need to install it with the following command from the terminal:
npm install
We’ll now install MongooseJS as a devdependency along with ExpressJS.
Save the file, cd, into the angcms folder, and run the following command:
npm install –-save mongoose
Go to the angcms/node_modules folder, and verify that we have the express, jade, and mongoose folders within it.
Let’s also check whether our server is working by firing the following command in the terminal:
npm start
Open the browser and run http://localhost:3000; you should get the Welcome to Express message.
