App Development

Prerequisites

To build an app for the platform it is assumed that you have some basic knowledge of React and that you have Node.js and `pnpm installed.

Scaffolding an App

To create a new app you can use the following command to create an app

generate app

pnpm create @coat-rack/app

Thereafter, you will be asked to enter a name for your app, a new app will be created for you.

An app will then be created in the directory for your app name. Next, move into this directory with cd <your app name>

Next, you will need to install the dependencies for your app, this can be done as follows:

install dependencies

pnpm install

The created app will contain the following:

• Directorymy-app

  • Directorysrc

    • index.tsx - app entrypoint
    • styles.css - app styles
  • Directorypublic

    • manifest.json - app metadata
  • package.json
  • postcss.config.js
  • tailwind.config.ts - config for app styles
  • tsconfig.json
  • vite.config.ts - build config for application

Most of the generated files are to configure the application, the main files that you will work with are index.tsx, styles.css, and manifest.json files

Developing

Starting your App Dev Server

Running the application in dev mode consists of running the following two commands:

1. pnpm watch to run build the app whenever the source files change
2. pnpm serve host the compiled app so it installed on the Coat Rack instance

Once the dev server is running, a message will be logged via the pnpm serve process indicating what the Network address of the app is. Using this URL, the app can then be installed via the App installation on Coat Rack

Running Coat Rack Locally

It’s likely that a developer would want a local Coat Rack instance for the sake of development. This can be done by running the following command which will start up a Coat Rack server on the development machine:

pnpx @coat-rack/server

Once this is up, the Coat Rack app can be visited in the browser from http://localhost:4000

App Entrypoint

The entrypoint for your application is the index.tsx file - this file will be compiled into the module that is loaded to run your application. Apps in Coat Rack are defined as follows:

src/index.tsx

import { App, ProvideAppContext } from "@coat-rack/sdk"
import { Button } from "@coat-rack/ui/components/button"

import "./styles.css"

export const MyApp: App = {
  /**
   *  The Entrypoint for the app
   */
  Entry: ({ context }) => {
    return (
      <ProvideAppContext {...context}>
        <h1 className="bg-red-500">Hello my-app</h1>
        <Button>Click Me</Button>
      </ProvideAppContext>
    )
  },
}

export default MyApp

An App is defined as an object with an Entry property. The Entry here is a react component that is provided with the context prop.

Note

Important functionality related to working with the platform are exported from the @coat-rack/sdk package

App Context

The context prop provided to the ProvideAppContext in order to make it possible to work with the app context in other places, for example if we were to query the database from a component:

src/example-component.tsx

import { DbRecord, ProvideSpace, useAppContext } from "@coat-rack/sdk"
import { useEffect, useState } from "react"

interface AppData {
  name: string
  age: number
}

export const MyComponent = () => {
  const context = useAppContext<AppData>()
  const [data, setData] = useState<DbRecord<AppData>[]>()

  useEffect(() => {
    context.db.query({}).then((users) => setData(users))
  })

  return (
    <ul>
      {data?.map((d) => (
        <ProvideSpace key={d.id} space={d.space}>
          <li className="text-primary">{d.data.name}</li>
        </ProvideSpace>
      ))}
    </ul>
  )
}

Additionally, ProvideSpace allows us to respect the space that a data entry belongs to, this means that any styles needed within the a segment of the UI will match the space in which the database record exists