Get Started

The easiest way to get started with Vyuh for React is to clone our template repository, which comes pre-configured with all the necessary packages and setup:

git clone https://github.com/vyuh-tech/vyuh-react-workspace.git my-vyuh-project
cd my-vyuh-project
pnpm install

After cloning and installing dependencies, you’ll need to generate a Sanity project inside the studio folder of apps. For detailed instructions on setting up Sanity with your Vyuh project, please refer to the Set Up Sanity CMS guide.

Take some time to go through the README file in the repository to understand the overall structure and workflow.

The template repository includes examples of how to use the Vyuh framework with React and Sanity.

About the Template Repository

The Vyuh React Workspace is a modern, feature-based React application workspace built with Next.js and Sanity CMS integration. It provides a structured approach to building scalable React applications with a focus on feature modularity.

Project Structure

The workspace follows a monorepo structure using PNPM workspaces:

vyuh-react-workspace/
├── apps/                      # Application packages
│   ├── main-app/              # Main Next.js application
│   │   ├── app/               # Next.js app directory
│   │   ├── plugins/           # Application-specific plugins
│   │   └── ...
│   └── studio/               # Sanity Studio (generated after setup)
├── features/                  # Feature packages
│   └── misc/                  # Example "Miscellaneous" feature
│       ├── react-feature-misc/    # React implementation
│       ├── sanity-schema-misc/    # Sanity schema definition
│       └── ...
├── packages/                  # Shared packages
└── pnpm-workspace.yaml        # PNPM workspace configuration

Key Components

• Main Application: A Next.js app located in apps/main-app/ that serves as the entry point and integrates all features
• Sanity Studio: Located in apps/studio/ after you generate it, providing content management capabilities
• Features: Modular components in the features/ directory, each with React implementation and Sanity schema definition
• Miscellaneous Feature: An example feature included in the template that demonstrates the Vyuh framework’s capabilities

Development Workflow

After setting up the repository as described above, you can:

1. Start the main app: cd apps/main-app && pnpm dev
2. Start the Sanity Studio: cd apps/studio && pnpm dev

For detailed information about the repository structure, configuration, and usage instructions, please refer to the README file in the repository and the documentation available at https://github.com/vyuh-tech/vyuh-react-workspace 🔗.

The Vyuh framework includes a host of functionality for building custom features, with actions, conditions, layouts for different content items and also custom plugins. We’ll explore all of these as we expand our documentation.

What’s Next?

Now that you’ve cloned the template repository and installed the dependencies, you’re ready to explore and build a CMS-driven application with the miscellaneous feature:

Set Up Sanity CMS Learn how to configure Sanity.io as your headless CMS and create content schemas for your Vyuh React application.

Rendering Content with Vyuh React Discover how to fetch and display miscellaneous content in your React components with live updates.

Join the Vyuh Community

We’re excited to see what you build with Vyuh React! The framework is designed to make content-driven applications easier to develop and maintain, giving your team the flexibility to iterate quickly.

• GitHub: Star our repository 🔗 and contribute to the project
• Discord: Join our community 🔗 to connect with other developers

Whether you’re building a blog, e-commerce site, or complex web application, Vyuh React provides the tools you need to create dynamic, CMS-driven experiences with minimal effort.

Happy coding!