File structure & architecture basics

Aside from the typical /public, /app/components, /hooks, /types, /utils the folders of interest are:

• /app/queries: GROQ queries to fetch data from Sanity.
  • In the Shopify template also has GraphQL queries
  • Could also include queries to external APIs & other DBs we're integrating with
• /app/routes: Remix routes - refer to their documentation on routing (opens in a new tab)
• /app/routing: handles how we fetch data in the server and resolve URLs in both server & client. See routing section below
• /app/sanity: the Sanity.io project, including schemas and configuration files
  • The Studio itself is rendered in Remix in the /app/routes/manage.$.tsx route
• /app/styles: see styles section below

Localization / translations

The Toolkit is built with localization in mind, and supports locale configuration out of the box.

Every localized document has a locale field & value in them, which is hidden to editors. This is used for, among others:

• resolving the URL of the document
• fetching the correct data in Remix loaders
• displaying proper document previews in the studio
• limiting options in reference fields
• allowing editors to browse entries by locale

So, even for single-locale sites, we recommend setting up documents' schemas as localized in the custom.localized property, if applicable. This will make it effortless to include new locales in the future as websites grow & expand, at negligible overhead and maximum consistency.

@tinloof/sanity-toolkit provides the Sanity components to manage locales in the Studio. As this is not something that requires customization, you can't access it from the template. It's analogous to the official @sanity/document-internationalization package, but with several advantages we won't cover here for brevity.

The front-end logic to handle locales is simpler and contained entirely in the template - refer to /app/routing/urls.ts and parsePath in routing/app/routeLoader.ts.

How routing works

• By default, all Sanity document types that render pages in the front-end are rendered in a single Remix route - /app/routes/$.tsx.
• These document types are listed in the TYPES_WITH_ROUTES array in app/config.ts
• All of these documents include a routePath field, which is used to resolve the URL of the page.
  • routePath is not the entire path in the final URL: it's the part that comes after the locale prefix, if any.
• When linking to documents, their paths are resolved through the getDocumentPath function
  • see app/routing/urls.ts

Styles - TailwindCSS

By default, the templates use TailwindCSS (opens in a new tab) to style components through utility classes. Tailwind uses /app/styles/entry.css as its entrypoint, which we expose to Remix's compiler integration through /app/root.tsx.

Refer to Tailwind's docs on adding custom styles (opens in a new tab) on how to use entry.css.