IBM Cloud Docs
Modern web application using MEAN stack

Modern web application using MEAN stack

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

This tutorial walks you through the creation of a web application using the popular MEAN stack. It is composed of a MongoDB, Express web framework, Angular front end framework and a Node.js runtime. You will learn how to run a MEAN sample app locally, create and use a managed database-as-a-service (DBasS), deploy the app to IBM Cloud and scale both the runtime and database resources.

Objectives

  • Create and run a sample Node.js app locally.
  • Create a managed Databases for MongoDB instance.
  • Deploy the Node.js app to the cloud using IBM Cloud® Code Engine.
  • Scale runtime CPU and memory resources.
  • Scale database memory and disk resources.

Architecture diagram
Architecture diagram of the tutorial

  1. The user accesses the application using a web browser.
  2. The Node.js app running in Code Engine accesses the Databases for MongoDB database to fetch data.

Before you begin

This tutorial requires:

  • IBM Cloud CLI - This CLI tool will enable you to interact with IBM Cloud.
    • code-engine/ce plugin (code-engine/ce) for CLI access to Code Engine resources.
    • Optional Container Registry plugin (container-registry) for managing container images.
  • git to clone source code repository.
  • Optional, if you want to test running the app locally, you will need to install Node.js.

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

To avoid the installation of these tools you can use the Cloud Shell from the IBM Cloud console.

This tutorial demonstrates the use of the command line to create the database, IBM Cloud® Code Engine project and application. There are instructions in the companion GitHub repository to provision with Terraform locally on your workstation or even simpler provision with Schematics in just a few clicks.

Create an instance of MongoDB database in the cloud

In this section, you will create a Databases for MongoDB instance in the cloud. Databases for MongoDB is a database-as-a-service that is easy to configure and provides built-in backups and scaling. You can find many different types of databases in the IBM Cloud catalog. To create a Databases for MongoDB instance follow the steps below.

  1. If you are not logged in, use ibmcloud login or ibmcloud login --sso to log in interactively. Target your preferred IBM Cloud region and resource group. In the example below we will use the ca-tor (Toronto) region and the default resource group.

    ibmcloud target -r ca-tor -g default
    

    You can find more CLI commands in the General IBM Cloud CLI (ibmcloud) commands topic in the documentation.

  2. Create an instance of Databases for MongoDB via the command line or use the console UI. The service name must be named mean-stack-mongodb as the application used in this tutorial is configured to look for the service by this name. For <region>, you can choose a region that is closer to you, however we will use ca-tor in this tutorial.

    ibmcloud resource service-instance-create mean-stack-mongodb databases-for-mongodb standard ca-tor
    
  3. Wait for the instance to be ready. You can check the provisioning status with the following command:

    ibmcloud resource service-instance mean-stack-mongodb
    
  4. Once you have verified the service status changed to "create succeeded", you may proceed to create a service key.

    ibmcloud resource service-key-create mean-stack-mongodb-key --instance-name mean-stack-mongodb
    

Run the MEAN app locally

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 IBM Cloud.

  1. Clone the MEAN sample code.

    git clone https://github.com/IBM-Cloud/nodejs-MEAN-stack
    cd nodejs-MEAN-stack
    
  2. Copy .env.example file to .env.

    cp .env.example .env
    
  3. In the .env file, add your own SESSION_SECRET. For MONGODB_URL and CERTIFICATE_BASE64, run the below command:

    ibmcloud resource service-key mean-stack-mongodb-key --output json
    

    You can find the value required for MONGODB_URL under credentials -> connection -> mongodb -> composed and the value for CERTIFICATE_BASE64 under credentials -> connection -> mongodb -> certificate -> certificate_base64 in the returned JSON output. Make sure the values added to the .env do not include any quotation or space.

  4. Optional - Install the required packages.

    npm install
    
  5. Optional - Run the application locally. Access the app using the URL provided in the output, create a new user and log in.

    node server.js
    

Using the cloud shell it is possible to open the application by clicking on the eye icon in the upper right and clicking the preview on port 8080.

Deploy app to the cloud

IBM Cloud® Code Engine is a fully managed, serverless platform that runs your containerized workloads, including web apps, microservices, event-driven functions, or batch jobs. In this section, you will create a Code Engine project and deploy the containerized Node.js app to the project. In the previous section, the source code reads the .env that you have locally to obtain the URL and credentials to the MongoDB service. You will create a secret in the project to contain these same keys/values that will be read by the app when it is run.

We've already built a container image for the application and pushed it to the public IBM Cloud Container Registry. You will use this pre-built container image to deploy the application.

  1. Create a project in IBM Cloud Code Engine.

    ibmcloud code-engine project create --name mean-stack
    
  2. Create a secret in the project that contains the keys/values from the .env file you used earlier to run the application locally, this secret will be consumed by the application running in the cloud. For more about secrets, see Working with secrets.

    ibmcloud code-engine secret create --name mean-stack-secrets --from-env-file .env
    
  3. Create the application based on the public container image that is based on the same source code downloaded from the https://github.com/IBM-Cloud/nodejs-MEAN-stack repository. If you are interested in the steps used to create this image, you can review create-container-image.md.

    ibmcloud code-engine application create --name mean-stack-application --image icr.io/solution-tutorials/tutorial-mean-stack --env-from-secret mean-stack-secrets
    
  4. Once the code has been pushed, you should be able to view the app in your browser. A host name has been generated that can looks like: https://mean-stack.<CE_SUBDOMAIN>.ca-tor.codeengine.appdomain.cloud/. The CE_SUBDOMAIN is a variable that is injected into your project and its value determined during the creation of your project. You can get your application URL from the console dashboard or command line. Once you access the application, it should look like this:

    Live App
    Live App

Scaling the compute resources in Code Engine

Code Engine monitors the number of requests in the system and scales the application instances up and down in order to meet the load of incoming requests, including any HTTP connections to your application. If your service needs additional compute resources, or you want to reduce the amount of compute resource allocated you can make these changes in your specific application page.

  1. Navigate to the Code Engine Projects page.

  2. Click on the mean-stack project created earlier.

  3. Under Summary, click on Applications.

  4. Click on the mean-stack-application created earlier.

  5. Click on Configuration and then Runtime to view the current configuration.

    Scale Resources
    Scale Resources

  6. Click on Edit and create new revision to adjust not only the CPU and memory, the Minimum/Maximum number of instances as well as the Concurrency.

  7. Click on Save and create to trigger the changes. It will indicate that the application is Deploying and Ready when complete.

Scaling the database resources in Databases for MongoDB

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.

  1. Access the Databases for MongoDB service instance from the Resource List under Databases.
  2. Click on the Resources panel.
    Scale Resources
    Scale Resources
  3. Adjust the slider to raise or lower the storage allocated to your 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

To remove resource, follow these steps:

  1. With the command below, delete the project to delete all its components (applications, jobs and so on).
    ibmcloud code-engine project delete --name mean-stack
    
  2. Delete the Databases for MongoDB service key.
    ibmcloud resource service-key-delete mean-stack-mongodb-key
    
  3. Delete the Databases for MongoDB service.
    ibmcloud resource service-instance-delete mean-stack-mongodb
    

Depending on the resource it might not be deleted immediately, but retained (by default for 7 days). You can reclaim the resource by deleting it permanently or restore it within the retention period. See this document on how to use resource reclamation.

Related Content