Skip to content

Latest commit

 

History

History
172 lines (123 loc) · 7.08 KB

mean-stack.md

File metadata and controls

172 lines (123 loc) · 7.08 KB
Raw
subcollection copyright lastupdated lasttested
solution-tutorials
years
2017, 2019
2019-05-15
2019-05-15

{:shortdesc: .shortdesc} {:new_window: target="_blank"} {:codeblock: .codeblock} {:screen: .screen} {:tip: .tip} {:pre: .pre}

Modern web application using MEAN stack

{: #mean-stack}

This tutorial walks you through the creation of a web application using the popular MEAN stack. It is composed of a Mongo DB, Express web framework, Angular front end framework and a Node.js runtime. You will learn how to run a MEAN starter locally, create and use a managed database-as-a-service (DBasS), deploy the app to {{site.data.keyword.cloud_notm}} and scale the database resources.

Objectives

{: #objectives}

  • Create and run a starter Node.js app locally.
  • Create a managed database-as-a-service (DBasS).
  • Deploy the Node.js app to the cloud.
  • Scale MongoDB memory and disk resources.

Services used

{: #products}

This tutorial uses the following {{site.data.keyword.Bluemix_notm}} services:

Attention: This tutorial might incur costs. Use the Pricing Calculator to generate a cost estimate based on your projected usage.

Architecture

{:#architecture}

Architecture diagram

  1. The user accesses the application using a web browser.
  2. The Node.js app accesses the {{site.data.keyword.databases-for-mongodb}} database to fetch data.

Before you begin

{: #prereqs}

  1. Install Git
  2. Install {{site.data.keyword.Bluemix_notm}} CLI

And to develop and run the application locally:

  1. Install Node.js and NPM

Create an instance of MongoDB database in the cloud

{: #createdatabase}

In this section, you will create a {{site.data.keyword.databases-for-mongodb}} database in the cloud. {{site.data.keyword.databases-for-mongodb}} is database-as-a-service that usually easier to configure and provides built-in backups and scaling. You can find many different types of databases in the IBM cloud catalog. To create {{site.data.keyword.databases-for-mongodb}} follow the steps below.

{: shortdesc}

  1. Login to your {{site.data.keyword.cloud_notm}} account via the command line and target your {{site.data.keyword.cloud_notm}} account.
ibmcloud login
ibmcloud target --cf

{: codeblock}

You can find more CLI commands here.

  1. Create an instance of {{site.data.keyword.databases-for-mongodb}}. This can also be done using the console UI. The service name must be named mean-starter-mongodb as the application is configured to look for this service by this name.
ibmcloud cf create-service databases-for-mongodb standard mean-starter-mongodb

{: codeblock}

  1. Wait for the instance to be ready. You can check the provisioning status with the following command:
ibmcloud cf service mean-starter-mongodb

{: codeblock}

Run the MEAN app locally

{: #runapplocally}

In this section, you will clone a MEAN sample code and run the application locally to test the connection to the MongoDB database running on {{site.data.keyword.cloud_notm}}. {: shortdesc}

  1. Clone the MEAN starter code.
git clone https://github.com/IBM-Cloud/nodejs-MEAN-stack
cd nodejs-MEAN-stack

{: codeblock}

  1. Install the required packages.
npm install

{: codeblock}

  1. Copy .env.example file to .env.
 cp .env.example .env

{: codeblock}

  1. In the .env file, add your own SESSION_SECRET. For MONGODB_URL and CERTIFICATE_BASE64, run the below command
 ibmcloud cf service-key mean-starter-mongodb "Service credentials-1"

{: codeblock} You can find the URL under mongodb -> composed and certificate_base64 under mongodb -> certificate in the returned JSON output.

  1. Run node server.js to start your app
node server.js

{: codeblock}

  1. Access your application, create a new user and log in

Deploy app to the cloud

{: #deployapp}

In this section, you will deploy the node.js app to the {{site.data.keyword.cloud_notm}} that used the managed MongoDB database. The source code contains a manifest.yml file that been configured to use the "mongodb" service created earlier. The application uses VCAP_SERVICES environment variable to access the MongoDB database credentials. This can be viewed in the server.js file. To check the VCAP_SERVICES, run ibmcloud cf env mean-stack. {: shortdesc}

  1. Push code to the cloud. 
    ibmcloud cf push
    {: codeblock}
  2. Once the code been pushed, you should be able to view the app in your browser. A random host name been generated that can look like: https://mean-random-name.mybluemix.net. You can get your application URL from the console dashboard or command line.Live App

Scaling MongoDB database resources

{: #scaledatabase}

If your service needs additional storage, or you want to reduce the amount of storage allocated to your service, you can do this by scaling resources. {: shortdesc}

  1. Using the console dashboard, locate the MongoDB service instance and click until you are in the Service Details.
  2. In the Manage menu, click on the Settings panel.
  3. Adjust the slider to raise or lower the storage allocated to your {{site.data.keyword.databases-for-mongodb}} database service.
  4. Click Scale Deployment to trigger the rescaling and return to the dashboard overview. It will indicate that the rescaling is in progress.

Remove resources

{:removeresources}

To remove resource, follow these steps:

  1. Visit the {{site.data.keyword.cloud_notm}} Resource List. Locate your app.
  2. Click on the menu icon for the app and choose Delete. In the dialog window tick the checkmark that you want to delete the related {{site.data.keyword.databases-for-mongodb}} service.
  3. Click the Delete button. The app and database service are removed and you are taken back to the resource list.

Related Content

{: #related}