Skip to content

Commit b5aa05c

Browse files
pavanpodilapavanpodila
committed
fixed docs on setting up
1 parent 886e62d commit b5aa05c

3 files changed

Lines changed: 112 additions & 281 deletions

File tree

‎src/content/docs/react/intro/get-started.mdx‎

Lines changed: 61 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -8,154 +8,95 @@ description:
88
import { Aside, LinkCard, TabItem, Tabs } from '@astrojs/starlight/components'
99
import { NpmBadge } from '@/components/NpmBadge'
1010

11-
Adding Vyuh to your React project is straightforward with your favorite package
12-
manager. We will be installing the following packages:
13-
14-
- <NpmBadge name="@vyuh/react-core" inline />: Core package for Vyuh React
15-
- <NpmBadge name="@vyuh/react-extension-content" inline />: Extension for
16-
working with CMS content
17-
- <NpmBadge name="@vyuh/react-feature-system" inline />: Core feature for
18-
working with a CMS
19-
- <NpmBadge name="@vyuh/react-plugin-content-provider-sanity" inline />: Content
20-
provider for Sanity.io
21-
22-
<Tabs>
23-
<TabItem label="pnpm">
24-
25-
```bash
26-
pnpm add @vyuh/react-core @vyuh/react-extension-content @vyuh/react-feature-system @vyuh/react-plugin-content-provider-sanity
27-
```
28-
29-
</TabItem>
30-
<TabItem label="npm">
31-
32-
```bash
33-
npm install @vyuh/react-core @vyuh/react-extension-content @vyuh/react-feature-system @vyuh/react-plugin-content-provider-sanity
34-
35-
```
36-
37-
</TabItem>
38-
<TabItem label="yarn">
39-
40-
```bash
41-
yarn add @vyuh/react-core @vyuh/react-extension-content @vyuh/react-feature-system @vyuh/react-plugin-content-provider-sanity
42-
43-
```
44-
45-
</TabItem>
46-
</Tabs>
47-
48-
Then integrate it with your React application:
49-
50-
```tsx
51-
import { PluginDescriptor, VyuhProvider } from '@vyuh/react-core'
52-
import {
53-
RouteLoader,
54-
DefaultContentPlugin,
55-
} from '@vyuh/react-extension-content'
56-
import { SanityContentProvider } from '@vyuh/react-plugin-content-provider-sanity'
57-
import { systemFeature } from '@vyuh/react-feature-system'
58-
import { blogFeature } from './features/blog'
59-
60-
/**
61-
* Plugin configuration
62-
*/
63-
const plugins = new PluginDescriptor({
64-
content: new DefaultContentPlugin(
65-
new SanityContentProvider({
66-
projectId: '<your-project-id>',
67-
dataset: 'production',
68-
perspective: 'drafts',
69-
useCdn: false,
70-
token: '<your-token>',
71-
}),
72-
),
73-
})
74-
75-
const getFeatures = () => [systemFeature, blogFeature]
76-
77-
function App() {
78-
return (
79-
<VyuhProvider features={getFeatures} plugins={plugins}>
80-
<YourAppComponent />
81-
</VyuhProvider>
82-
)
83-
}
84-
85-
// For rendering CMS-driven blog pages
86-
function BlogPostPage() {
87-
return <RouteLoader path="/blog/my-first-post" live={true} />
88-
}
11+
The easiest way to get started with Vyuh for React is to clone our template
12+
repository, which comes pre-configured with all the necessary packages and
13+
setup:
14+
15+
```bash
16+
git clone https://github.com/vyuh-tech/vyuh-react-workspace.git my-vyuh-project
17+
cd my-vyuh-project
18+
pnpm install
8919
```
9020

91-
Notice the use of the `RouteLoader` component that allows you to load a document
92-
at a `path`. You can also pass it the `live` property and make this route
93-
automatically update whenever there are changes to that particular document. The
94-
`blogFeature` feature is a custom feature that exposes components for managing
95-
blog posts on the Studio, and rendered on the React app.
21+
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](/react/intro/setup-sanity) guide.
9622

97-
<Aside title="For Next.js users" type="note">
23+
Take some time to go through the README file in the repository to understand the overall structure and workflow.
9824

99-
If you're using Vyuh with Next.js, you can integrate it into your pages or app
100-
router:
25+
The template repository includes examples of how to use the Vyuh framework with
26+
React and Sanity.
10127

102-
```tsx
103-
// pages/blog/[slug].tsx or app/blog/[slug]/page.tsx
104-
import { useParams } from 'next/navigation'
105-
import { RouteLoader } from '@vyuh/react-extension-content'
28+
## About the Template Repository
10629

107-
export default function BlogPostPage() {
108-
const params = useParams<{ slug: string }>()
109-
const slug = params.slug
30+
The Vyuh React Workspace is a modern, feature-based React application workspace
31+
built with Next.js and Sanity CMS integration. It provides a structured approach
32+
to building scalable React applications with a focus on feature modularity.
11033

111-
return <RouteLoader path={`/blog/${slug}`} live={true} />
112-
}
34+
### Project Structure
35+
36+
The workspace follows a monorepo structure using PNPM workspaces:
37+
38+
```
39+
vyuh-react-workspace/
40+
├── apps/ # Application packages
41+
│ ├── main-app/ # Main Next.js application
42+
│ │ ├── app/ # Next.js app directory
43+
│ │ ├── plugins/ # Application-specific plugins
44+
│ │ └── ...
45+
│ └── studio/ # Sanity Studio (generated after setup)
46+
├── features/ # Feature packages
47+
│ └── misc/ # Example "Miscellaneous" feature
48+
│ ├── react-feature-misc/ # React implementation
49+
│ ├── sanity-schema-misc/ # Sanity schema definition
50+
│ └── ...
51+
├── packages/ # Shared packages
52+
└── pnpm-workspace.yaml # PNPM workspace configuration
11353
```
11454

115-
Make sure to wrap your Next.js app with the `VyuhProvider` in your `_app.tsx` or
116-
root layout component.
55+
### Key Components
56+
57+
- **Main Application**: A Next.js app located in `apps/main-app/` that serves as
58+
the entry point and integrates all features
59+
- **Sanity Studio**: Located in `apps/studio/` after you generate it, providing
60+
content management capabilities
61+
- **Features**: Modular components in the `features/` directory, each with React
62+
implementation and Sanity schema definition
63+
- **Miscellaneous Feature**: An example feature included in the template that
64+
demonstrates the Vyuh framework's capabilities
65+
66+
### Development Workflow
67+
68+
After setting up the repository as described above, you can:
11769

118-
</Aside>
70+
1. Start the main app: `cd apps/main-app && pnpm dev`
71+
2. Start the Sanity Studio: `cd apps/studio && pnpm dev`
72+
73+
For detailed information about the repository structure, configuration, and
74+
usage instructions, please refer to the README file in the repository and the
75+
documentation available at
76+
[https://github.com/vyuh-tech/vyuh-react-workspace](https://github.com/vyuh-tech/vyuh-react-workspace).
11977

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

12482
## What's Next?
12583

126-
Now that you've installed the basic Vyuh React packages, you're ready to build a
127-
CMS-driven blog application:
84+
Now that you've cloned the template repository and installed the dependencies,
85+
you're ready to explore and build a CMS-driven application with the
86+
miscellaneous feature:
12887

12988
<LinkCard
13089
title="Set Up Sanity CMS"
131-
description="Learn how to configure Sanity.io as your headless CMS and create blog post schemas for your Vyuh React application."
90+
description="Learn how to configure Sanity.io as your headless CMS and create content schemas for your Vyuh React application."
13291
href="/react/intro/setup-sanity"
13392
/>
13493

13594
<LinkCard
13695
title="Rendering Content with Vyuh React"
137-
description="Discover how to fetch and display blog posts in your React components with live updates."
96+
description="Discover how to fetch and display miscellaneous content in your React components with live updates."
13897
href="/react/guides/rendering-content"
13998
/>
14099

141-
### How Vyuh Renders CMS Content
142-
143-
The power of Vyuh comes from its ability to seamlessly connect your React
144-
components to CMS content:
145-
146-
1. **Content Definition**: You'll define blog post schemas in Sanity that
147-
specify fields like title, author, and content
148-
2. **Component Mapping**: Vyuh maps CMS content types to your React components
149-
through features like `blogFeature`
150-
3. **Dynamic Rendering**: The `RouteLoader` component fetches content from
151-
specific paths in your CMS
152-
4. **Live Updates**: With the `live={true}` prop, your UI automatically updates
153-
when content changes in the CMS
154-
155-
This approach gives content editors the freedom to update blog posts without
156-
developer intervention, while developers maintain control over the presentation
157-
layer through React components.
158-
159100
## Join the Vyuh Community
160101

161102
We're excited to see what you build with Vyuh React! The framework is designed

‎src/content/docs/react/intro/sanity-manage-console.png‎

82.5 KB
Loading

0 commit comments

Comments
 (0)