Update

Author: npentrel

assets/operate/spa.png

@@ -4,24 +4,16 @@ linkTitle: "Create a custom web interface"
 weight: 11
 no_list: true
 type: docs
-description: "Create and deploy single page applications on the Viam platform."
+description: "Create and deploy custom web interfaces for your machines as single-page applications without managing hosting and authentication."
 ---
 
-- Deploy front-end apps
--
-
-you can have multiple HTML files
-files have to all be deployed
-
-With single page apps you can create and deploy custom web interfaces for your machines that use a single HTML page.
-Single page apps are accessible from a dedicated URL (`appname_publicnamespace.viamapplications.com`) and hosting and authentication is handled for you.
-
-google SPA and include what exactly that means
+Create and deploy custom web interfaces for your machines as single-page applications without managing hosting and authentication.
+Once deployed, apps are accessible from a dedicated URL (`appname_publicnamespace.viamapplications.com`) and hosting and authentication is handled for you.
 
 When opening an app, users log in and then select a machine they have access to.
 Then your app is rendered and ready for use.
 
-TODO: Example GIF
+{{<imgproc src="/operate/spa.png" resize="400x" declaredimensions=true alt="App screen asking for the org, location, and machine." class="imgzoom shadow">}}
 
 ## Requirements
 
@@ -41,11 +33,25 @@ Then authenticate your CLI session with Viam using one of the following options:
 {{< table >}}
 {{% tablestep number=1 %}}
 
-**Build your single page application** using your preferred framework like React, Vue, Angular, or others.
-Your application should be built and ready for deployment, with all assets compiled into a distributable format.
+**Build your application** using your preferred framework like React, Vue, Angular, or others.
+While you're developing use any machine's credentials.
+For deploying your app you must add code to read the machine API key from your browsers local storage:
 
-TODO: cover dev process
-TODO: how do you connect to the machine / how do you access the api key?
+```ts {class="line-numbers linkable-line-numbers" data-line=""}
+import Cookies from "js-cookie";
+
+let apiKeyId = "";
+let apiKeySecret = "";
+let hostname = "";
+let machineId = "";
+
+machineId = window.location.pathname.split("/")[2];
+({
+  id: apiKeyId,
+  key: apiKeySecret,
+  hostname: hostname,
+} = JSON.parse(Cookies.get(machineId)!));
+```
 
 {{% /tablestep %}}
 {{% tablestep number=2 %}}
@@ -110,44 +116,54 @@ TODO: how do you connect to the machine / how do you access the api key?
 The `applications` field is an array of application objects with the following properties:
 
 <!-- prettier-ignore -->
-| Property     | Type   | Description                                                                                       |
-| ------------ | ------ | ------------------------------------------------------------------------------------------------- |
-| `name`       | string | The name of your application, which will be a part of the app's URL (`name_publicnamespace.viamapplications.com`). For more information on valid names see [](/operate/reference/naming-modules). |
+| Property     | Type   | Description |
+| ------------ | ------ | ----------- |
+| `name`       | string | The name of your application, which will be a part of the app's URL (`name_publicnamespace.viamapplications.com`). For more information on valid names see [](/operate/reference/naming-modules#valid-application-identifiers). |
 | `type` | string | The type of application (currently only `"single_machine"` is supported). |
 | `entrypoint` | string | The path to the HTML entry point for your application. The `entrypoint` field specifies the path to your application's entry point. For example: <ul><li><code>"dist/index.html"</code>: Static content rooted at the `dist` directory</li><li><code>"dist/foo.html"</code>: Static content rooted at the `dist` directory, with `foo.html` as the entry point</li><li><code>"dist/"</code>: Static content rooted at the `dist` directory (assumes `dist/index.html` exists)</li><li><code>"dist/bar/foo.html"</code>: Static content rooted at `dist/bar` with `foo.html` as the entry point</li></ul> |
 
 {{% /tablestep %}}
 {{% tablestep number=3 %}}
+**Register your module** with Viam:
+
+{{< tabs >}}
+{{% tab name="Template" %}}
 
-**Package your app into a module and upload it** to the Viam Registry:
+```sh {class="command-line" data-prompt="$" data-output="3-10"}
+viam module create --name="app-name" --public-namespace="namespace"
+```
 
-TODO: first command doesn't make sense
-don't use module generate
+{{% /tab %}}
+{{% tab name="Example" %}}
 
 ```sh {class="command-line" data-prompt="$" data-output="3-10"}
-viam module build local
-viam module upload module.tar.gz --platform=any
+viam module create --name="air-quality" --public-namespace="naomi"
 ```
 
-TODO: the upload command requires platform & version - is that no longer the case?
+{{% /tab %}}
+{{< /tabs >}}
+
+{{% /tablestep %}}
+{{% tablestep number=4 %}}
 
-For subsequent updates you can use:
+**Package your static files and your <FILE>meta.json</FILE> file and upload them** to the Viam Registry:
 
-```sh {class="command-line" data-prompt="$" data-output="2-10"}
-viam module update
+```sh {class="command-line" data-prompt="$" data-output="3-10"}
+tar -czvf module.tar.gz <static-website-files> meta.json
+viam module upload module.tar.gz --platform=any --version=0.0.1
 ```
 
+For subsequent updates run these commands again with an updated version number.
+
 {{% /tablestep %}}
 {{< /table >}}
 
 ## Accessing your Single Page App
 
-Once your module with the application configuration is uploaded, your application will be available at:
-
-TODO: any extra steps?
+After uploading your module with the application configuration, your application will be available at:
 
 ```
-https://your-app-name.your-public-namespace.viamapps.com
+https://your-app-name_your-public-namespace.viamapplications.com
 ```
 
 Users will be prompted to authenticate with their Viam credentials before accessing your application:
@@ -158,11 +174,15 @@ Users will be prompted to authenticate with their Viam credentials before access
 1. User is redirected to `your-app-name_your-public-namespace.viamapplications.com/machine/{machine-id}`
 1. Your application is rendered with access to the selected machine
 
+## Example
+
+For an example see [Monitor Air Quality with a Fleet of Sensors](/tutorials/control/air-quality-fleet/).
+
 ## Limitations
 
 - Single page apps currently only support single-machine applications
 - All modules with apps must have public visibility
-- There is no versioning or separate deploy step; the page will always render the latest version
+- There is no separate deploy step; the page will always render the latest version
 - Browsers with cookies disabled are not supported
 
 ## Security Considerations
@@ -171,41 +191,3 @@ Users will be prompted to authenticate with their Viam credentials before access
 - Avoid uploading sensitive information in your application code or assets
 - API keys and secrets are stored in the browser's localStorage or sessionStorage
 - Single page apps authenticate users with FusionAuth
-
-## Example
-
-Here's a complete example of creating and uploading a simple React application as a Viam Single Page App:
-
-```bash
-# Create a new React app
-npx create-react-app my-viam-app
-cd my-viam-app
-
-# Build the app
-npm run build
-
-# Create a module with the app
-viam module create --name my-viam-app --public-namespace your-namespace
-
-# Edit meta.json to add the application configuration
-# Add the following to meta.json:
-# "visibility": "public",
-# "applications": [
-#   {
-#     "name": "my-app",
-#     "type": "web",
-#     "entrypoint": "build/index.html"
-#   }
-# ]
-
-# Copy the build directory to the module directory
-cp -r build/ path/to/module/
-
-# Build and upload the module
-viam module build local
-viam module upload module.tar.gz
-```
-
-After the module is approved, your application will be available at `https://my-app.your-public-namespace.viamapps.com`.
-
-https://github.com/bashar-515/sample-app