Create and deploy a cloud native web application using the MERN (MongoDB, Express, React, Node.js) stack

This repository has code to create a web app that is pre-configured with the MERN stack (MongoDB, Express.js, React, Node.js). We use IBM Cloud services to host our application; the IBM Cloud Developer Tools CLI to run and debug locally; and lastly provide native commands to deploy to Kubernetes or Cloud Foundry.

By running this code, you'll understand how to:

Build an application that uses MongoDB, Express.js, React, and Node.js
Create an application for monitoring and distributed tracing using App Metrics
Deploy an application using the IBM Developer Tools CLI or natively with Kubernetes or Cloud Foundry

Flow

The user views the React web app with a browser
With both components written in Node.js, the React front-end communicates with the Express back-end via RESTful APIs.
The back-end Express application uses the Mongo database for storing and retrieving data.
Back-end results are communicated back to the the front-end.
Front-end results are rendered in a human readable format to the user.

Included Components

IBM Cloud: Provides a computing platform that includes a catalog of cloud services which can be integrated with PaaS and IaaS to build business applications.
Kubernetes Cluster: Create and manage your own cloud infrastructure and use Kubernetes as your container orchestration engine.
MongoDB: Fully featured NoSQL server that is horizontally scalable to meet your enterprise class database service needs.
Express: Most popular and minimalistic web framework for creating API and Web server.
React: JavaScript library for building User Interfaces.

Featured Technologies

Node.js: An open-source JavaScript run-time environment for executing server-side JavaScript code.
Containers: Virtual software objects that include all the elements that an app needs to run.
Cloud Native: Cloud-native is an approach to building and running applications that exploits the advantages of the cloud computing delivery model

Getting Started

Ensure IBM Cloud Developer Tools is installed. To install, run:

curl -sL http://ibm.biz/idt-installer | bash

NOTE: IDT builds and runs the project using Docker containers, the recommended approach for cloud native development. However, direct use of native tools (e.g. npm) is also supported. See the Appendix for more information.

Building your MERN app

The starter project supports the concept of dev mode and release mode. In dev mode, the starter app runs with dev dependencies installed and hot reload enabled for both the frontend and backend aspects of the app. Dev mode is intended for use during app development. Release mode excludes dev dependencies and runs the app without hot reload. Release mode is intended for running in production.

Working in development mode

Build the project with all dependencies, including dev dependencies, with the command:
```
idt build --debug
```
NOTE: Ensure a Docker daemon is running before issuing the above command
Run project unit tests with the command:
```
idt test
```
Run the app in dev mode with command:
```
idt shell run-dev &
```
A web server will runs on port 3000 and the app itself runs on port 3100. The web server and app will automatically reload if changes are made to the source.
Run the app in interactive debug mode with command:
```
idt debug
```
The app listens on port 5858 for the debug client to attach to it, and on port 3000 for app requests.

Working in release mode

Build the project:
```
idt build
```
This builds the project using Dockerfile-tools. Effectively equivalent to idt build --debug.
Run the project:
```
idt run
```
This runs the project using the release image built on the fly using Dockerfile. Hot reload is not available in the release image.

Default URLs and sample output

Whether you run in dev mode or release mode, you have the same default URLs available to you:

Deploying your MERN app

These projects are designed for deployment to IBM Cloud through the IBM Developer Tools CLI, to either Kubernetes (public or private cloud) or Cloud Foundry (public cloud only).

NOTE: As mentioned earlier, for deployments on other environments using native commands see Appendix.

As a Cloud Foundry app

To deploy the app with Cloud Foundry:

idt deploy

In a Kubernetes cluster

To deploy the app with Kubernetes:

idt deploy --target container

An interactive session will begin where you'll be prompted for a new or existing IBM Kubernetes Service cluster name. Once the cluster is validated and the Docker registry confirmed the app will be deployed to a Kubernetes cluster. The output below has been trimmed for readability.

The IBM cluster name for the deployment of this application will be: stevemar-cluster
Log in to the IBM Container Registry ...
Configuring with cluster 'stevemar-cluster' ...

Deployments:
NAME                     DESIRED   CURRENT   UP-TO-DATE   AVAILABLE   AGE
mernexample-deployment   1         1         1            0           3s
mongo-deployment         1         1         1            0           3s

Nodes:
NAME             STATUS    ROLES     AGE       VERSION
10.177.184.198   Ready     <none>    14m       v1.10.5+IKS

Your application is hosted at http://169.47.252.58:32281/

Setting up MongoDB

Now that we've got a Dockerized version of our app running, before we push it to production we'll need to configure a Mongo database, this is a MERN stack after all!

Provisioning a MongoDB

Create an instance MongoDB by searching Compose for MongoDB in the Catalog
Once created go to the Service credentials menu and create a new credential.
Copy the uri to a text file, we'll need to parse the content out.
From the uri we will need to get the username, password, and mongo_url. The text is in the form of mongodb://{username}:{password}@{mongo_url}.

NOTE: Alternatively, you may install MongoDB natively, refer to the install instructions.

Configuring MongoDB

Connecting to MongoDB is done in the file server/routers/mongo.js. It is controlled through environment variables. Below is a sample set of credentials.

export MONGO_URL='portal-ssl1308-22.bmix-dal-yp-c4627161-a212-45bd-b0bd-62004a6e6f5c.421838044.composedb.com:54951'
export MONGO_USER='admin'
export MONGO_PASS='AFLLYADUNVAUKPNO'
export MONGO_DB_NAME='admin'

If you want to perform a quick test, try using the mongo CLI.

$ mongo --ssl --sslAllowInvalidCertificates $MONGO_URL -u $MONGO_USER -p $MONGO_PASS --authenticationDatabase $MONGO_DB_NAME
MongoDB shell version v4.0.1
connecting to: mongodb://portal-ssl1308-22.bmix-dal-yp-c4627161-a212-45bd-b0bd-62004a6e6f5c.421838044.composedb.com:54951/test
MongoDB server version: 3.4.10
mongos>

Using Mongo with Cloud Foundry

Navigate to your application, select the Runtimes menu and you'll be given an opportunity to enter environment variables.

Using Mongo with Kubernetes

Open values.yaml under the charts directory (e.g. MERN-app/chart/mernexample/) and update the section below with the appropriate values.

services:
  mongo:
     url: {uri}
     dbName: {dbname}
     username: {username}
     password: {password}
     env: production

Open bindings.yaml under the charts directory to add Mongo references, add these at the end if they are not there already.

  - name: MONGO_URL
    value: {{ .Values.services.mongo.url }}
  - name: MONGO_DB_NAME
    value: {{ .Values.services.mongo.name }}
  - name: MONGO_USER
    value: {{ .Values.services.mongo.username }}
  - name: MONGO_PASS
    value: {{ .Values.services.mongo.password }}
  - name: MONGO_CA
    value: {{ .Values.services.mongo.ca }}

Learn More

Other Starter Kits: Enjoyed this Starter Kit? Check out our other Starter Kits.
Architecture Center: Explore Architectures that provide flexible infrastructure solutions.

License

Apache 2.0

emmatucker15 / mern-app Goto Github PK

mern-app's Introduction