Manifest and routes

groundfloor.manifest.json tells the Shell about your app: its name, its pages and the order they appear in the navigation, and its colours. gf apps publish sends it along with each release, so the file in your project is the one that counts.

Example

{
  "version": "1.0",
  "appId": "my-first-app",
  "name": "My First App",
  "theme": {
    "primaryColor": "#2563EB",
    "accentColor": "#7C3AED",
    "mode": "light"
  },
  "routes": [
    { "path": "home", "title": "Home", "icon": "Home" },
    { "path": "records", "title": "Records", "icon": "FileText" },
    { "path": "records/:id", "title": "Record", "hidden": true }
  ]
}

remoteUrl is filled in when you publish; leave it empty.

Routes

Each route is one page of your app, at /apps/<app-slug>/<path> on your Shell site.

Add a page in two places: a route here, and the matching page component in src/App.tsx.

Link between pages

Your app lives under /apps/<app-slug>/ on the Shell site, so never write absolute links such as to="/records": they leave your app. Use the starter kit's useAppPath:

import { Link } from "react-router-dom";
import { useAppPath } from "./lib/useAppPath";

export function RecordsLink() {
  return <Link to={useAppPath("records")}>All records</Link>;
}

Don't wrap your app in BrowserRouter either: the Shell already provides the router, and a second one crashes the app.

Name a detail page in the breadcrumb

The Shell builds the breadcrumb from the URL, so a page like records/:id shows the raw ID. Set a readable label once you know it:

import { setBreadcrumbLabel } from "./lib/shellBridge";

useEffect(() => {
  if (record?.name) setBreadcrumbLabel(record.name);
}, [record?.name]);

Theme

The Shell uses these for the frame around your app. See Styling for your own pages.

Next steps

• Styling
• Build your first Shell app