Project Structure

2.1 Explore the core structure of a Weaverse Hydrogen theme.

The Weaverse Team avatar
Written by The Weaverse Team
Updated over a week ago

Basic Structure Overview

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

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.

  • .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

  • 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.

  • 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.

Did this answer your question?