Skip to main content
Version: 4.8

Building a FullStack Application using Spring Boot, ReactJS and PostgreSQL: A Step-by-Step Guide

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: SpringBoot, ReactJS
    2. DataSpaces: PostgreSQL (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 reactjs-fullstackui from the drop-down
    • Create a feature branch and clone the repo locally
  3. For the backend:
    • Navigate to Repos/Files/
    • Select springboot-fullstackapi from the drop-down
    • Create a feature branch and clone the repo locally

Watch this video walkthrough before proceeding to the document below.​

getting-started

Step 5: Local Development​

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

  • ReactJS:

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

  • SpringBoot:

    • mvn test
    • mvn clean install

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/reactjs-fullstackui.yml@spaces
    parameters:
        appVersion: 4.5.0
        acceptanceSpace: hts-srphost-dnt
        spaces:
        # workspace:
        #   helm:
        #     overrideFiles:  hts-fullstackui/values.workspace.yaml    
        hts-srphost-dnt:
            helm:
            overrideFiles: |
                hts-fullstackui/values.hostspace.yaml
  1. Within API repo, update values.yaml Liveness and readiness probes, to ensure proper delay is allocated for your application to come up
    livenessProbe:
    httpGet:
        path: /
        port: springboot
    initialDelaySeconds: 90
    periodSeconds: 10
    successThreshold: 1
    timeoutSeconds: 1

    readinessProbe:
    httpGet:
        path: /
        port: springboot
    initialDelaySeconds: 90
    periodSeconds: 10
    successThreshold: 1
    timeoutSeconds: 1

Step 8: Setting Up PostgreSQL​

  1. Create your connection string using the PostgreSQL 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-srphost-dnt:
        variableGroups:
          - postgres_vars
        secretVarKeys:
          - dburl
          - uname
          - pass
        helm:
          overrideFiles: |
            hts-fullstackapi/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"
      UNAME: "$uname"
      PASS: "$pass"
  1. Update application configuration file to reference above envirornment variables

application.yaml​

    spring:
        jmx:
        enabled: true   
        datasource:
        driver-class-name: org.postgresql.Driver
        url: ${DB_URL}
        username: ${UNAME}
        password: ${PASS}

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 (within the UI Repository, reactjs-fullstackui) with your custom domain
   ingressEndpoints:
   - host: fullstackdemoapp.netapp.com
  1. To enable CORS, update back-end code(springboot-fullstackapi) to reference custom domain name
    @Configuration
    public class WebConfig {

        @Bean
        public WebMvcConfigurer corsConfig() {
            return new WebMvcConfigurer() {
                @Override
                public void addCorsMappings(CorsRegistry registry) {
                    registry.addMapping("/**").allowedMethods("GET", "POST", "PUT", "PATCH", "DELETE").allowedOrigins("https://fullstackdemoapp.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!