Starchart: Remix routes setup

The past week, I worked on setting up basic user dashboard pages and routes for starchart. These routes involved pages for management, creation, and help for domains and certificates. The ideas was to setup a basic template, such as a heading, and the routes so these could be easily updated once the designs were finished.

Since starchart uses Remix, this was a straightforward process. Routing in remix can be configured by the file structure for the routes(more info here). So, I setup an initial folder structure for the difference pages:

app/routes/
  -- certificates/
    -- index.tsx
    -- instructions.tsx
    -- new.tsx
  -- domains/
     -- $domainId.tsx
     -- index.tsx
     -- new.tsx

This defined the following routes (in same order as above):

• /certificates
• /certificates/instructions
• /certificates/new
• /domains/:domainId
• /domains
• /domains/new

After creating a PR, I got a suggestion to add another component for the header that shows on these pages. So, I thought how I could show the header on all pages without including it everywhere. Initially, I created parent routes for the certificates and domains routes:

app/routes/
  ...
  -- certificates.tsx
  -- domains.tsx
  ...

These only served to include the header, and then rendered the children using the <Outlet />:

import { Outlet } from '@remix-run/react';

import Header from '~/components/header';

export default function DomainsRoute() {
  return (
    <div>
      <Header />
      <main>
        <Outlet />
      </main>
    </div>
  );
}

I got another suggestion to move it up another level so I would not have to include the header in two parent route files. I thought about moving it to the root file. However, this would mean that the header would also render on the login page, or more logic would need to be added to hide the header if the user was not logged in. I tried looking for a way to do this purely through the file structure, and found this helpful blog post.

To summarize, I added a pathless layout route for the index page, and placed my routes inside the __index directory. Thus, my routes would be children of the __index route (which does not have a URL and is simply the layout for these routes). The index page itself is also inside this directory. And since the login page is still separate, it is unaffected:

app/routes/
  -- __index.tsx
  -- login.tsx
  ...
  -- __index/
    -- certificate/
      -- index.tsx
      ...
    -- domains/
      -- index.tsx
      ...
    -- index.tsx

__index.tsx is the same as the previous parent layout routes:

import { Box } from '@chakra-ui/react';
import { Outlet } from '@remix-run/react';
import Header from '~/components/header';

export default function Index() {
  return (
    <Box>
      <Header />
      <main>
        <Outlet />
      </main>
    </Box>
  );
}