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
weaverseClientinto the app load context, ensuring that Weaverse functionalities are available throughout your application.
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
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
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.
create-weaverse.server.ts: This file is pivotal for integrating Weaverse's capabilities into your project. It exports the
createWeaverseClientfunction that sets up the Weaverse client.
Now that you're familiar with the project structure, it's crucial to understand how to set up and manage Environment Variables.