Articles

Bootstrapping your MEAN Stack application with Openshift, Kubernetes and Docker

The MEAN stack is a popular, open-source, full-stack JavaScript framework for building dynamic websites and web applications. By combining useful JavaScript modules such as MongoDB, Express.js, AngularJS, and Node.js. The MEAN Stack has achieved a high level of harmony between the client and server. In fact, the MEAN Stack is JavaScript from front to back which means that these applications are quick to put together, and represent the modern state of web application development.

In this brief tutorial we are going combine the MEAN Stack with best practices in both application architecture and deployment. Namely, Microservices and Linux Containers. We will bootstrap our MEAN Stack application on the popular PaaS provider, the Digital Garage. Digital Garage utilizes Red Hat Openshift, Google Kubernetes and Docker Containers to create an open and efficient way to incorporate these best practices into our project.

Prerequisites

  • A Github account. If you do not already have a Github account, you can follow this link to sign up for free.
  • A Digital Garage Account. If you do not already have a Digital Garage account, you can sign up for free at www.thedigitalgarage.io.

Bootstrapping the MEAN Stack

We will be:

  • Forking the MEAN seed project on the Digital Garage Github Organization to your private repository.
  • Creating a MEAN Stack application workspace on the Digital Garage platform.
  • Bootstrapping the MEAN Stack in your MEAN Stack Application workspace with MongoDB and Node.js containers from Docker Hub.
  • Building the AngularJS application from the source in the forked repository and deploying the application on the MEAN Stack.

OK, let's get started.

After you have signed into your Github account, go to: www.github.com/thdigitalgarage/mean-ex and fork the repository into your own account. This repository contains some files and a file structure that will give you a quick start on your MEAN application. I will go into more detail on the files and file structure a little further into the tutorial. For now, let's complete our setup by logging into your Digital Garage account and set up the MEAN stack.

After signing into your Digital Garage account, Choose the Add to Project link in the top menu bar to go to the template catalog.

In the add to project screen, choose the MEAN Stack Quickstart (qs-mean) from the catalog.

In the template configuration page for the MEAN Stack Quickstart change the Git Repository URL to point to the repository that was just forked into your account. `https://github.com/johnmccawley/mean-ex.git`. If you are running this tutorial in the free Hello World tier, you will want to set the `Memory Limit` for MongoDB to 128Mi rather than the default 192Mi. This will give your application enough room to build and deploy all of the containers it needs. For the rest of the parameters, you can simply accept the defaults for the remaining parameters and click "Create"

That's it. Digital Garage is now setting up your MEAN Stack. On the next page you'll be presented with some information about your new application. When you are ready, click "Continue to Overview". You will be taken to the Project Overview screen where you can watch Digital Garage do the setup work for you. In just a few minutes you'll have full MEAN stack running in containers and managed through Google Kubernetes. When MongoDB and Node.js are completely deployed, (the pod status circle is Green) simply click on the application URL in the upper right corner of the overview screen. You will be taken to a browser to see a simple "Hello World" message.

File Structure

Now that we have the MEAN Example repository forked into your account, let's take a few minutes to review the file structure for the repository. There are many ways to structure a MEAN application. I have tried to take the best-practices from several tutorials and create a simple yet expandable file structure this example project. For further reading on file structures for the MEAN Stack, Mean.io is a good boilerplate to see best practices and how to separate file structure. For now, though, we will just use the following structure adjust as we go.

mean-ex

  • app - files for node components (models, routes)
  • config - all our configuration will be here
    • database.js
  • LICENSE
  • openshift
    • templates
    • qs-mean.json - example template for Kubernetes
  • public - files for our front-end angular application
    • app.js
    • index.html
  • package.json -npm configuration to install dependencies/modules
  • README.md
  • tests - files for basic test scripts
  • server.js -Node configuration

Congratulations! You have deployed your first application on the MEAN Stack.


This content is sponsored via Syndicate Ads.

Back to top

Gain access to all tutorials

  • Premium tutorials covering WordPress, Laravel and VueJS
  • Download premium content
  • Download premium WordPress plugins
  • Only $5 a month

Join Paulund