WebAppPage

Easily render the pages of your Micro SaaS web app.

When a user logs into your product, they access to your web app.

By default, Shipped redirects the users to the /dashboard page.

The dashboard page is an example of web app page with the sidebar (that's responsive and hides on mobile).

Default /dashboard page

If you want to reuse this template for all the pages of your web app, it's strongly recommended to re-use the <WebAppPage /> component.

The <WebAppPage /> component is a template component that includes:

• the sidebar

• the content to be replaced with your React components, according to the current route

How to add a new web app route

Let's say you want to add a settings page, to let the users set their preferences.

The route you want is /settings, to get it you need to:

• Create the route settings into Routes at src/data/routes.ts

src/data/routes.ts

export enum Routes {
  /* ... */
  settings = "/settings",
  /* ... */
}

• Create the file src/app/settings/page.tsx

• Paste this content (notice currentPage set to Routes.settings):

src/app/settings/page.tsx

import { WebAppPage } from "@/components/templates/WebAppPage/WebAppPage";
import { Routes } from "@/data/routes";

const SettingsPage = () => {
  return <WebAppPage currentPage={Routes.settings} />;
};

export default SettingsPage;

• Update the component <WebAppPage />, scroll down where the routes are handled and add your custom content

src/components/templates/WebAppPage/WebAppPage.tsx

{currentPage === Routes.dashboard && (
  <Center w="100%" flexDir="column">
    <Heading>Welcome</Heading>
  </Center>
)}
{/* Add the route components here */}

For instance add this code (notice that UserSettings is not provided by Shipped, it is used as an example here):

{currentPage === Routes.settings && (
  <UserSettings />
)}