Project structure

Files and directories

Fluid is separated between the Hydrogen app app/ and the Sanity Studio studio/.

Both the Hydrogen app and the Sanity Studio have their own dependencies with dedicated package.json and node_modules. You need to install the dependencies in both projects.

The Hydrogen app follows the Remix file conventions. You can learn more about the Hydrogen project structure here.

The Sanity studio project structure follows Sanity’s best practices.

Project tree

• Directoryapp Hydrogen app

  • Directorycomponents/

    • …
  • Directorygraphql/

    • …
  • Directorygroq/

    • …
  • Directoryroutes/

    • …
  • …
  • entry.client.tsx
  • entry.server.tsx
  • root.tsx
  • Directorysanity Sanity studio

    • Directoryschemas Studio schemas

      • Directorydocuments/

        • …
      • Directoryobjects/

        • …
      • Directorysingletons/

        • …
      • …
    • Directorystructure/ Studio structure

      • …
    • …
• .env.sanity Sanity env vars (generated by sanity cli)
• .env.template
• components.json Shadcn config file
• remix.config.js Remix config file
• remix.env.d.ts
• sanity.cli.ts
• sanity.config.ts
• server.ts
• storefrontapi.generated.d.ts Shopify graphql types generated by codegen
• …