Logo
  1. Docs
  2. Build a Weaverse Hydrogen Theme

Project Structure

Published on Sep 1, 2023, updated a month ago

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


Next Steps

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

Was this article helpful?