Skip to main content
Version: 4.6

Building a MEAN Stack Application in SCALE: A Step-by-Step Guide

getting-started

Welcome! If you've already watched the video, you're ahead of the curve. For those starting fresh, here's your comprehensive guide to creating a MEAN Stack application within SCALE. Let's dive in!

Getting Started​

Step 1: Register Your Application​

  1. Go to Enterprise Service Portal within ServiceNow
  2. Click Service Catalog
  3. Search for "Application Registration"
  4. Fill in the details and click Submit
  5. You will receive an email confirmation with a three-letter app code

Step 2: Onboard Your Application​

  1. Navigate to NetApp ServiceNow DevOps

  2. Click On-Board Application in CloudOne DevOps to begin the onboarding process

    This processkicks off a series of automation steps, typically taking 40-45 minutes, after which you will receive an email with links to:

  • Azure DevOps Project
  • SelfAssist Portal
  • Rancher environment
  • NEAT, JFrog Artifactory, and StorageGrid

Developing Your Application​

Step 3: Ordering Your App Stack​

  1. Go to Manage CloudOne DevOps Application
  2. Search for your three-letter APP CODE
  3. Order the following Services -
    1. Pipelines: AngularJS, NodeJS
    2. DataSpaces: MongoDB (choose an appropriate T-Shirt Size)
    3. Hostspaces: Order one Hostspace (choose an appropriate T-Shirt Size)

Step 4: Setting Up Your Development Environment​

  1. Go to Azure DevOps Org and choose your project
  2. For the frontend:
    • Navigate to Repos/Files/
    • Select angularjs-meanui from the drop-down
    • Create a feature branch and clone the repo locally
  3. For the backend:
    • Navigate to Repos/Files/
    • Select nodejs-meanapi from the drop-down
    • Create a feature branch and clone the repo locally

Step 5: Local Development​

Complete your Application development locally. Run following tests to avoid any failures within the pipeline:

  • Angular:

    • npm run test:ci for component level testing
    • npm run lint for Lint testing
    • npm run e2e:ci for E2E testing

  • NodeJS:

    • npm run test:ci and npm run lint
    • Add the express dependency and update the eslintrc file if using Express instead of the provided HapiJS

Step 6: Preparing for Deployment​

  1. Commit and push front-end and back-end code to remote

  2. Run the Pipeline and ensure the deployment to the workspace is successful without any errors

Finalizing Deployment​

Step 7: Deploying to Hostspace​

  1. Modify azure-pipelines.yml to comment out the workspace section and enable the hostspace section. This must be done for both API and UI repos
   extends:
   template: devops/nodejs-meanapi.yml@spaces
   parameters:
      appVersion: 4.5.1
      acceptanceSpace: hts-meanhost-dnt
      spaces:
         # workspace:
         #    helm:
         #    overrideFiles: |
         #       hts-meanapi/values.workspace.yaml
         hts-meanhost-dnt:
         helm:
            overrideFiles: |
               hts-meanapi/values.hostspace.yaml
  1. Within API repo, update values.hostspace.yaml Ingress endpoints to point to '/api'
   ingressEndpoints:
   - # Dynamically Generate URL
   internal:
      enabled: true
      mappings:
      - prefix: "/api"
         rewrite: "/api"
   external:
      enabled: false
      mappings:
      - prefix: "/api"
         rewrite: "/api"
  1. Within API repo, update values.yaml Liveness and readiness probes
   livenessProbe:
   httpGet:
      path: /
      port: nodejs

   readinessProbe:
   httpGet:
      path: /
      port: nodejs

Step 8: Setting Up MongoDB​

  1. Create your connection string using the MongoDB credentials available in the Rancher UI
  2. Securely manage this connection string as a variable within Azure DevOps Variable Groups (Check Self Assist Documentation for more details)
  3. Update azure-pipelines.yml and values.hostspace.yaml files to reference the envioronment variable

azure-pipelines.yml​

   spaces:
   hts-meanhost-dnt:
      variableGroups:
         - db-vars
      secretVarKeys:
         - dburl
      helm:
         overrideFiles: |
         hts-meanapi/values.hostspace.yaml

values.hostspace.yaml​

   env_vars:
   - name: "primary"
   configs:
         INSTANCE: "primary"
         DB_HOST: "primary.db.host"
         AWS_ENDPOINT: "https://dummy.com"
         DB_URL: "$dburl"
  1. Update application source code to reference above envirornment variables

db.config.js​

    const url = process.env.DB_URL;

Step 9: Custom Domain Setup​

  1. Register a custom domain
    1. Navigate to NetApp ServiceNow DevOps
    2. Click Manage CloudOne DevOps Application
    3. Search for your three-letter APP CODE
    4. Click DNS as a Service and enter your preferred domain name to get the DNS Record created
  2. Update values.hostspace.yaml with your custom domain
   ingressEndpoints:
   - host: meanstackdemo.netapp.com

Commit your changes and push to remote. Your application will be accessible via the custom domain

Need Assistance?​

If you encounter any issues or require support, don't hesitate to reach out to one of the SCALE team members. We're here to help!