Skip to content

mean-stack.md

Latest commit

 

History

History
187 lines (144 loc) · 7.42 KB

mean-stack.md

File metadata and controls

187 lines (144 loc) · 7.42 KB
subcollection solution-tutorials
copyright
years
2017, 2019, 2020, 2021
lastupdated 2021-01-21
lasttested 2020-12-22
content-type tutorial
services cloud-foundry-public, databases-for-mongodb
account-plan paid
completion-time 1h

{:step: data-tutorial-type='step'} {:shortdesc: .shortdesc} {:new_window: target="_blank"} {:codeblock: .codeblock} {:screen: .screen} {:tip: .tip} {:pre: .pre}

Modern web application using MEAN stack

{: #mean-stack} {: toc-content-type="tutorial"} {: toc-services="cloud-foundry-public, databases-for-mongodb"} {: toc-completion-time="1h"}

This tutorial may incur costs. Use the Cost Estimator to generate a cost estimate based on your projected usage. {: tip}

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. {: shortdesc}

Objectives

{: #mean-stack-0}

{: #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.

{:#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

{: #mean-stack-prereqs}

This tutorial requires:

  • {{site.data.keyword.cloud_notm}} CLI,
  • git to clone source code repository.

You will find instructions to download and install these tools for your operating environment in the Getting started with tutorials guide.

In addition, make sure you install Node.js.

Create an instance of MongoDB database in the cloud

{: #mean-stack-2} {: step}

{: #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}

  1. Create the service key.
 ibmcloud cf create-service-key mean-starter-mongodb "Service credentials-1"

{: codeblock}

Run the MEAN app locally

{: #mean-stack-runapplocally} {: step}

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

{: #mean-stack-4} {: step}

{: #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

{: #mean-stack-scaledatabase} {: step}

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. Click on the Resources panel. Scale Resources
  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.
  5. Alternatively configure autoscaling rules to automatically increase the database resources as its usage is increasing.

Remove resources

{: #mean-stack-6} {:removeresources} {: step}

To remove resource, follow these steps:

  1. Visit the {{site.data.keyword.cloud_notm}} Resource List. Locate your app.
  2. Delete the {{site.data.keyword.databases-for-mongodb}} service and its Cloud Foundry alias.
  3. Delete the app.

Related Content

{: #mean-stack-7}

{: #related}