Merge pull request #424 from Budibase/deployment

Budibase Cloud Deployment
2020-07-09 11:28:26 +01:00 · 2020-07-09 11:28:26 +01:00 · ce141be482
parent cf82bf9e1c 7222342c50
commit ce141be482
36 changed files with 1087 additions and 439 deletions
--- a/packages/builder/assets/deploy-rocket.jpg
+++ b/packages/builder/assets/deploy-rocket.jpg
--- a/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte
@ -36,7 +36,7 @@
    class={determineClassName(type)}
    bind:value
    class:uk-form-danger={errors.length > 0}>
-    <option></option>
+    <option />
    {#each options as opt}
      <option value={opt}>{opt}</option>
    {/each}
--- a/packages/builder/src/components/nav/ModelSetupNav/ModelSetupNav.svelte
+++ b/packages/builder/src/components/nav/ModelSetupNav/ModelSetupNav.svelte
@ -59,7 +59,9 @@
      if (field.name.startsWith("_")) {
        errors.push(`field '${field.name}' - name cannot begin with '_''`)
      } else if (restrictedFieldNames.includes(field.name)) {
-        errors.push(`field '${field.name}' - is a restricted name, please rename`)
+        errors.push(
+          `field '${field.name}' - is a restricted name, please rename`
+        )
      } else if (!field.name || !field.name.trim()) {
        errors.push("field name cannot be blank")
      }
@ -75,9 +77,7 @@
  async function saveModel() {
    const errors = validate()
    if (errors.length > 0) {
-      notifier.danger(
-        errors.join("/n")
-      )
+      notifier.danger(errors.join("/n"))
      return
    }

--- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
@ -25,103 +25,105 @@
    name: "Screen Placeholder",
    route: "*",
    props: {
-      "_id": "screenslot-placeholder",
-      "_component": "@budibase/standard-components/container",
-      "_styles": {
-        "normal": {},
-        "hover": {},
-        "active": {},
-        "selected": {}
+      _id: "screenslot-placeholder",
+      _component: "@budibase/standard-components/container",
+      _styles: {
+        normal: {},
+        hover: {},
+        active: {},
+        selected: {},
      },
-      "_code": "",
-      "className": "",
-      "onLoad": [],
-      "type": "div",
-      "_children": [
+      _code: "",
+      className: "",
+      onLoad: [],
+      type: "div",
+      _children: [
        {
-        "_id": "51a1b494-0fa4-49c3-90cc-c2a6c7a3f888",
-        "_component": "@budibase/standard-components/container",
-        "_styles": {
-          "normal": {
-            "display": "flex",
-            "flex-direction": "column",
-            "align-items": "center"
+          _id: "51a1b494-0fa4-49c3-90cc-c2a6c7a3f888",
+          _component: "@budibase/standard-components/container",
+          _styles: {
+            normal: {
+              display: "flex",
+              "flex-direction": "column",
+              "align-items": "center",
+            },
+            hover: {},
+            active: {},
+            selected: {},
          },
-          "hover": {},
-          "active": {},
-          "selected": {}
+          _code: "",
+          className: "",
+          onLoad: [],
+          type: "div",
+          _instanceId: "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
+          _instanceName: "Container",
+          _children: [
+            {
+              _id: "90a52cd0-f215-46c1-b29b-e28f9e7edf72",
+              _component: "@budibase/standard-components/heading",
+              _styles: {
+                normal: {
+                  width: "500px",
+                  padding: "8px",
+                },
+                hover: {},
+                active: {},
+                selected: {},
+              },
+              _code: "",
+              className: "",
+              text: "Screenslot",
+              type: "h1",
+              _instanceId: "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
+              _instanceName: "Heading",
+              _children: [],
+            },
+            {
+              _id: "71a3da65-72c6-4c43-8c6a-49871c07b77d",
+              _component: "@budibase/standard-components/text",
+              _styles: {
+                normal: {
+                  "max-width": "",
+                  "text-align": "left",
+                  width: "500px",
+                  padding: "8px",
+                },
+                hover: {},
+                active: {},
+                selected: {},
+              },
+              _code: "",
+              text:
+                "The screens that you create will be displayed inside this box.",
+              type: "none",
+              _instanceId: "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
+              _instanceName: "Text",
+            },
+            {
+              _id: "8af80374-460d-497b-a5d8-7dd2ec4a7bbc",
+              _component: "@budibase/standard-components/text",
+              _styles: {
+                normal: {
+                  "max-width": "",
+                  "text-align": "left",
+                  width: "500px",
+                  padding: "8px",
+                },
+                hover: {},
+                active: {},
+                selected: {},
+              },
+              _code: "",
+              text:
+                "This box is just a placeholder, to show you the position of screens.",
+              type: "none",
+              _instanceId: "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
+              _instanceName: "Text",
+            },
+          ],
        },
-        "_code": "",
-        "className": "",
-        "onLoad": [],
-        "type": "div",
-        "_instanceId": "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
-        "_instanceName": "Container",
-        "_children": [
-          {
-            "_id": "90a52cd0-f215-46c1-b29b-e28f9e7edf72",
-            "_component": "@budibase/standard-components/heading",
-            "_styles": {
-              "normal": {
-                "width": "500px",
-                "padding": "8px"
-              },
-              "hover": {},
-              "active": {},
-              "selected": {}
-            },
-            "_code": "",
-            "className": "",
-            "text": "Screenslot",
-            "type": "h1",
-            "_instanceId": "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
-            "_instanceName": "Heading",
-            "_children": []
-          },
-          {
-            "_id": "71a3da65-72c6-4c43-8c6a-49871c07b77d",
-            "_component": "@budibase/standard-components/text",
-            "_styles": {
-              "normal": {
-                "max-width": "",
-                "text-align": "left",
-                "width": "500px",
-                "padding": "8px"
-              },
-              "hover": {},
-              "active": {},
-              "selected": {}
-            },
-            "_code": "",
-            "text": "The screens that you create will be displayed inside this box.",
-            "type": "none",
-            "_instanceId": "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
-            "_instanceName": "Text"
-          },
-          {
-            "_id": "8af80374-460d-497b-a5d8-7dd2ec4a7bbc",
-            "_component": "@budibase/standard-components/text",
-            "_styles": {
-              "normal": {
-                "max-width": "",
-                "text-align": "left",
-                "width": "500px",
-                "padding": "8px"
-              },
-              "hover": {},
-              "active": {},
-              "selected": {}
-            },
-            "_code": "",
-            "text": "This box is just a placeholder, to show you the position of screens.",
-            "type": "none",
-            "_instanceId": "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
-            "_instanceName": "Text"
-          }
-        ]
-      }
      ],
-      "_instanceName": "Content Placeholder"
+      _instanceName: "Content Placeholder",
    },
  }

--- a/packages/builder/src/components/userInterface/Colorpicker/components/Colorpicker.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/components/Colorpicker.svelte
@ -1,184 +1,267 @@
 <script>
-  import { onMount, createEventDispatcher } from "svelte";
-  import { fade } from "svelte/transition";
-  import Swatch from "./Swatch.svelte";
-  import CheckedBackground from "./CheckedBackground.svelte";
-  import { buildStyle } from "../helpers.js";
+  import { onMount, createEventDispatcher } from "svelte"
+  import { fade } from "svelte/transition"
+  import Swatch from "./Swatch.svelte"
+  import CheckedBackground from "./CheckedBackground.svelte"
+  import { buildStyle } from "../helpers.js"
  import {
    getColorFormat,
    convertToHSVA,
-    convertHsvaToFormat
-  } from "../utils.js";
-  import Slider from "./Slider.svelte";
-  import Palette from "./Palette.svelte";
-  import ButtonGroup from "./ButtonGroup.svelte";
-  import Input from "./Input.svelte";
-  import Portal from "./Portal.svelte";
-  import { keyevents } from "../actions";
+    convertHsvaToFormat,
+  } from "../utils.js"
+  import Slider from "./Slider.svelte"
+  import Palette from "./Palette.svelte"
+  import ButtonGroup from "./ButtonGroup.svelte"
+  import Input from "./Input.svelte"
+  import Portal from "./Portal.svelte"
+  import { keyevents } from "../actions"

-  export let value = "#3ec1d3ff";
-  export let open = false;
-  export let swatches = [];
+  export let value = "#3ec1d3ff"
+  export let open = false
+  export let swatches = []

-  export let disableSwatches = false;
-  export let format = "hexa";
-  export let style = "";
-  export let pickerHeight = 0;
-  export let pickerWidth = 0;
+  export let disableSwatches = false
+  export let format = "hexa"
+  export let style = ""
+  export let pickerHeight = 0
+  export let pickerWidth = 0

-  let colorPicker = null;
-  let adder = null;
-  let swatchesSetFromLocalStore = false;
+  let colorPicker = null
+  let adder = null
+  let swatchesSetFromLocalStore = false

-  let h = 0;
-  let s = 0;
-  let v = 0;
-  let a = 0;
+  let h = 0
+  let s = 0
+  let v = 0
+  let a = 0

-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher()

  onMount(() => {
    if (!swatches.length > 0) {
      //Don't use locally stored recent colors if swatches have been passed as props
-      swatchesSetFromLocalStore = true;
-      swatches = getRecentColors() || [];
+      swatchesSetFromLocalStore = true
+      swatches = getRecentColors() || []
    }

    if (swatches.length > 12) {
      console.warn(
        `Colorpicker - ${swatches.length} swatches were provided. Only the first 12 swatches will be displayed.`
-      );
+      )
    }

    if (colorPicker) {
-      colorPicker.focus();
+      colorPicker.focus()
    }

    if (format) {
-      convertAndSetHSVA();
+      convertAndSetHSVA()
    }
-  });
+  })

  function getRecentColors() {
-    let colorStore = localStorage.getItem("cp:recent-colors");
+    let colorStore = localStorage.getItem("cp:recent-colors")
    if (colorStore) {
-      return JSON.parse(colorStore);
+      return JSON.parse(colorStore)
    }
  }

  function handleEscape() {
    if (open) {
-      open = false;
+      open = false
    }
  }

  function setRecentColors(color) {
    const s = swatchesSetFromLocalStore
      ? swatches
-      : [...getRecentColors(), color];
-    localStorage.setItem("cp:recent-colors", JSON.stringify(s));
+      : [...getRecentColors(), color]
+    localStorage.setItem("cp:recent-colors", JSON.stringify(s))
  }

  function convertAndSetHSVA() {
-    let hsva = convertToHSVA(value, format);
-    setHSVA(hsva);
+    let hsva = convertToHSVA(value, format)
+    setHSVA(hsva)
  }

  function setHSVA([hue, sat, val, alpha]) {
-    h = hue;
-    s = sat;
-    v = val;
-    a = alpha;
+    h = hue
+    s = sat
+    v = val
+    a = alpha
  }

  //fired by choosing a color from the palette
  function setSaturationAndValue({ detail }) {
-    s = detail.s;
-    v = detail.v;
-    value = convertHsvaToFormat([h, s, v, a], format);
-    dispatchValue();
+    s = detail.s
+    v = detail.v
+    value = convertHsvaToFormat([h, s, v, a], format)
+    dispatchValue()
  }

  function setHue({ color, isDrag }) {
-    h = color;
-    value = convertHsvaToFormat([h, s, v, a], format);
+    h = color
+    value = convertHsvaToFormat([h, s, v, a], format)
    if (!isDrag) {
-      dispatchValue();
+      dispatchValue()
    }
  }

  function setAlpha({ color, isDrag }) {
-    a = color === "1.00" ? "1" : color;
-    value = convertHsvaToFormat([h, s, v, a], format);
+    a = color === "1.00" ? "1" : color
+    value = convertHsvaToFormat([h, s, v, a], format)
    if (!isDrag) {
-      dispatchValue();
+      dispatchValue()
    }
  }

  function dispatchValue() {
-    dispatch("change", value);
+    dispatch("change", value)
  }

  function changeFormatAndConvert(f) {
-    format = f;
-    value = convertHsvaToFormat([h, s, v, a], format);
+    format = f
+    value = convertHsvaToFormat([h, s, v, a], format)
  }

  function handleColorInput(text) {
-    let format = getColorFormat(text);
+    let format = getColorFormat(text)
    if (format) {
-      value = text;
-      convertAndSetHSVA();
+      value = text
+      convertAndSetHSVA()
    }
  }

  function dispatchInputChange() {
    if (format) {
-      dispatchValue();
+      dispatchValue()
    }
  }

  function addSwatch() {
    if (format) {
      if (swatches.length === 12) {
-        swatches.splice(0, 1);
+        swatches.splice(0, 1)
      }

      if (!swatches.includes(value)) {
-        swatches = [...swatches, value];
-        setRecentColors(value);
+        swatches = [...swatches, value]
+        setRecentColors(value)
      }

-      dispatch("addswatch", value);
+      dispatch("addswatch", value)
    }
  }

  function removeSwatch(idx) {
-    let [removedSwatch] = swatches.splice(idx, 1);
-    swatches = swatches;
-    dispatch("removeswatch", removedSwatch);
+    let [removedSwatch] = swatches.splice(idx, 1)
+    swatches = swatches
+    dispatch("removeswatch", removedSwatch)
    if (swatchesSetFromLocalStore) {
      //as could be a swatch not present in local storage
-      setRecentColors();
+      setRecentColors()
    }
  }

  function applySwatch(color) {
    if (value !== color) {
-      format = getColorFormat(color);
+      format = getColorFormat(color)
      if (format) {
-        value = color;
-        convertAndSetHSVA();
-        dispatchValue();
+        value = color
+        convertAndSetHSVA()
+        dispatchValue()
      }
    }
  }

-  $: border = v > 90 && s < 5 ? "1px dashed #dedada" : "";
-  $: selectedColorStyle = buildStyle({ background: value, border });
-  $: hasSwatches = swatches.length > 0;
+  $: border = v > 90 && s < 5 ? "1px dashed #dedada" : ""
+  $: selectedColorStyle = buildStyle({ background: value, border })
+  $: hasSwatches = swatches.length > 0
 </script>

+<Portal>
+  <div
+    class="colorpicker-container"
+    use:keyevents={{ Escape: handleEscape }}
+    transition:fade
+    bind:this={colorPicker}
+    {style}
+    tabindex="0"
+    bind:clientHeight={pickerHeight}
+    bind:clientWidth={pickerWidth}>
+
+    <div class="palette-panel">
+      <Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
+    </div>
+
+    <div class="control-panel">
+      <div class="alpha-hue-panel">
+        <div>
+          <CheckedBackground borderRadius="50%" backgroundSize="8px">
+            <div
+              class="selected-color"
+              title={value}
+              style={selectedColorStyle} />
+          </CheckedBackground>
+        </div>
+        <div>
+          <Slider
+            type="hue"
+            value={h}
+            on:change={hue => setHue(hue.detail)}
+            on:dragend={dispatchValue} />
+
+          <CheckedBackground borderRadius="10px" backgroundSize="7px">
+            <Slider
+              type="alpha"
+              value={a}
+              on:change={(alpha, isDrag) => setAlpha(alpha.detail, isDrag)}
+              on:dragend={dispatchValue} />
+          </CheckedBackground>
+
+        </div>
+      </div>
+
+      {#if !disableSwatches}
+        <div transition:fade class="swatch-panel">
+          {#if hasSwatches}
+            {#each swatches as color, idx}
+              {#if idx < 12}
+                <Swatch
+                  {color}
+                  on:click={() => applySwatch(color)}
+                  on:removeswatch={() => removeSwatch(idx)} />
+              {/if}
+            {/each}
+          {/if}
+          {#if swatches.length < 12}
+            <div
+              tabindex="0"
+              title="Add Swatch"
+              use:keyevents={{ Enter: addSwatch }}
+              bind:this={adder}
+              transition:fade
+              class="adder"
+              class:shrink={hasSwatches}
+              on:click={addSwatch}>
+              <span>&plus;</span>
+            </div>
+          {/if}
+        </div>
+      {/if}
+
+      <div class="format-input-panel">
+        <ButtonGroup {format} onclick={changeFormatAndConvert} />
+        <Input
+          {value}
+          on:input={event => handleColorInput(event.target.value)}
+          on:change={dispatchInputChange} />
+      </div>
+    </div>
+
+  </div>
+</Portal>
+
 <style>
  .colorpicker-container {
    position: absolute;
@ -264,86 +347,3 @@
    padding-top: 3px;
  }
 </style>
-
-<Portal>
-  <div
-    class="colorpicker-container"
-    use:keyevents={{ Escape: handleEscape }}
-    transition:fade
-    bind:this={colorPicker}
-    {style}
-    tabindex="0"
-    bind:clientHeight={pickerHeight}
-    bind:clientWidth={pickerWidth}>
-
-    <div class="palette-panel">
-      <Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
-    </div>
-
-    <div class="control-panel">
-      <div class="alpha-hue-panel">
-        <div>
-          <CheckedBackground borderRadius="50%" backgroundSize="8px">
-            <div
-              class="selected-color"
-              title={value}
-              style={selectedColorStyle} />
-          </CheckedBackground>
-        </div>
-        <div>
-          <Slider
-            type="hue"
-            value={h}
-            on:change={hue => setHue(hue.detail)}
-            on:dragend={dispatchValue} />
-
-          <CheckedBackground borderRadius="10px" backgroundSize="7px">
-            <Slider
-              type="alpha"
-              value={a}
-              on:change={(alpha, isDrag) => setAlpha(alpha.detail, isDrag)}
-              on:dragend={dispatchValue} />
-          </CheckedBackground>
-
-        </div>
-      </div>
-
-      {#if !disableSwatches}
-        <div transition:fade class="swatch-panel">
-          {#if hasSwatches}
-            {#each swatches as color, idx}
-              {#if idx < 12}
-                <Swatch
-                  {color}
-                  on:click={() => applySwatch(color)}
-                  on:removeswatch={() => removeSwatch(idx)} />
-              {/if}
-            {/each}
-          {/if}
-          {#if swatches.length < 12}
-            <div
-              tabindex="0"
-              title="Add Swatch"
-              use:keyevents={{ Enter: addSwatch }}
-              bind:this={adder}
-              transition:fade
-              class="adder"
-              class:shrink={hasSwatches}
-              on:click={addSwatch}>
-              <span>&plus;</span>
-            </div>
-          {/if}
-        </div>
-      {/if}
-
-      <div class="format-input-panel">
-        <ButtonGroup {format} onclick={changeFormatAndConvert} />
-        <Input
-          {value}
-          on:input={event => handleColorInput(event.target.value)}
-          on:change={dispatchInputChange} />
-      </div>
-    </div>
-
-  </div>
-</Portal>
--- a/packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte
@ -1,53 +1,53 @@
 <script>
-  import Colorpicker from "./Colorpicker.svelte";
-  import CheckedBackground from "./CheckedBackground.svelte";
-  import { createEventDispatcher, beforeUpdate, onMount } from "svelte";
+  import Colorpicker from "./Colorpicker.svelte"
+  import CheckedBackground from "./CheckedBackground.svelte"
+  import { createEventDispatcher, beforeUpdate, onMount } from "svelte"

-  import { buildStyle, debounce } from "../helpers.js";
-  import { fade } from "svelte/transition";
-  import { getColorFormat } from "../utils.js";
+  import { buildStyle, debounce } from "../helpers.js"
+  import { fade } from "svelte/transition"
+  import { getColorFormat } from "../utils.js"

-  export let value = "#3ec1d3ff";
-  export let swatches = [];
-  export let disableSwatches = false;
-  export let open = false;
-  export let width = "25px";
-  export let height = "25px";
+  export let value = "#3ec1d3ff"
+  export let swatches = []
+  export let disableSwatches = false
+  export let open = false
+  export let width = "25px"
+  export let height = "25px"

-  let format = "hexa";
-  let dimensions = { top: 0, bottom: 0, right: 0, left: 0 };
-  let positionY = "top";
-  let positionX = "left";
-  let colorPreview = null;
+  let format = "hexa"
+  let dimensions = { top: 0, bottom: 0, right: 0, left: 0 }
+  let positionY = "top"
+  let positionX = "left"
+  let colorPreview = null

-  let previewHeight = null;
-  let previewWidth = null;
-  let pickerWidth = 0;
-  let pickerHeight = 0;
+  let previewHeight = null
+  let previewWidth = null
+  let pickerWidth = 0
+  let pickerHeight = 0

-  let errorMsg = null;
+  let errorMsg = null

-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher()

  beforeUpdate(() => {
-    format = getColorFormat(value);
+    format = getColorFormat(value)
    if (!format) {
-      errorMsg = `Colorpicker - ${value} is an unknown color format. Please use a hex, rgb or hsl value`;
-      console.error(errorMsg);
+      errorMsg = `Colorpicker - ${value} is an unknown color format. Please use a hex, rgb or hsl value`
+      console.error(errorMsg)
    } else {
-      errorMsg = null;
+      errorMsg = null
    }
-  });
+  })

  function openColorpicker(event) {
    if (colorPreview) {
-      open = true;
+      open = true
    }
  }

  function onColorChange(color) {
-    value = color.detail;
-    dispatch("change", color.detail);
+    value = color.detail
+    dispatch("change", color.detail)
  }

  function calculateDimensions() {
@ -57,83 +57,52 @@
        width,
        bottom,
        right,
-        left
-      } = colorPreview.getBoundingClientRect();
+        left,
+      } = colorPreview.getBoundingClientRect()

-      const spaceBelow = window.innerHeight - bottom;
-      const previewCenter = previewWidth / 2;
+      const spaceBelow = window.innerHeight - bottom
+      const previewCenter = previewWidth / 2

-      let y, x;
+      let y, x

      if (spaceAbove > spaceBelow) {
-        positionY = "bottom";
-        y = window.innerHeight - spaceAbove;
+        positionY = "bottom"
+        y = window.innerHeight - spaceAbove
      } else {
-        positionY = "top";
-        y = bottom;
+        positionY = "top"
+        y = bottom
      }

      // Centre picker by default
-      x = left + previewCenter - 220 / 2;
+      x = left + previewCenter - 220 / 2

-      const spaceRight = window.innerWidth - right;
+      const spaceRight = window.innerWidth - right

      //Position picker left or right if space not available for centering
      if (left < 110 && spaceRight > 220) {
-        positionX = "left";
-        x = right;
+        positionX = "left"
+        x = right
      } else if (spaceRight < 100 && left > 220) {
-        positionX = "right";
-        x = document.body.clientWidth - left;
+        positionX = "right"
+        x = document.body.clientWidth - left
      }

-      dimensions = { [positionY]: y.toFixed(1), [positionX]: x.toFixed(1) };
+      dimensions = { [positionY]: y.toFixed(1), [positionX]: x.toFixed(1) }
    }
  }

  $: if (open && colorPreview) {
-    calculateDimensions();
+    calculateDimensions()
  }

-  $: previewStyle = buildStyle({ width, height, background: value });
-  $: errorPreviewStyle = buildStyle({ width, height });
+  $: previewStyle = buildStyle({ width, height, background: value })
+  $: errorPreviewStyle = buildStyle({ width, height })
  $: pickerStyle = buildStyle({
    [positionY]: `${dimensions[positionY]}px`,
-    [positionX]: `${dimensions[positionX]}px`
-  });
+    [positionX]: `${dimensions[positionX]}px`,
+  })
 </script>

-<style>
-  .color-preview-container {
-    display: flex;
-    flex-flow: row nowrap;
-    height: fit-content;
-  }
-
-  .color-preview {
-    cursor: pointer;
-    border-radius: 3px;
-    border: 1px solid #dedada;
-  }
-
-  .preview-error {
-    background: #cccccc;
-    color: #808080;
-    text-align: center;
-    font-size: 18px;
-    cursor: not-allowed;
-  }
-
-  .overlay {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 2;
-  }
-</style>
-
 <svelte:window on:resize={debounce(calculateDimensions, 200)} />

 <div class="color-preview-container">
@ -173,3 +142,34 @@
    </div>
  {/if}
 </div>
+
+<style>
+  .color-preview-container {
+    display: flex;
+    flex-flow: row nowrap;
+    height: fit-content;
+  }
+
+  .color-preview {
+    cursor: pointer;
+    border-radius: 3px;
+    border: 1px solid #dedada;
+  }
+
+  .preview-error {
+    background: #cccccc;
+    color: #808080;
+    text-align: center;
+    font-size: 18px;
+    cursor: not-allowed;
+  }
+
+  .overlay {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 2;
+  }
+</style>
--- a/packages/builder/src/components/userInterface/Colorpicker/components/FlatButton.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/components/FlatButton.svelte
@ -1,6 +1,6 @@
 <script>
-  import {createEventDispatcher} from "svelte"
-  import {keyevents} from "../actions"
+  import { createEventDispatcher } from "svelte"
+  import { keyevents } from "../actions"

  export let text = ""
  export let selected = false
@ -8,7 +8,14 @@
  const dispatch = createEventDispatcher()
 </script>

-<div class="flatbutton" tabindex="0" use:keyevents={{"Enter": () => dispatch("click")}}  class:selected on:click>{text}</div>
+<div
+  class="flatbutton"
+  tabindex="0"
+  use:keyevents={{ Enter: () => dispatch('click') }}
+  class:selected
+  on:click>
+  {text}
+</div>

 <style>
  .flatbutton {
@ -24,7 +31,7 @@
    justify-content: center;
    align-items: center;
    background: #f1f3f4;
-    outline-color:  #003cb0;
+    outline-color: #003cb0;
    outline-width: thin;
  }

--- a/packages/builder/src/components/userInterface/Colorpicker/components/Slider.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/components/Slider.svelte
@ -1,6 +1,6 @@
 <script>
  import { onMount, createEventDispatcher } from "svelte"
-  import {drag, keyevents} from "../actions"
+  import { drag, keyevents } from "../actions"

  export let value = 1
  export let type = "hue"
@ -21,15 +21,14 @@
    let percentageClick = (clickPosition / sliderWidth).toFixed(2)

    if (percentageClick >= 0 && percentageClick <= 1) {
-      
      let value = type === "hue" ? 360 * percentageClick : percentageClick
      dispatch("change", { color: value, isDrag })
    }
  }
-  
+
  function handleLeftKey() {
    let v = value - incrementFactor
-    if(isWithinLimit(v)) {
+    if (isWithinLimit(v)) {
      value = v
      dispatch("change", { color: value })
    }
@ -37,13 +36,12 @@

  function handleRightKey() {
    let v = value + incrementFactor
-    if(isWithinLimit(v)) {
+    if (isWithinLimit(v)) {
      value = v
      dispatch("change", { color: value })
-
    }
  }
-  
+
  $: thumbPosition =
    type === "hue" ? sliderWidth * (value / 360) : sliderWidth * value

@ -53,7 +51,7 @@
 <div
  tabindex="0"
  bind:this={slider}
-  use:keyevents={{37: handleLeftKey, 39: handleRightKey}}
+  use:keyevents={{ 37: handleLeftKey, 39: handleRightKey }}
  bind:clientWidth={sliderWidth}
  on:click={event => onSliderChange(event.clientX)}
  class="color-format-slider"
@ -77,7 +75,7 @@
    margin: 10px 0px;
    border: 1px solid #e8e8ef;
    cursor: pointer;
-    outline-color:  #003cb0;
+    outline-color: #003cb0;
    outline-width: thin;
  }

--- a/packages/builder/src/components/userInterface/Colorpicker/components/Swatch.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/components/Swatch.svelte
@ -1,15 +1,34 @@
 <script>
-  import { createEventDispatcher } from "svelte";
-  import { fade } from "svelte/transition";
-  import CheckedBackground from "./CheckedBackground.svelte";
-  import { keyevents } from "../actions";
+  import { createEventDispatcher } from "svelte"
+  import { fade } from "svelte/transition"
+  import CheckedBackground from "./CheckedBackground.svelte"
+  import { keyevents } from "../actions"

-  export let hovered = false;
-  export let color = "#fff";
+  export let hovered = false
+  export let color = "#fff"

-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher()
 </script>

+<div class="space">
+  <CheckedBackground borderRadius="6px">
+    <div
+      tabindex="0"
+      use:keyevents={{ Enter: () => dispatch('click') }}
+      in:fade
+      title={color}
+      class="swatch"
+      style={`background: ${color};`}
+      on:mouseover={() => (hovered = true)}
+      on:mouseleave={() => (hovered = false)}
+      on:click|self>
+      {#if hovered}
+        <span in:fade on:click={() => dispatch('removeswatch')} />
+      {/if}
+    </div>
+  </CheckedBackground>
+</div>
+
 <style>
  .swatch {
    position: relative;
@ -47,22 +66,3 @@
    bottom: 3px;
  }
 </style>
-
-<div class="space">
-  <CheckedBackground borderRadius="6px">
-    <div
-      tabindex="0"
-      use:keyevents={{ Enter: () => dispatch('click') }}
-      in:fade
-      title={color}
-      class="swatch"
-      style={`background: ${color};`}
-      on:mouseover={() => (hovered = true)}
-      on:mouseleave={() => (hovered = false)}
-      on:click|self>
-      {#if hovered}
-        <span in:fade on:click={() => dispatch('removeswatch')} />
-      {/if}
-    </div>
-  </CheckedBackground>
-</div>
--- a/packages/builder/src/pages/[application]/deploy/_layout.svelte
+++ b/packages/builder/src/pages/[application]/deploy/_layout.svelte
@ -0,0 +1 @@
+<slot />
--- a/packages/builder/src/pages/[application]/deploy/index.svelte
+++ b/packages/builder/src/pages/[application]/deploy/index.svelte
@ -0,0 +1,85 @@
+<script>
+  import { Button } from "@budibase/bbui"
+  import { store } from "builderStore"
+  import { notifier } from "builderStore/store/notifications"
+  import api from "builderStore/api"
+  import Spinner from "components/common/Spinner.svelte"
+
+  let deployed = false
+  let loading = false
+
+  $: appId = $store.appId
+
+  async function deployApp() {
+    loading = true
+    const DEPLOY_URL = `/deploy`
+
+    try {
+      notifier.info("Starting Deployment..")
+      const response = await api.post(DEPLOY_URL)
+      const json = await response.json()
+      if (response.status !== 200) {
+        throw new Error()
+      }
+
+      notifier.success(`Your Deployment is Complete.`)
+      deployed = true
+      loading = false
+    } catch (err) {
+      notifier.danger("Deployment unsuccessful. Please try again later.")
+      loading = false
+    }
+  }
+</script>
+
+<section>
+  <div>
+    <h4>It's time to shine!</h4>
+    {#if deployed}
+      <a target="_blank" href={`https://${appId}.app.budi.live/${appId}`}>
+        View App
+      </a>
+    {:else}
+      <Button secondary medium on:click={deployApp}>
+        Deploy App
+        {#if loading}
+          <Spinner ratio={'0.5'} />
+        {/if}
+      </Button>
+    {/if}
+  </div>
+  <img src="/_builder/assets/deploy-rocket.jpg" />
+</section>
+
+<style>
+  img {
+    width: 100%;
+    height: 100%;
+  }
+
+  h4 {
+    color: var(--white);
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: 30px;
+  }
+
+  section {
+    position: relative;
+  }
+
+  div {
+    position: absolute;
+    display: flex;
+    text-align: center;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    left: 0;
+    right: 0;
+    top: 20%;
+    margin-left: auto;
+    margin-right: auto;
+    width: 50%;
+  }
+</style>
--- a/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte
+++ b/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte
@ -14,9 +14,9 @@
    if ($leftover) {
      // Get the correct screen children.
      const screenChildren = $store.pages[$params.page]._screens.find(
-        screen => 
-          (screen.props._instanceName === $params.screen 
-          || screen.props._instanceName === decodeURIComponent($params.screen))
+        screen =>
+          screen.props._instanceName === $params.screen ||
+          screen.props._instanceName === decodeURIComponent($params.screen)
      ).props._children
      findComponent(componentIds, screenChildren)
    }
@ -51,8 +51,7 @@
    })

    // Select Component!
-    if (componentToSelect)
-      store.selectComponent(componentToSelect)
+    if (componentToSelect) store.selectComponent(componentToSelect)
  }
 </script>

--- a/packages/cli/src/commands/run/runHandler.js
+++ b/packages/cli/src/commands/run/runHandler.js
@ -8,7 +8,7 @@ module.exports = ({ dir }) => {

  // dont make this a variable or top level require
  // ti will cause environment module to be loaded prematurely
-  require("@budibase/server/src/app")().then(server => {
+  return require("@budibase/server/src/app")().then(server => {
    server.on("close", () => console.log("Server Closed"))
    console.log(`Budibase running on ${JSON.stringify(server.address())}`)
  })
--- a/packages/client/src/createApp.js
+++ b/packages/client/src/createApp.js
@ -2,7 +2,7 @@ import { attachChildren } from "./render/attachChildren"
 import { createTreeNode } from "./render/prepareRenderComponent"
 import { screenRouter } from "./render/screenRouter"
 import { createStateManager } from "./state/stateManager"
-import { getAppId } from "./render/getAppId"
+import { parseAppIdFromCookie } from "./render/getAppId"

 export const createApp = ({
  componentLibraries,
@ -38,7 +38,7 @@ export const createApp = ({
      window,
    })
    const fallbackPath = window.location.pathname.replace(
-      getAppId(window.document.cookie),
+      parseAppIdFromCookie(window.document.cookie),
      ""
    )
    routeTo(currentUrl || fallbackPath)
--- a/packages/client/src/index.js
+++ b/packages/client/src/index.js
@ -1,6 +1,6 @@
 import { createApp } from "./createApp"
 import { builtins, builtinLibName } from "./render/builtinComponents"
-import { getAppId } from "./render/getAppId"
+import { parseAppIdFromCookie } from "./render/getAppId"

 /**
 * create a web application from static budibase definition files.
@ -9,7 +9,7 @@ import { getAppId } from "./render/getAppId"
 export const loadBudibase = async opts => {
  const _window = (opts && opts.window) || window
  // const _localStorage = (opts && opts.localStorage) || localStorage
-  const appId = getAppId(_window.document.cookie)
+  const appId = parseAppIdFromCookie(_window.document.cookie)
  const frontendDefinition = _window["##BUDIBASE_FRONTEND_DEFINITION##"]

  const user = {}
--- a/packages/client/src/render/getAppId.js
+++ b/packages/client/src/render/getAppId.js
@ -1,4 +1,4 @@
-export const getAppId = docCookie => {
+export const parseAppIdFromCookie = docCookie => {
  const cookie =
    docCookie.split(";").find(c => c.trim().startsWith("budibase:token")) ||
    docCookie.split(";").find(c => c.trim().startsWith("builder:token"))
--- a/packages/client/src/render/screenRouter.js
+++ b/packages/client/src/render/screenRouter.js
@ -1,6 +1,6 @@
 import regexparam from "regexparam"
 import { appStore } from "../state/store"
-import { getAppId } from "./getAppId"
+import { parseAppIdFromCookie } from "./getAppId"

 export const screenRouter = ({ screens, onScreenSelected, window }) => {
  const makeRootedPath = url => {
@ -9,7 +9,7 @@ export const screenRouter = ({ screens, onScreenSelected, window }) => {
      (window.location.hostname === "localhost" ||
        window.location.hostname === "127.0.0.1")
    ) {
-      const appId = getAppId(window.document.cookie)
+      const appId = parseAppIdFromCookie(window.document.cookie)
      if (url) {
        if (url.startsWith(appId)) return url
        return `/${appId}${url.startsWith("/") ? "" : "/"}${url}`
--- a/packages/server/.env.template
+++ b/packages/server/.env.template
@ -12,4 +12,7 @@ JWT_SECRET={{cookieKey1}}
 PORT=4001 

 # error level for koa-pino
-LOG_LEVEL=error
+LOG_LEVEL=error
+
+DEPLOYMENT_CREDENTIALS_URL="https://dt4mpwwap8.execute-api.eu-west-1.amazonaws.com/prod/"
+DEPLOYMENT_DB_URL="https://couchdb.budi.live:5984"
--- a/packages/server/Dockerfile
+++ b/packages/server/Dockerfile
@ -2,6 +2,9 @@ FROM node:12-alpine

 WORKDIR /app

+ENV CLOUD=1
+ENV COUCH_DB_URL=https://couchdb.budi.live:5984
+
 # copy files and install dependencies
 COPY . ./
 RUN yarn 
--- a/packages/server/builder/assets/deploy-rocket.jpg
+++ b/packages/server/builder/assets/deploy-rocket.jpg
--- a/packages/server/package.json
+++ b/packages/server/package.json
@ -46,6 +46,7 @@
    "@budibase/core": "^0.0.32",
    "@koa/router": "^8.0.0",
    "@sendgrid/mail": "^7.1.1",
+    "aws-sdk": "^2.706.0",
    "bcryptjs": "^2.4.3",
    "dotenv": "^8.2.0",
    "electron": "^9.0.4",
@ -63,6 +64,7 @@
    "koa-static": "^5.0.0",
    "lodash": "^4.17.13",
    "mustache": "^4.0.1",
+    "node-fetch": "^2.6.0",
    "pino-pretty": "^4.0.0",
    "pouchdb": "^7.2.1",
    "pouchdb-all-dbs": "^1.0.2",
--- a/packages/server/src/api/controllers/deploy/aws.js
+++ b/packages/server/src/api/controllers/deploy/aws.js
@ -0,0 +1,118 @@
+const fs = require("fs")
+const AWS = require("aws-sdk")
+const fetch = require("node-fetch")
+const { budibaseAppsDir } = require("../../../utilities/budibaseDir")
+
+async function invalidateCDN(cfDistribution, appId) {
+  const cf = new AWS.CloudFront({})
+
+  return cf
+    .createInvalidation({
+      DistributionId: cfDistribution,
+      InvalidationBatch: {
+        CallerReference: appId,
+        Paths: {
+          Quantity: 1,
+          Items: [`/assets/${appId}/*`],
+        },
+      },
+    })
+    .promise()
+}
+
+exports.fetchTemporaryCredentials = async function() {
+  const response = await fetch(process.env.DEPLOYMENT_CREDENTIALS_URL, {
+    method: "POST",
+    body: JSON.stringify({
+      apiKey: process.env.BUDIBASE_API_KEY,
+    }),
+  })
+
+  if (response.status !== 200) {
+    throw new Error(
+      `Error fetching temporary credentials for api key: ${process.env.BUDIBASE_API_KEY}`
+    )
+  }
+
+  const json = await response.json()
+
+  return json
+}
+
+const CONTENT_TYPE_MAP = {
+  html: "text/html",
+  css: "text/css",
+  js: "application/javascript",
+}
+
+/**
+ * Recursively walk a directory tree and execute a callback on all files.
+ * @param {String} dirPath - Directory to traverse
+ * @param {Function} callback - callback to execute on files
+ */
+function walkDir(dirPath, callback) {
+  for (let filename of fs.readdirSync(dirPath)) {
+    const filePath = `${dirPath}/${filename}`
+    const stat = fs.lstatSync(filePath)
+
+    if (stat.isFile()) {
+      callback(filePath)
+    } else {
+      walkDir(filePath, callback)
+    }
+  }
+}
+
+exports.uploadAppAssets = async function({
+  appId,
+  credentials,
+  bucket,
+  cfDistribution,
+  accountId,
+}) {
+  AWS.config.update({
+    accessKeyId: credentials.AccessKeyId,
+    secretAccessKey: credentials.SecretAccessKey,
+    sessionToken: credentials.SessionToken,
+  })
+
+  const s3 = new AWS.S3({
+    params: {
+      Bucket: bucket,
+    },
+  })
+
+  const appAssetsPath = `${budibaseAppsDir()}/${appId}/public`
+
+  const appPages = fs.readdirSync(appAssetsPath)
+
+  const uploads = []
+
+  for (let page of appPages) {
+    walkDir(`${appAssetsPath}/${page}`, function prepareUploadsForS3(filePath) {
+      const fileExtension = [...filePath.split(".")].pop()
+      const fileBytes = fs.readFileSync(filePath)
+
+      const upload = s3
+        .upload({
+          Key: filePath.replace(appAssetsPath, `assets/${appId}`),
+          Body: fileBytes,
+          ContentType: CONTENT_TYPE_MAP[fileExtension],
+          Metadata: {
+            accountId,
+          },
+        })
+        .promise()
+
+      uploads.push(upload)
+    })
+  }
+
+  try {
+    await Promise.all(uploads)
+    await invalidateCDN(cfDistribution, appId)
+  } catch (err) {
+    console.error("Error uploading budibase app assets to s3", err)
+    throw err
+  }
+}
--- a/packages/server/src/api/controllers/deploy/index.js
+++ b/packages/server/src/api/controllers/deploy/index.js
@ -0,0 +1,63 @@
+const CouchDB = require("pouchdb")
+const PouchDB = require("../../../db")
+const { uploadAppAssets, fetchTemporaryCredentials } = require("./aws")
+
+function replicate(local, remote) {
+  return new Promise((resolve, reject) => {
+    const replication = local.sync(remote)
+
+    replication.on("complete", () => resolve())
+    replication.on("error", err => reject(err))
+  })
+}
+
+async function replicateCouch({ instanceId, clientId, credentials }) {
+  const databases = [`client_${clientId}`, "client_app_lookup", instanceId]
+
+  const replications = databases.map(localDbName => {
+    const localDb = new PouchDB(localDbName)
+    const remoteDb = new CouchDB(
+      `${process.env.DEPLOYMENT_DB_URL}/${localDbName}`,
+      {
+        auth: {
+          ...credentials,
+        },
+      }
+    )
+
+    return replicate(localDb, remoteDb)
+  })
+
+  await Promise.all(replications)
+}
+
+exports.deployApp = async function(ctx) {
+  try {
+    const clientAppLookupDB = new PouchDB("client_app_lookup")
+    const { clientId } = await clientAppLookupDB.get(ctx.user.appId)
+
+    ctx.log.info(`Uploading assets for appID ${ctx.user.appId} assets to s3..`)
+    const credentials = await fetchTemporaryCredentials()
+
+    await uploadAppAssets({
+      clientId,
+      appId: ctx.user.appId,
+      ...credentials,
+    })
+
+    // replicate the DB to the couchDB cluster in prod
+    ctx.log.info("Replicating local PouchDB to remote..")
+    await replicateCouch({
+      instanceId: ctx.user.instanceId,
+      clientId,
+      credentials: credentials.couchDbCreds,
+    })
+
+    ctx.body = {
+      status: "SUCCESS",
+      completed: Date.now(),
+    }
+  } catch (err) {
+    ctx.throw(err.status || 500, `Deployment Failed: ${err.message}`)
+  }
+}
--- a/packages/server/src/api/controllers/static.js
+++ b/packages/server/src/api/controllers/static.js
@ -7,6 +7,7 @@ const {
 const setBuilderToken = require("../../utilities/builder/setBuilderToken")
 const { ANON_LEVEL_ID } = require("../../utilities/accessLevels")
 const jwt = require("jsonwebtoken")
+const fetch = require("node-fetch")

 exports.serveBuilder = async function(ctx) {
  let builderPath = resolve(__dirname, "../../../builder")
@ -17,21 +18,29 @@ exports.serveBuilder = async function(ctx) {
 }

 exports.serveApp = async function(ctx) {
+  const mainOrAuth = ctx.isAuthenticated ? "main" : "unauthenticated"
+
  // default to homedir
  const appPath = resolve(
    budibaseAppsDir(),
    ctx.params.appId,
    "public",
-    ctx.isAuthenticated ? "main" : "unauthenticated"
+    mainOrAuth
  )
+
+  let appId = ctx.params.appId
+  if (process.env.CLOUD) {
+    appId = ctx.subdomains[1]
+  }
+
  // only set the appId cookie for /appId .. we COULD check for valid appIds
  // but would like to avoid that DB hit
-  const looksLikeAppId = /^[0-9a-f]{32}$/.test(ctx.params.appId)
+  const looksLikeAppId = /^[0-9a-f]{32}$/.test(appId)
  if (looksLikeAppId && !ctx.isAuthenticated) {
    const anonUser = {
      userId: "ANON",
      accessLevelId: ANON_LEVEL_ID,
-      appId: ctx.params.appId,
+      appId,
    }
    const anonToken = jwt.sign(anonUser, ctx.config.jwtSecret)
    ctx.cookies.set("budibase:token", anonToken, {
@ -40,16 +49,28 @@ exports.serveApp = async function(ctx) {
    })
  }

+  if (process.env.CLOUD) {
+    const S3_URL = `https://${appId}.app.budi.live/assets/${appId}/${mainOrAuth}/${ctx.file ||
+      "index.production.html"}`
+
+    const response = await fetch(S3_URL)
+    const body = await response.text()
+    ctx.body = body
+    return
+  }
+
  await send(ctx, ctx.file || "index.html", { root: ctx.devPath || appPath })
 }

 exports.serveAppAsset = async function(ctx) {
  // default to homedir
+  const mainOrAuth = ctx.isAuthenticated ? "main" : "unauthenticated"
+
  const appPath = resolve(
    budibaseAppsDir(),
    ctx.user.appId,
    "public",
-    ctx.isAuthenticated ? "main" : "unauthenticated"
+    mainOrAuth
  )

  await send(ctx, ctx.file, { root: ctx.devPath || appPath })
@ -73,5 +94,17 @@ exports.serveComponentLibrary = async function(ctx) {
    )
  }

+  if (process.env.CLOUD) {
+    const appId = ctx.user.appId
+    const S3_URL = encodeURI(
+      `https://${appId}.app.budi.live/assets/componentlibrary/${ctx.query.library}/dist/index.js`
+    )
+    const response = await fetch(S3_URL)
+    const body = await response.text()
+    ctx.type = "application/javascript"
+    ctx.body = body
+    return
+  }
+
  await send(ctx, "/index.js", { root: componentLibraryPath })
 }
--- a/packages/server/src/api/index.js
+++ b/packages/server/src/api/index.js
@ -7,6 +7,7 @@ const {
  authRoutes,
  pageRoutes,
  userRoutes,
+  deployRoutes,
  instanceRoutes,
  clientRoutes,
  applicationRoutes,
@ -82,6 +83,9 @@ router.use(instanceRoutes.allowedMethods())

 router.use(workflowRoutes.routes())
 router.use(workflowRoutes.allowedMethods())
+
+router.use(deployRoutes.routes())
+router.use(deployRoutes.allowedMethods())
 // end auth routes

 router.use(pageRoutes.routes())
--- a/packages/server/src/api/routes/deploy.js
+++ b/packages/server/src/api/routes/deploy.js
@ -0,0 +1,10 @@
+const Router = require("@koa/router")
+const controller = require("../controllers/deploy")
+const authorized = require("../../middleware/authorized")
+const { BUILDER } = require("../../utilities/accessLevels")
+
+const router = Router()
+
+router.post("/deploy", authorized(BUILDER), controller.deployApp)
+
+module.exports = router
--- a/packages/server/src/api/routes/index.js
+++ b/packages/server/src/api/routes/index.js
@ -11,9 +11,11 @@ const staticRoutes = require("./static")
 const componentRoutes = require("./component")
 const workflowRoutes = require("./workflow")
 const accesslevelRoutes = require("./accesslevel")
+const deployRoutes = require("./deploy")
 const apiKeysRoutes = require("./apikeys")

 module.exports = {
+  deployRoutes,
  authRoutes,
  pageRoutes,
  userRoutes,
--- a/packages/server/src/middleware/authenticated.js
+++ b/packages/server/src/middleware/authenticated.js
@ -60,6 +60,13 @@ module.exports = async (ctx, next) => {
  await next()
 }

+/**
+ * Return the full access level object either from constants
+ * or the database based on the access level ID passed.
+ *
+ * @param {*} instanceId - instanceId of the user
+ * @param {*} accessLevelId - the id of the users access level
+ */
 const getAccessLevel = async (instanceId, accessLevelId) => {
  if (
    accessLevelId === POWERUSER_LEVEL_ID ||
--- a/packages/server/src/utilities/builder/buildPage.js
+++ b/packages/server/src/utilities/builder/buildPage.js
@ -55,6 +55,8 @@ const buildIndexHtml = async (config, appId, pageName, appPath, pkg) => {
    stylesheets: (pkg.page.stylesheets || []).map(stylesheetUrl),
    screenStyles: pkg.screens.filter(s => s._css).map(s => s._css),
    pageStyle: pkg.page._css,
+    appId,
+    pageName,
  }

  const indexHtmlTemplate = await readFile(
@ -63,10 +65,16 @@ const buildIndexHtml = async (config, appId, pageName, appPath, pkg) => {
  )

  const indexHtmlPath = join(appPublicPath, "index.html")
+  const deployableHtmlPath = join(appPublicPath, "index.production.html")

  const indexHtml = sqrl.Render(indexHtmlTemplate, templateObj)
+  const deployableHtml = sqrl.Render(indexHtmlTemplate, {
+    ...templateObj,
+    production: true,
+  })

  await writeFile(indexHtmlPath, indexHtml, { flag: "w+" })
+  await writeFile(deployableHtmlPath, deployableHtml, { flag: "w+" })
 }

 const buildFrontendAppDefinition = async (config, appId, pageName, pkg) => {
--- a/packages/server/src/utilities/builder/index.template.html
+++ b/packages/server/src/utilities/builder/index.template.html
@ -27,23 +27,34 @@
    {{ /each }}

    {{ each(options.screenStyles) }}
+    {{ if(options.production) }}
+    <link rel='stylesheet' href='/assets/{{ appId }}/{{ pageName }}{{ @this }}'>
+    {{#else}}
    <link rel='stylesheet' href='/assets{{ @this }}'>
+    {{ /if }}
    {{ /each }}

    {{ if(options.pageStyle) }}
+    {{ if(options.production) }}
+    <link rel='stylesheet' href='/assets/{{ appId }}/{{ pageName }}{{ pageStyle }}'>
+    {{#else}}
    <link rel='stylesheet' href='/assets{{ pageStyle }}'>
    {{ /if }}
+    {{ /if }}

    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono">

+    {{ if(options.production) }}
+    <script src='/assets/{{ appId }}/{{ pageName }}/clientFrontendDefinition.js'></script>
+    <script src='/assets/{{ appId }}/{{ pageName }}/budibase-client.js'></script>
+    {{#else}}
    <script src='/assets/clientFrontendDefinition.js'></script>
    <script src='/assets/budibase-client.js'></script>
-
+    {{ /if }}
 </head>

 <body id="app">
-
    <script>
        loadBudibase();
    </script>
--- a/packages/server/yarn.lock
+++ b/packages/server/yarn.lock
@ -194,6 +194,20 @@
    lodash "^4.17.13"
    to-fast-properties "^2.0.0"

+"@budibase/client@^0.0.32":
+  version "0.0.32"
+  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.0.32.tgz#76d9f147563a0bf939eae7f32ce75b2a527ba496"
+  integrity sha512-jmCCLn0CUoQbL6h623S5IqK6+GYLqX3WzUTZInSb1SCBOM3pI0eLP5HwTR6s7r42SfD0v9jTWRdyTnHiElNj8A==
+  dependencies:
+    "@nx-js/compiler-util" "^2.0.0"
+    bcryptjs "^2.4.3"
+    deep-equal "^2.0.1"
+    lodash "^4.17.15"
+    lunr "^2.3.5"
+    regexparam "^1.3.0"
+    shortid "^2.2.8"
+    svelte "^3.9.2"
+
 "@budibase/core@^0.0.32":
  version "0.0.32"
  resolved "https://registry.yarnpkg.com/@budibase/core/-/core-0.0.32.tgz#c5d9ab869c5e9596a1ac337aaf041e795b1cc7fa"
@ -849,6 +863,11 @@ array-equal@^1.0.0:
  resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
  integrity sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=

+array-filter@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
+  integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=
+
 array-unique@^0.3.2:
  version "0.3.2"
  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
@ -921,6 +940,28 @@ atomic-sleep@^1.0.0:
  resolved "https://registry.yarnpkg.com/atomic-sleep/-/atomic-sleep-1.0.0.tgz#eb85b77a601fc932cfe432c5acd364a9e2c9075b"
  integrity sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==

+available-typed-arrays@^1.0.0, available-typed-arrays@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5"
+  integrity sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ==
+  dependencies:
+    array-filter "^1.0.0"
+
+aws-sdk@^2.706.0:
+  version "2.706.0"
+  resolved "https://registry.yarnpkg.com/aws-sdk/-/aws-sdk-2.706.0.tgz#09f65e9a91ecac5a635daf934082abae30eca953"
+  integrity sha512-7GT+yrB5Wb/zOReRdv/Pzkb2Qt+hz6B/8FGMVaoysX3NryHvQUdz7EQWi5yhg9CxOjKxdw5lFwYSs69YlSp1KA==
+  dependencies:
+    buffer "4.9.2"
+    events "1.1.1"
+    ieee754 "1.1.13"
+    jmespath "0.15.0"
+    querystring "0.2.0"
+    sax "1.2.1"
+    url "0.10.3"
+    uuid "3.3.2"
+    xml2js "0.4.19"
+
 aws-sign2@~0.7.0:
  version "0.7.0"
  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@ -1143,6 +1184,15 @@ buffer-from@^1.0.0:
  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
  integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==

+buffer@4.9.2:
+  version "4.9.2"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.2.tgz#230ead344002988644841ab0244af8c44bbe3ef8"
+  integrity sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==
+  dependencies:
+    base64-js "^1.0.2"
+    ieee754 "^1.1.4"
+    isarray "^1.0.0"
+
 buffer@^5.1.0, buffer@^5.5.0:
  version "5.6.0"
  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.6.0.tgz#a31749dc7d81d84db08abf937b6b8c4033f62786"
@ -1643,6 +1693,26 @@ decompress-response@^3.3.0:
  dependencies:
    mimic-response "^1.0.0"

+deep-equal@^2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.3.tgz#cad1c15277ad78a5c01c49c2dee0f54de8a6a7b0"
+  integrity sha512-Spqdl4H+ky45I9ByyJtXteOm9CaIrPmnIPmOhrkKGNYWeDgCvJ8jNYVCTjChxW4FqGuZnLHADc8EKRMX6+CgvA==
+  dependencies:
+    es-abstract "^1.17.5"
+    es-get-iterator "^1.1.0"
+    is-arguments "^1.0.4"
+    is-date-object "^1.0.2"
+    is-regex "^1.0.5"
+    isarray "^2.0.5"
+    object-is "^1.1.2"
+    object-keys "^1.1.1"
+    object.assign "^4.1.0"
+    regexp.prototype.flags "^1.3.0"
+    side-channel "^1.0.2"
+    which-boxed-primitive "^1.0.1"
+    which-collection "^1.0.1"
+    which-typed-array "^1.1.2"
+
 deep-equal@~1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
@ -2018,6 +2088,36 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5:
    string.prototype.trimleft "^2.1.1"
    string.prototype.trimright "^2.1.1"

+es-abstract@^1.17.4:
+  version "1.17.6"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.6.tgz#9142071707857b2cacc7b89ecb670316c3e2d52a"
+  integrity sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw==
+  dependencies:
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+    is-callable "^1.2.0"
+    is-regex "^1.1.0"
+    object-inspect "^1.7.0"
+    object-keys "^1.1.1"
+    object.assign "^4.1.0"
+    string.prototype.trimend "^1.0.1"
+    string.prototype.trimstart "^1.0.1"
+
+es-get-iterator@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.0.tgz#bb98ad9d6d63b31aacdc8f89d5d0ee57bcb5b4c8"
+  integrity sha512-UfrmHuWQlNMTs35e1ypnvikg6jCz3SK8v8ImvmDsh36fCVUR1MqoFDiyn0/k52C8NqO3YsO8Oe0azeesNuqSsQ==
+  dependencies:
+    es-abstract "^1.17.4"
+    has-symbols "^1.0.1"
+    is-arguments "^1.0.4"
+    is-map "^2.0.1"
+    is-set "^2.0.1"
+    is-string "^1.0.5"
+    isarray "^2.0.5"
+
 es-to-primitive@^1.2.1:
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@ -2228,6 +2328,11 @@ event-target-shim@^5.0.0:
  resolved "https://registry.yarnpkg.com/event-target-shim/-/event-target-shim-5.0.1.tgz#5d4d3ebdf9583d63a5333ce2deb7480ab2b05789"
  integrity sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==

+events@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
+  integrity sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ=
+
 exec-sh@^0.3.2:
  version "0.3.4"
  resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.3.4.tgz#3a018ceb526cc6f6df2bb504b2bfe8e3a4934ec5"
@ -2883,7 +2988,7 @@ iconv-lite@^0.5.1:
  dependencies:
    safer-buffer ">= 2.1.2 < 3"

-ieee754@^1.1.4:
+ieee754@1.1.13, ieee754@^1.1.4:
  version "1.1.13"
  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.13.tgz#ec168558e95aa181fd87d37f55c32bbcb6708b84"
  integrity sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==
@ -3010,11 +3115,21 @@ is-accessor-descriptor@^1.0.0:
  dependencies:
    kind-of "^6.0.0"

+is-arguments@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.0.4.tgz#3faf966c7cba0ff437fb31f6250082fcf0448cf3"
+  integrity sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==
+
 is-arrayish@^0.2.1:
  version "0.2.1"
  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
  integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=

+is-bigint@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.0.tgz#73da8c33208d00f130e9b5e15d23eac9215601c4"
+  integrity sha512-t5mGUXC/xRheCK431ylNiSkGGpBp8bHENBcENTkDT6ppwPzEVxNGZRvgvmOEfbWkFhA7D2GEuE2mmQTr78sl2g==
+
 is-binary-path@~2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
@ -3022,6 +3137,11 @@ is-binary-path@~2.1.0:
  dependencies:
    binary-extensions "^2.0.0"

+is-boolean-object@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.1.tgz#10edc0900dd127697a92f6f9807c7617d68ac48e"
+  integrity sha512-TqZuVwa/sppcrhUCAYkGBk7w0yxfQQnxq28fjkO53tnK9FQXmdwz2JS5+GjsWQ6RByES1K40nI+yDic5c9/aAQ==
+
 is-buffer@^1.1.5:
  version "1.1.6"
  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@ -3032,6 +3152,11 @@ is-callable@^1.1.4, is-callable@^1.1.5:
  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.5.tgz#f7e46b596890456db74e7f6e976cb3273d06faab"
  integrity sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==

+is-callable@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.0.tgz#83336560b54a38e35e3a2df7afd0454d691468bb"
+  integrity sha512-pyVD9AaGLxtg6srb2Ng6ynWJqkHU9bEM087AKck0w8QwDarTfNcpIYoU8x8Hv2Icm8u6kFJM18Dag8lyqGkviw==
+
 is-ci@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
@ -3058,7 +3183,7 @@ is-data-descriptor@^1.0.0:
  dependencies:
    kind-of "^6.0.0"

-is-date-object@^1.0.1:
+is-date-object@^1.0.1, is-date-object@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
  integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
@ -3133,11 +3258,21 @@ is-installed-globally@^0.3.1:
    global-dirs "^2.0.1"
    is-path-inside "^3.0.1"

+is-map@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.1.tgz#520dafc4307bb8ebc33b813de5ce7c9400d644a1"
+  integrity sha512-T/S49scO8plUiAOA2DBTBG3JHpn1yiw0kRp6dgiZ0v2/6twi5eiB0rHtHFH9ZIrvlWc6+4O+m4zg5+Z833aXgw==
+
 is-npm@^4.0.0:
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-4.0.0.tgz#c90dd8380696df87a7a6d823c20d0b12bbe3c84d"
  integrity sha512-96ECIfh9xtDDlPylNPXhzjsykHsMJZ18ASpaWzQyBr4YRTcVjUvzaHayDAES2oU/3KpljhHUjtSRNiDwi0F0ig==

+is-number-object@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
+  integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==
+
 is-number@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
@ -3174,11 +3309,28 @@ is-regex@^1.0.5:
  dependencies:
    has "^1.0.3"

+is-regex@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.0.tgz#ece38e389e490df0dc21caea2bd596f987f767ff"
+  integrity sha512-iI97M8KTWID2la5uYXlkbSDQIg4F6o1sYboZKKTDpnDQMLtUL86zxhgDet3Q2SriaYsyGqZ6Mn2SjbRKeLHdqw==
+  dependencies:
+    has-symbols "^1.0.1"
+
+is-set@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.1.tgz#d1604afdab1724986d30091575f54945da7e5f43"
+  integrity sha512-eJEzOtVyenDs1TMzSQ3kU3K+E0GUS9sno+F0OBT97xsgcJsF9nXMBtkT9/kut5JEpM7oL7X/0qxR17K3mcwIAA==
+
 is-stream@^1.1.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
  integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=

+is-string@^1.0.4, is-string@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
+  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
+
 is-symbol@^1.0.2:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
@ -3195,11 +3347,31 @@ is-type-of@^1.0.0:
    is-class-hotfix "~0.0.6"
    isstream "~0.1.2"

+is-typed-array@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.3.tgz#a4ff5a5e672e1a55f99c7f54e59597af5c1df04d"
+  integrity sha512-BSYUBOK/HJibQ30wWkWold5txYwMUXQct9YHAQJr8fSwvZoiglcqB0pd7vEN23+Tsi9IUEjztdOSzl4qLVYGTQ==
+  dependencies:
+    available-typed-arrays "^1.0.0"
+    es-abstract "^1.17.4"
+    foreach "^2.0.5"
+    has-symbols "^1.0.1"
+
 is-typedarray@^1.0.0, is-typedarray@~1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
  integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=

+is-weakmap@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
+  integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==
+
+is-weakset@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.1.tgz#e9a0af88dbd751589f5e50d80f4c98b780884f83"
+  integrity sha512-pi4vhbhVHGLxohUw7PhGsueT4vRGFoXhP7+RGN0jKIv9+8PWYCQTqtADngrxOm2g46hoH0+g8uZZBzMrvVGDmw==
+
 is-windows@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@ -3220,11 +3392,16 @@ isarray@0.0.1:
  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
  integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=

-isarray@1.0.0, isarray@~1.0.0:
+isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
  integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=

+isarray@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
+  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
+
 isbinaryfile@^4.0.6:
  version "4.0.6"
  resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-4.0.6.tgz#edcb62b224e2b4710830b67498c8e4e5a4d2610b"
@ -3661,7 +3838,7 @@ jest@^24.8.0:
    import-local "^2.0.0"
    jest-cli "^24.9.0"

-jmespath@^0.15.0:
+jmespath@0.15.0, jmespath@^0.15.0:
  version "0.15.0"
  resolved "https://registry.yarnpkg.com/jmespath/-/jmespath-0.15.0.tgz#a3f222a9aae9f966f5d27c796510e28091764217"
  integrity sha1-o/Iiqarp+Wb10nx5ZRDigJF2Qhc=
@ -4512,6 +4689,11 @@ node-fetch@2.4.1:
  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.4.1.tgz#b2e38f1117b8acbedbe0524f041fb3177188255d"
  integrity sha512-P9UbpFK87NyqBZzUuDBDz4f6Yiys8xm8j7ACDbi6usvFm6KItklQUKjeoqTrYS/S1k6I8oaOC2YLLDr/gg26Mw==

+node-fetch@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd"
+  integrity sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==
+
 node-gyp-build@~4.1.0:
  version "4.1.1"
  resolved "https://registry.yarnpkg.com/node-gyp-build/-/node-gyp-build-4.1.1.tgz#d7270b5d86717068d114cc57fff352f96d745feb"
@ -4637,6 +4819,14 @@ object-inspect@^1.7.0:
  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.7.0.tgz#f4f6bd181ad77f006b5ece60bd0b6f398ff74a67"
  integrity sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw==

+object-is@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.2.tgz#c5d2e87ff9e119f78b7a088441519e2eec1573b6"
+  integrity sha512-5lHCz+0uufF6wZ7CRFWJN3hp8Jqblpgve06U5CMQ3f//6iDjPr2PEo9MWCjEssDsa+UZEL4PkFpr+BMop6aKzQ==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
+
 object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.0.6, object-keys@^1.1.1:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@ -5160,6 +5350,11 @@ pump@^3.0.0:
    end-of-stream "^1.1.0"
    once "^1.3.1"

+punycode@1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
+  integrity sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=
+
 punycode@^1.3.2:
  version "1.4.1"
  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
@ -5192,6 +5387,11 @@ qs@~6.5.2:
  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
  integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==

+querystring@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
+  integrity sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=
+
 quick-format-unescaped@^4.0.1:
  version "4.0.1"
  resolved "https://registry.yarnpkg.com/quick-format-unescaped/-/quick-format-unescaped-4.0.1.tgz#437a5ea1a0b61deb7605f8ab6a8fd3858dbeb701"
@ -5358,6 +5558,19 @@ regex-not@^1.0.0, regex-not@^1.0.2:
    extend-shallow "^3.0.2"
    safe-regex "^1.1.0"

+regexp.prototype.flags@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
+  integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+
+regexparam@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f"
+  integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==
+
 regexpp@^2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
@ -5593,7 +5806,12 @@ sanitize-filename@^1.6.2, sanitize-filename@^1.6.3:
  dependencies:
    truncate-utf8-bytes "^1.0.0"

-sax@^1.2.4:
+sax@1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.1.tgz#7b8e656190b228e81a66aea748480d828cd2d37a"
+  integrity sha1-e45lYZCyKOgaZq6nSEgNgozS03o=
+
+sax@>=0.6.0, sax@^1.2.4:
  version "1.2.4"
  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
  integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
@ -5686,6 +5904,14 @@ shortid@^2.2.8:
  dependencies:
    nanoid "^2.1.0"

+side-channel@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.2.tgz#df5d1abadb4e4bf4af1cd8852bf132d2f7876947"
+  integrity sha512-7rL9YlPHg7Ancea1S96Pa8/QWb4BtXL/TZvS6B8XFetGBeuhAsfmUspK6DokBeZ64+Kj9TCNRD/30pVz1BvQNA==
+  dependencies:
+    es-abstract "^1.17.0-next.1"
+    object-inspect "^1.7.0"
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
  version "3.0.3"
  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@ -5938,7 +6164,7 @@ string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0:
    is-fullwidth-code-point "^3.0.0"
    strip-ansi "^6.0.0"

-string.prototype.trimend@^1.0.0:
+string.prototype.trimend@^1.0.0, string.prototype.trimend@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz#85812a6b847ac002270f5808146064c995fb6913"
  integrity sha512-LRPxFUaTtpqYsTeNKaFOw3R4bxIzWOnbQ837QfBylo8jIxtcbK/A/sMV7Q+OAV/vWo+7s25pOE10KYSjaSO06g==
@ -5964,7 +6190,7 @@ string.prototype.trimright@^2.1.1:
    es-abstract "^1.17.5"
    string.prototype.trimend "^1.0.0"

-string.prototype.trimstart@^1.0.0:
+string.prototype.trimstart@^1.0.0, string.prototype.trimstart@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz#14af6d9f34b053f7cfc89b72f8f2ee14b9039a54"
  integrity sha512-XxZn+QpvrBI1FOcg6dIpxUPgWCPuNXvMD72aaRaUQv1eD4e/Qy8i/hFTe0BUmD60p/QA6bh1avmuPTfNjqVWRw==
@ -6094,6 +6320,11 @@ supports-color@^7.1.0:
  dependencies:
    has-flag "^4.0.0"

+svelte@^3.9.2:
+  version "3.24.0"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.24.0.tgz#6565a42c9705796fa66c6abb4fedc09f4323a4a8"
+  integrity sha512-VFXom6EP2DK83kxy4ZlBbaZklSbZIrpNH3oNXlPYHJUuW4q1OuAr3ZoYbfIVTVYPDgrI7Yq0gQcOhDlAtO4qfw==
+
 symbol-tree@^3.2.2:
  version "3.2.4"
  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
@ -6458,6 +6689,14 @@ url-parse-lax@^3.0.0:
  dependencies:
    prepend-http "^2.0.0"

+url@0.10.3:
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/url/-/url-0.10.3.tgz#021e4d9c7705f21bbf37d03ceb58767402774c64"
+  integrity sha1-Ah5NnHcF8hu/N9A861h2dAJ3TGQ=
+  dependencies:
+    punycode "1.3.2"
+    querystring "0.2.0"
+
 use@^3.1.0:
  version "3.1.1"
  resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
@ -6483,6 +6722,11 @@ util.promisify@^1.0.0:
    has-symbols "^1.0.1"
    object.getownpropertydescriptors "^2.1.0"

+uuid@3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
+  integrity sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==
+
 uuid@3.3.3:
  version "3.3.3"
  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.3.tgz#4568f0216e78760ee1dbf3a4d2cf53e224112866"
@ -6579,11 +6823,44 @@ whatwg-url@^7.0.0:
    tr46 "^1.0.1"
    webidl-conversions "^4.0.2"

+which-boxed-primitive@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.1.tgz#cbe8f838ebe91ba2471bb69e9edbda67ab5a5ec1"
+  integrity sha512-7BT4TwISdDGBgaemWU0N0OU7FeAEJ9Oo2P1PHRm/FCWoEi2VLWC9b6xvxAA3C/NMpxg3HXVgi0sMmGbNUbNepQ==
+  dependencies:
+    is-bigint "^1.0.0"
+    is-boolean-object "^1.0.0"
+    is-number-object "^1.0.3"
+    is-string "^1.0.4"
+    is-symbol "^1.0.2"
+
+which-collection@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
+  integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==
+  dependencies:
+    is-map "^2.0.1"
+    is-set "^2.0.1"
+    is-weakmap "^2.0.1"
+    is-weakset "^2.0.1"
+
 which-module@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
  integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=

+which-typed-array@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.2.tgz#e5f98e56bda93e3dac196b01d47c1156679c00b2"
+  integrity sha512-KT6okrd1tE6JdZAy3o2VhMoYPh3+J6EMZLyrxBQsZflI1QCZIxMrIYLkosd8Twf+YfknVIHmYQPgJt238p8dnQ==
+  dependencies:
+    available-typed-arrays "^1.0.2"
+    es-abstract "^1.17.5"
+    foreach "^2.0.5"
+    function-bind "^1.1.1"
+    has-symbols "^1.0.1"
+    is-typed-array "^1.1.3"
+
 which@^1.2.9, which@^1.3.0:
  version "1.3.1"
  resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
@ -6676,6 +6953,19 @@ xml-name-validator@^3.0.0:
  resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
  integrity sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==

+xml2js@0.4.19:
+  version "0.4.19"
+  resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.19.tgz#686c20f213209e94abf0d1bcf1efaa291c7827a7"
+  integrity sha512-esZnJZJOiJR9wWKMyuvSE1y6Dq5LCuJanqhxslH2bxM6duahNZ+HMpCLhBQGZkbX6xRf8x1Y2eJlgt2q3qo49Q==
+  dependencies:
+    sax ">=0.6.0"
+    xmlbuilder "~9.0.1"
+
+xmlbuilder@~9.0.1:
+  version "9.0.7"
+  resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-9.0.7.tgz#132ee63d2ec5565c557e20f4c22df9aca686b10d"
+  integrity sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0=
+
 "xtend@>=4.0.0 <4.1.0-0", xtend@^4.0.2, xtend@~4.0.0:
  version "4.0.2"
  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
--- a/packages/standard-components/src/DataForm.svelte
+++ b/packages/standard-components/src/DataForm.svelte
@ -53,9 +53,9 @@
        state[model] = state[model] ? [...state[model], json] : [json]
        return state
      })
-      
+
      // wipe form, if new record, otherwise update
-      // model to get new _rev 
+      // model to get new _rev
      if (isNew) {
        resetForm()
      } else {
@ -82,7 +82,7 @@
      }
    }
    record = {
-      modelId: model
+      modelId: model,
    }
  }

@ -118,21 +118,23 @@

  onMount(() => {
    const routeParams = _bb.routeParams()
-    recordId = Object.keys(routeParams).length > 0 &&  (routeParams.id || routeParams[0])
+    recordId =
+      Object.keys(routeParams).length > 0 && (routeParams.id || routeParams[0])
    isNew = !recordId || recordId === "new"

    if (isNew) {
      record = { modelId: model }
    } else {
      const GET_RECORD_URL = `/api/${model}/records/${recordId}`
-      _bb.api.get(GET_RECORD_URL)
+      _bb.api
+        .get(GET_RECORD_URL)
        .then(response => response.json())
        .then(rec => {
          record = rec
          setForm(rec)
        })
-    }    
-	});
+    }
+  })
 </script>

 <form class="form" on:submit|preventDefault>
@ -164,14 +166,14 @@
      <button on:click={save} class:saved>
        {#if saved}
          <div in:fade>
-            <span class:saved style="margin-right: 5px">🎉</span>Success<span class:saved style="margin-left: 5px">🎉</span>
+            <span class:saved style="margin-right: 5px">🎉</span>
+            Success
+            <span class:saved style="margin-left: 5px">🎉</span>
          </div>
        {:else}
-          <div>
-            {buttonText || "Submit Form"}
-          </div>
+          <div>{buttonText || 'Submit Form'}</div>
        {/if}
-      </button>    
+      </button>
    </div>
  </div>
 </form>
@ -243,7 +245,7 @@

  button.saved {
    background-color: green;
-  } 
+  }

  button:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
--- a/packages/standard-components/src/DataFormWide.svelte
+++ b/packages/standard-components/src/DataFormWide.svelte
@ -53,9 +53,9 @@
        state[model] = state[model] ? [...state[model], json] : [json]
        return state
      })
-      
+
      // wipe form, if new record, otherwise update
-      // model to get new _rev 
+      // model to get new _rev
      if (isNew) {
        resetForm()
      } else {
@ -82,7 +82,7 @@
      }
    }
    record = {
-      modelId: model
+      modelId: model,
    }
  }

@ -118,21 +118,23 @@

  onMount(() => {
    const routeParams = _bb.routeParams()
-    recordId = Object.keys(routeParams).length > 0 &&  (routeParams.id || routeParams[0])
+    recordId =
+      Object.keys(routeParams).length > 0 && (routeParams.id || routeParams[0])
    isNew = !recordId || recordId === "new"

    if (isNew) {
      record = { modelId: model }
    } else {
      const GET_RECORD_URL = `/api/${model}/records/${recordId}`
-      _bb.api.get(GET_RECORD_URL)
+      _bb.api
+        .get(GET_RECORD_URL)
        .then(response => response.json())
        .then(rec => {
          record = rec
          setForm(rec)
        })
-    }    
-	});
+    }
+  })
 </script>

 <form class="form" on:submit|preventDefault>
@ -164,14 +166,14 @@
      <button on:click={save} class:saved>
        {#if saved}
          <div in:fade>
-            <span class:saved style="margin-right: 5px">🎉</span>Success<span class:saved style="margin-left: 5px">🎉</span>
+            <span class:saved style="margin-right: 5px">🎉</span>
+            Success
+            <span class:saved style="margin-left: 5px">🎉</span>
          </div>
        {:else}
-          <div>
-            {buttonText || "Submit Form"}
-          </div>
+          <div>{buttonText || 'Submit Form'}</div>
        {/if}
-      </button>    
+      </button>
    </div>
  </div>
 </form>
@ -234,7 +236,7 @@

  button.saved {
    background-color: green;
-  } 
+  }

  button:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
--- a/packages/standard-components/src/List.svelte
+++ b/packages/standard-components/src/List.svelte
@ -32,5 +32,4 @@
  })
 </script>

-<section bind:this={target}>
-</section>
+<section bind:this={target} />
--- a/packages/standard-components/src/Login.svelte
+++ b/packages/standard-components/src/Login.svelte
@ -71,7 +71,7 @@

    <div class="login-button-container">
      <button disabled={loading} on:click={login} class={_buttonClass}>
-        {buttonText || "Login"}
+        {buttonText || 'Login'}
      </button>
    </div>

--- a/packages/standard-components/src/RecordDetail.svelte
+++ b/packages/standard-components/src/RecordDetail.svelte
@ -22,7 +22,7 @@

    let record
    // if srcdoc, then we assume this is the builder preview
-    if(pathParts.length === 0 || pathParts[0] === "srcdoc") {
+    if (pathParts.length === 0 || pathParts[0] === "srcdoc") {
      record = await fetchFirstRecord()
    } else {
      const id = pathParts[pathParts.length - 1]
@ -48,5 +48,4 @@
  })
 </script>

-<section bind:this={target}>
-</section>
+<section bind:this={target} />