Project Structure

Basic Structure Overview

Before getting into the finer details, let's get a top-level overview of the project:

WEAVERSE_EMBEDED_CODE

Base Files Explained

• server.ts: This is the main server entry point. Among other responsibilities, it injects the weaverseClient into the app load context, ensuring that Weaverse functionalities are available throughout your application.

  WEAVERSE_EMBEDED_CODE

• .env: This file holds your project-specific environment variables. Always keep this file secure and never expose sensitive data. For a detailed guide on setting up and managing environment variables, refer to the Environment Variables article.

• tailwind.config.js: This file configures TailwindCSS, a utility-first CSS framework that developers love 💚. Using TailwindCSS, you can quickly design and customize your theme components.

• remix.env.d.ts: This TypeScript definition file is where we define global types, including environment variables and additions to the Remix loader context

  WEAVERSE_EMBEDED_CODE

• remix.config.js: This configuration file is central to the operation of your Remix application. For a comprehensive understanding of its contents and purpose, refer to the Remix documentation.

• sync-project.md: If you ever need to sync your project with the latest version of Pilot, this markdown file will guide you through the process.

Key Files and Directories within app

• root.tsx: This is the root route of any Remix application. Within this file, global theme settings are loaded and rendered. Dive deeper into how global theme settings are handled in the Global Theme Settings article.

• entry.server.tsx: This is the server-side entry to your application. Not only does it handle the initial rendering of your app, but it also manages server-side functionalities like setting up a custom Content Security Policy (CSP). For more details on configuring and understanding CSP, refer to the CSP article.

• /routes: This directory contains your app's routes. Each file inside this directory becomes a page in your app that Remix will load and render. Learn about the intricate details of how Weaverse pages are loaded and rendered in the Rendering a Page article.

• /sections: Here, you write the code for different sections of your theme. Once the section code is crafted, you also need to register the section. For a comprehensive understanding of section crafting and registration, refer to the Weaverse Hydrogen Component article.

• /weaverse:

  WEAVERSE_EMBEDED_CODE

  • components.ts: This file register all the Hydrogen components in your theme. Learn more about it in Weaverse Hydrogen Component article.

  • create-weaverse.server.ts: This file is pivotal for integrating Weaverse's capabilities into your project. It exports the createWeaverseClient function that sets up the Weaverse client.

    WEAVERSE_EMBEDED_CODE

  • index.tsx: This file export the main Weaverse content. Refer to the Rendering a Page article to learn more.

  • schema.server.ts and style.tsx: these files define the global theme schema and how you render them. See how global settings are handled in the Global Theme Settings article.

Next Steps

Now that you're familiar with the project structure, it's crucial to understand how to set up and manage Environment Variables.