MEAN has gained popularity because it allows developers to program in JavaScript on both the client and the server. The MEAN stack enables a perfect harmony of JavaScript Object Notation JSON development: MongoDB stores data in a JSON-like format, Express and Node. MEAN is generally used to create browser-based web applications because Angular client-side and Express server-side are both frameworks for web apps. Another compelling use case for MEAN is the development of RESTful API servers. Creating RESTful API servers has become an increasingly important and common development task, as applications increasingly need to gracefully support a variety of end-user devices, such as mobile phones and tablets. This tutorial will demonstrate how to use the MEAN stack to rapidly create a RESTful API server. Angular, a client-side framework, is not a necessary component for creating an API server. You could also write an Android or iOS application that runs on top of the REST API. We include Angular in this tutorial to demonstrate how it allows us to quickly create a web application that runs on top of the API server. The application we will develop in this tutorial is a basic contact management application that supports standard Create, Read, Update, Delete operations. So that we can focus on illustrating the fundamental structure of a MEAN application, we will deliberately omit common functionality such as authentication, access control, and robust data validation. Prerequisites If you have never deployed a Node. The commands are mostly the same for Windows, but you may need to substitute equivalent Windows commands in some cases. Source code structure The is available on GitHub. Creating a new project with the Angular CLI will generate a large number of different files. When there is a package. It declares environment variables, add-ons, and other information required to run an app on Heroku. The API is written in Node. See the sample application running To see a running version of the application this tutorial will create, you can find a running example application here:. Once the directory is created, use the cd into your project directory. Heroku recognizes an app as Node. To ensure that polyfills work correctly, import the polyfills. Add the mLab add-on to your app. We will use a free add-on however you will to create it. Heroku config variables are equivalent to an , which you can use in development and your local environment. You can access this variable in your Node. Now that our database is ready, we can start coding. Connect MongoDB and the app server using the Node. Both have their advantages, but for this example we will use the official Node. Create a new file called server. Copy the following code into the server. We initialize the db variable in the global scope so that the connection can be used by all the route handlers. Note that our Express app requires a few different libraries. Next we will implement the RESTful API server by defining all the endpoints. Create a RESTful API server with Node. Our contact list app will allow users to perform CRUD operations on their contacts. This will allow us to test getting contacts from the database and saving new contacts to the database. Each contact will have the following schema. We will use this format later when defining the Contact class. Your new contact should be displayed in your browser window. Here is the final version of the server. Copy this into your server. The contacts folder will contain the application logic for displaying and handling contacts. Each component controls a template and is where we define our application logic. Create the contact service to make requests to the API server Our service will act as the client-side wrapper for the RESTful API endpoints that the web application needs. Upon app start, we use contact service to retrieve the full contact list from the API server. Once the contact list is retrieved, it is stored into a local copy of the contact list. Create the contact details template and component The contact details template allows users to create, view, modify, and delete contacts from the contact list. Whenever a change to a contact is made, we need to send the update to the server but also update our local contact list. Taking a look back at our contact-list. The three handler functions are necessary to allow the contact-details component to modify the local copy of the contact list created by the contact-list component. Contact Details New Contact Name Email Mobile Work Create Update Delete Note that our template calls three functions: createContact , updateContact , and deleteContact. The default template is app. This will build the Angular application after library dependencies have been installed. The ng serve command generates and serves the Angular application. However, our project also consists of the Express API server that we need to run. Notes on scaling If you are running a production MEAN application on Heroku, you will need to scale both your application and database as your traffic increases and data size grows. Refer to the article for best practices on scaling your application. To upgrade your database, see the. Optional next steps This app intentionally omits details you would want to include in a real production application. In particular, we do not implement a user model, user authentication, or input validation. Consider adding these features as an additional exercise. If you have any questions about this tutorial you can reach the mLab team at.
