Getting Started
This guide provides a quick start for using ReX in your project. Follow these steps to set up the system and begin working with content.
Quick Installation
Install the core package and any environment-specific adapters:
bash
# Install core package
npm install @remedyx/core
# Install environment-specific adapters
# For Node.js
npm install @remedyx/node
# For browser
npm install @remedyx/browser
Basic Usage
Creating a Content Store
The content store is the primary interface for content operations. Create a store using the appropriate factory function:
typescript
import { createContentStore } from '@remedyx/core'
import { createFileSystemAdapter } from '@remedyx/node'
// Create store with filesystem adapter (Node.js environment)
const store = createContentStore({
adapter: createFileSystemAdapter({
baseDir: './content',
}),
})
Reading Content
Read content using the read
method:
typescript
try {
// Read content at the specified URI
const content = await store.read('blog/hello-world.md')
console.log('Content:', content.data)
console.log('Metadata:', content.metadata)
console.log('Content Type:', content.contentType)
} catch (error) {
console.error('Error reading content:', error)
}
Writing Content
Create or update content using the write
method:
typescript
try {
// Create content object
const content = {
data: '# Hello World\n\nThis is my first post.',
contentType: 'text/markdown',
metadata: {
title: 'Hello World',
description: 'My first post using ReX',
createdAt: new Date(),
},
}
// Write content to store
await store.write('blog/hello-world.md', content)
console.log('Content saved successfully')
} catch (error) {
console.error('Error writing content:', error)
}
Observing Content Changes
Register an observer to be notified of content changes:
typescript
// Observe changes to content matching a pattern
const unsubscribe = store.observe(
(uri, content, changeType) => {
console.log(`Content change detected: ${changeType} at ${uri}`)
if (content) {
console.log('Updated content:', content.metadata.title)
}
},
{
pattern: 'blog/**/*.md', // Only observe markdown files in blog directory
types: ['created', 'updated'], // Only observe created and updated events
}
)
// Later, unsubscribe to stop receiving notifications
unsubscribe()
Environment-Specific Setup
Node.js Environment
For server-side applications:
typescript
import { createContentStore } from '@remedyx/core'
import { createFileSystemAdapter } from '@remedyx/node'
const store = createContentStore({
adapter: createFileSystemAdapter({
baseDir: './content',
watch: true, // Enable file watching
}),
})
Browser Environment
For client-side applications:
typescript
import { createContentStore } from '@remedyx/core'
import { createIndexedDBAdapter } from '@remedyx/browser'
const store = createContentStore({
adapter: createIndexedDBAdapter({
dbName: 'content-store',
storeName: 'content',
}),
})
React Integration
For React applications:
tsx
import { ContentProvider, useContent } from '@remedyx/react'
import { createContentStore } from '@remedyx/core'
import { createMemoryAdapter } from '@remedyx/core/adapters'
// Component using content hook
function BlogPost({ uri }) {
const { content, loading, error } = useContent(uri)
if (loading) return <div>Loading...</div>
if (error) return <div>Error: {error.message}</div>
return (
<article>
<h1>{content.metadata.title}</h1>
<div className="content">{content.data}</div>
</article>
)
}
// Application with content provider
function App() {
// Create store with memory adapter
const store = createContentStore({
adapter: createMemoryAdapter(),
})
return (
<ContentProvider store={store}>
<BlogPost uri="blog/hello-world.md" />
</ContentProvider>
)
}
Next Steps
After getting started:
- Explore Key Concepts to deepen your understanding
- Learn about Architecture Overview for system design
- See Installation for advanced setup options
- Review the Glossary for standardized terminology
For more detailed information, check the Reference documentation.