Client project overview
This section shows how the client side of a Root App is set up. You'll see how the project is structured, what tools it uses, and how to run it locally for testing.
User-interface coding options
The client is a full GUI application written in TypeScript using web tech. You can choose your preferred UI framework like React, Angular, Vue, etc. You can also pull in third-party packages from registries like npm.
Source-code folders and files
This diagram shows the typical structure of the client-side project. The src/ folder contains the main entry points, while the client/ folder includes configuration and build files.
Root API
The Root SDK includes an API of common services to help you build your Root App. There are APIs for both server-side and client-side features. The diagram below outlines the major categories available to each environment, as well as the shared types used across both. Notice that there are relatively few types available to your client; this is by design since Root Apps do most of their work on the server.
Runtime environment
Root App clients run in a browser-like environment. They use ES modules because they're the standard for writing modular, browser-friendly JavaScript.
The client has access to most browser functionality except for native resources (i.e., you won't be able to access the file system, webcam, audio hardware, etc.).
Local testing
Root App clients can be tested locally by running in-browser. The default configuration uses Vite for this testing. There are scripts in the client's package.json file to build the client and run Vite.
"scripts": {
"build": "tsc && vite build",
"client": "vite"
}
To test your client, open a terminal window in the client folder and run the following command:
npm run client
Vite will look for a file named index.html in the current folder. If you'd like to use a different file, you can override the entry point in vite.config.ts.