Key concepts

Load context

To be added

Data fetching

To be added

Routing

To be added

Internationalisation

See also internationalisation

State management

To be added

Styling

The boilerplate has been styled with plain CSS as a starting point. TailwindCSS has been added to the project, but is optional.

Styles can be found in src/styles directory. The default-theme.css can be quickly changed to switch themes. app.css and reset.css contain global styles, and can be overwritten.

Setup CSS files inside /server/root.tsx:

./root.tsx

 import appStyles from "~/styles/app.css?url";
 import defaultThemeStyles from "~/styles/default-theme.css?url";
 import resetStyles from "~/styles/reset.css?url";
 import tailwindStyles from "~/styles/tailwind.css?url";

...

export function links() {
  return [
    { href: resetStyles, rel: "stylesheet" },
    { href: appStyles, rel: "stylesheet" },
    { href: tailwindStyles, rel: "stylesheet" },
    { href: defaultThemeStyles, rel: "stylesheet" },
    ...
  ]
}

See also sales demo setup

Testing