What Are WebApps

The WebApp system allows for deployment of static frontend assets in a kubernetes native way, it also supports slipstream deployments and argo deployment

Webapps can take a couple of forms:

1. Super simple bundles of html and other static assets simple
2. Static applications that require per environment configuration, for instance pointing at different APIs on stage and production

Index pages are generated and served with no cache whilst all other assets are served immutably versioned from a CDN backend, this allows for flexibility on version, and full control from systems like kubernetes and slipstream

further to standard serving PRs can be setup to be accessible by setting a cookie against your stage environment see the PR Deployments Tab

Templating WebApps

The most likely required use of templating will be to prefix your asset paths, and/or inject configuration

To prefix a path to for instance a stylesheet you may add something like to following to your template

<link href="https://static.brandwatch.com/example-webapp/90bd461f6731c609040e/styles.css" rel="stylesheet"/>
<!-- Base will always point to the location of the currently deployed version of your WebApp on the backend CDN -->

to inject the full configuration object passing in kubernetes config into your WebApp you may do something similar to the following

<script>window.appConfig = {{.Config}};</script>
<!-- Config will always be a JSON formatted representation of the config passed in your kubernetes WebApp resource -->

for more advanced usages you might want to directly use a configuration value in your HTML you may directly pluck a value from ConfigValues liek so:

<a href='https://{{index .ConfigValues "someUrl"}}'>This Link is pulled in from config;</a>
<!-- Any value passed in your Kubernetes WebApp resource config can be accessed in this manor -->

To view the template used for this WebApp take a look here we are using all of the templating options

Non Templated WebApps

of course in many scenarios you will have an application that is simple enough to not require templating, this would be the case with any application that doesn't require environment specific variables for this you may simply write your HTML as you would any other application, adn skip the CD tab

WebApp Kubernetes Configuration

To deploy a WebApp on Kubernetes you really only need two resources:

1. A WebApp Resource (this is a custom Kubernetes Resource created for this purpose)
2. An Ingress (to point the domain at the WebApp Service)

A webapp resource specifies:

1. The name of the app (folder on CDN)
2. The Version to serve
3. Domain(s) to serve against
4. Application Config

An annotated example WebApp looks like the following:

apiVersion: resources.brandwatch.dev/v1
kind: WebApp
# These are always the same
metadata:
  name: example-webapp
  # This should be your service name
spec:
  resourcePath: "folder-on-CDN"
  # You can skip resourcePath if it matches metadata.name (which it probably should)
  version: "version-hash"
  # this is the version hash that will be served, slipstream will handle this for you mostly
  domains:
    - example.apps.aws.stage.brandwatch.net
  # any domains here should match your ingress config
  config:
    stringVar: "hello brandwatch"
    numberVar: 1234
    booleanVar: false
    random: "https://example.com"
  # any config set here will be available to your application, these values can be strings, numbers, booleans etc

Your ingress should look more or less like any other ingress with one major exception, you should point it at webapp-service rather than a service specific to your webapp

The following is a simple example ingress:

apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: example-webapp
  labels:
    service: example-webapp
  annotations:
    kubernetes.io/ingress.class: nginx
    cert-manager.io/cluster-issuer: letsencrypt
    # this will auto generate a certificate for you
    external-dns.alpha.kubernetes.io/hostname: example.apps.aws.stage.brandwatch.net
    # assuming you're in a cluster on AWS this will automatically setup DNS for you
spec:
  tls:
    - hosts:
        - example.apps.aws.stage.brandwatch.net
        # this should match the domain from your WebApp resource
  rules:
    - host: example.apps.aws.stage.brandwatch.net
      # this should match the domain from your WebApp resource
      http:
        paths:
          - path: /
            backend:
              serviceName: webapp-service
              servicePort: 8080
              # serviceName and servicePort will always be webapp-service and 8080

You can view the kubernetes config for this example application here

please note we use kustomize in the katalog, so things might be broken up a bit with overlays etc.

Continuous Delivery

PR Deployment