Skip to content

Commit 18e4f3f

Browse files
Merge pull request #43 from opencomponents/docs-fastify-server-adapter
restructure + fastify docs
2 parents c867b9c + b8480ea commit 18e4f3f

32 files changed

Lines changed: 115 additions & 950 deletions
Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
---
2-
sidebar_position: 2
3-
---
4-
51
# Command Line Tool
62

73
## Prerequisites

‎website/docs/building/debugging.md‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
---
2-
sidebar_position: 3
3-
---
4-
51
# Debugging
62

73
## General Debugging Principles

website/docs/components/getting-started.md renamed to website/docs/building/getting-started.md

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
---
2-
sidebar_position: 1
3-
---
4-
51
# Getting Started
62

73
## Prerequisites
@@ -152,7 +148,7 @@ Explore these example repositories to see OpenComponents in action:
152148

153149
## Troubleshooting Common Issues
154150

155-
- For installation problems, component creation errors, or dev-server hiccups, refer to the in-depth [CLI guide](cli.md#troubleshooting) which contains up-to-date solutions.
151+
- For installation problems, component creation errors, or dev-server hiccups, refer to the in-depth [CLI guide](cli#installation-troubleshooting) which contains up-to-date solutions.
156152

157153
## Next Steps
158154

@@ -161,7 +157,7 @@ Once you've created your first component:
161157
1. **[Learn the CLI](cli)** - Master all available commands
162158
2. **[Understand package.json structure](package.json-structure)** - Configure your component properly
163159
3. **[Add server-side logic](the-server.js)** - Make your component dynamic
164-
4. **[Publish to a registry](publishing-to-a-registry)** - Share your component
160+
4. **[Publish to a registry](../registry/publishing-to-a-registry)** - Share your component
165161
5. **[Explore client-side operations](../consumers/rendering-lifecycle)** - Advanced browser integration
166162

167163
For a complete hands-on tutorial, see our [Quick Start Tutorial](../quick-start-tutorial).

‎website/docs/building/index.md‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
---
2-
sidebar_position: 0
3-
---
4-
51
# Building Components
62

73
Everything you need to create production-ready micro-frontends.

website/docs/components/package.json-structure.md renamed to website/docs/building/package.json-structure.md

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
---
2-
sidebar_position: 3
3-
---
4-
51
# Structure of package.json
62

73
## Overview
@@ -316,5 +312,5 @@ ls -la public/
316312

317313
- **[Learn server.js structure](the-server.js)** - Add dynamic data to your components
318314
- **[Understand CLI commands](cli)** - Master component development workflow
319-
- **[Publishing guide](publishing-to-a-registry)** - Deploy your components
315+
- **[Publishing guide](../registry/publishing-to-a-registry)** - Deploy your components
320316
- **[Template system](../building/template-system)** - Choose the right template type

‎website/docs/building/template-system.md‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
---
2-
sidebar_position: 2
3-
---
4-
51
# Template System
62

73
## Introduction
@@ -42,7 +38,7 @@ Usage:
4238
$ oc init myComponent oc-template-jade # Legacy template - ES6 recommended for new components
4339
```
4440

45-
Check the [CLI documentation](/docs/components/cli) for more details.
41+
Check the [CLI documentation](/docs/building/cli) for more details.
4642

4743
### On the Registry
4844

@@ -56,7 +52,7 @@ templates: [require('oc-template-extra'), require('oc-template-plus')]
5652
}
5753
```
5854

59-
Check the [registry configuration guide](/docs/registry/registry-configuration#registry-configuration) for more details.
55+
Check the [registry configuration guide](/docs/registry/registry-configuration#configuration-reference) for more details.
6056

6157
### Client-side rendering
6258

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
---
2-
sidebar_position: 4
3-
---
4-
51
# Server-side Logic (server.js / entry.server.ts)
62

73
This guide covers how to add server-side logic to your components. Modern components use `src/entry.server.ts` with the `Server` API, while the legacy `server.js` with callbacks is still supported for backwards compatibility.
@@ -288,9 +284,9 @@ Context aggregates request data, and the registry's context. It consists of the
288284
| ------------------ | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
289285
| `acceptLanguage` | `array of objects` | represents parsed `accept-language` part of the request header sorted by quality. More details [here](https://github.com/opentable/accept-language-parser) |
290286
| `baseUrl` | `string` | represents public registry base url. This is required when we want to nest components that are hosted in the same registry for client-side rendering |
291-
| `env` | `object` | represents the registry environment variables. The registry's admin [can share here arbitrary data](/docs/registry/registry-configuration#registry-configuration) |
287+
| `env` | `object` | represents the registry environment variables. The registry's admin [can share here arbitrary data](/docs/registry/registry-configuration#configuration-reference) |
292288
| `params` | `object` | represents parameters extracted from the query string |
293-
| `plugins` | `array of functions` | [custom functionalities that extend the registry](/docs/registry/registry-configuration#plugins). Note: if a component needs a plugin, [it needs to be declared in the component's package.json](/docs/components/getting-started#structure-of-the-package) |
289+
| `plugins` | `array of functions` | [custom functionalities that extend the registry](/docs/registry/registry-configuration#plugins). Note: if a component needs a plugin, [it needs to be declared in the component's package.json](/docs/building/getting-started#structure-of-the-package) |
294290
| `renderComponent` | `function` | Needed to do server-side nested renderings. [renderComponent API](#rendercomponent-api) |
295291
| `renderComponents` | `function` | Needed to do server-side nested renderings. [renderComponents API](#rendercomponents-api) |
296292
| `requestHeaders` | `object` | represents the original request headers. When component is rendered client side this will be what is sent from the browser, when rendered server side, using oc-client, this will contain whatever the client has been configured to forward |
@@ -523,5 +519,5 @@ module.exports.data = function (context, callback) {
523519

524520
- **[Learn package.json structure](package.json-structure)** - Configure your component properly
525521
- **[Master the CLI](cli)** - Efficient development workflow
526-
- **[Publishing guide](publishing-to-a-registry)** - Deploy your components
522+
- **[Publishing guide](../registry/publishing-to-a-registry)** - Deploy your components
527523
- **[Client-side operations](../consumers/rendering-lifecycle)** - Browser integration patterns

‎website/docs/components/_category_.json‎

Lines changed: 0 additions & 4 deletions
This file was deleted.
Lines changed: 17 additions & 162 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,20 @@
1-
---
2-
sidebar_position: 3
3-
---
4-
51
# Architecture Overview
62

7-
<div className="hero-section">
8-
9-
## How OpenComponents Works
10-
11-
OpenComponents is a **micro frontend architecture** that breaks down monolithic applications into independently deployable, reusable components that teams can own and maintain autonomously.
12-
13-
</div>
14-
15-
## Conceptual Overview
16-
17-
<div className="concept-example">
18-
19-
### 🛒 **Real-World Example: E-commerce Platform**
20-
21-
Instead of building one massive application, imagine decomposing it into independent components:
22-
23-
<div className="component-breakdown">
24-
25-
**🏠 Header Component** → Platform Team
26-
- Navigation, search, user menu
27-
- Deployed independently
28-
- Shared across all pages
29-
30-
**📦 Product Listing** → Catalog Team
31-
- Product cards, filters, pagination
32-
- A/B test new layouts
33-
- Optimized for performance
34-
35-
**🛒 Shopping Cart** → Commerce Team
36-
- Cart state, checkout flow
37-
- Payment integrations
38-
- Independent scaling
39-
40-
**👤 User Profile** → Identity Team
41-
- Authentication, preferences
42-
- Privacy controls
43-
- Account management
44-
45-
</div>
46-
47-
**The Result:** Each team develops, tests, and deploys independently while users see a seamless, integrated experience.
48-
49-
</div>
50-
51-
## Benefits of This Approach
52-
53-
<div className="benefits-overview">
54-
55-
### 🚀 **Team Independence**
56-
- **Autonomous development** - No coordination bottlenecks
57-
- **Technology flexibility** - React, Vue, ES6, or any framework per component
58-
- **Independent deployments** - Release on your own schedule
59-
- **Clear ownership** - Teams own components end-to-end
60-
61-
### 📈 **Scalability & Performance**
62-
- **Component-level scaling** - Scale based on actual usage patterns
63-
- **CDN optimization** - Automatic asset distribution globally
64-
- **Server-side rendering** - SEO and performance without Node.js requirements
65-
- **Caching strategies** - Intelligent caching at multiple levels
66-
67-
### 🔄 **Gradual Migration**
68-
- **Start small** - Begin with one component, expand gradually
69-
- **No big bang** - Migrate from monolith incrementally
70-
- **Risk mitigation** - Test architecture with non-critical components
71-
- **Backward compatibility** - Existing applications continue working
72-
73-
</div>
74-
75-
## Why Choose OpenComponents?
76-
77-
### Team Independence
3+
OpenComponents breaks down monolithic frontends into independently deployable, reusable components that teams can own and maintain autonomously. For the motivation behind this, see [Why OpenComponents?](why-opencomponents).
784

79-
- **Autonomous development**: Teams work on their components without blocking each other
80-
- **Technology flexibility**: Use React, Vue, ES6, or any framework per component
81-
- **Independent deployments**: Release updates without coordinating with other teams
82-
- **Clear ownership**: Each team owns their components end-to-end
5+
## Example decomposition
836

84-
### Gradual Migration
7+
A typical e-commerce page could be decomposed into independent components, each owned by a different team:
858

86-
- **Start small**: Begin with one component and gradually expand
87-
- **No big bang**: Migrate from monolith to micro frontends incrementally
88-
- **Risk mitigation**: Test the architecture with non-critical components first
89-
- **Backward compatibility**: Existing applications continue working during migration
9+
- **Header** (Platform team) – navigation, search, user menu; deployed independently, shared across pages.
10+
- **Product listing** (Catalog team) – product cards, filters, pagination.
11+
- **Shopping cart** (Commerce team) – cart state, checkout flow, payment integrations.
12+
- **User profile** (Identity team) – authentication, preferences, account management.
9013

91-
### A/B Testing and Experimentation
92-
93-
- **Component-level testing**: Test different versions of individual components
94-
- **Isolated experiments**: Changes to one component don't affect others
95-
- **Faster iteration**: Deploy and test new features quickly
96-
- **Data-driven decisions**: Measure impact of component changes independently
14+
Each team develops, tests, and deploys independently, while users see one seamless, integrated page.
9715

9816
## System Architecture
9917

100-
<div className="architecture-diagram">
101-
10218
```mermaid
10319
graph TB
10420
subgraph "Development"
@@ -140,53 +56,12 @@ graph TB
14056
style CLI fill:#9C27B0
14157
```
14258

143-
</div>
144-
145-
### 🏗️ **Core Components**
146-
147-
<div className="architecture-components">
148-
149-
<div className="arch-component">
150-
151-
#### **🛠️ CLI & Development Tools**
152-
- Component scaffolding and development
153-
- Local testing with hot reload
154-
- Publishing and version management
155-
- Built-in preview and debugging tools
156-
157-
</div>
158-
159-
<div className="arch-component">
160-
161-
#### **🌐 Registry (REST API)**
162-
- Central component catalog and metadata
163-
- Version management and resolution
164-
- Authentication and access control
165-
- Component rendering and serving
166-
167-
</div>
168-
169-
<div className="arch-component">
170-
171-
#### **📦 Component Library**
172-
- Immutable component storage
173-
- Version history and artifacts
174-
- Dependency management
175-
- Backup and disaster recovery
59+
### Core components
17660

177-
</div>
178-
179-
<div className="arch-component">
180-
181-
#### **🚀 CDN & Asset Distribution**
182-
- Global static asset delivery
183-
- Automatic optimization and compression
184-
- Edge caching for performance
185-
- Bandwidth cost optimization
186-
187-
</div>
188-
189-
</div>
61+
- **CLI & development tools** – component scaffolding, local dev server with hot reload, publishing, preview and debugging.
62+
- **Registry (REST API)** – component catalog and metadata, version resolution, authentication, rendering.
63+
- **Component library** – immutable storage of published component versions and artifacts.
64+
- **CDN & asset distribution** – static assets (JS, CSS, images) served from CDN with edge caching.
19065

19166
## Publishing Workflow
19267

@@ -293,27 +168,7 @@ Results:
293168

294169
**Best Practices**:
295170

296-
- ✅ **Use semantic versioning**: `~1.2.0` instead of `1.2.4`
297-
- ✅ **Short polling intervals**: 5-second sync reduces inconsistency window
298-
- ✅ **Monitoring & alerting**: Track registry sync health
299-
- ✅ **Graceful degradation**: Serve cached versions during outages
300-
301-
### Advanced Distribution Features
302-
303-
**🔄 Automatic Failover**
304-
305-
- Registry instances automatically retry failed CDN connections
306-
- Components remain available from memory cache during outages
307-
- Health checks detect and route around unhealthy instances
308-
309-
**📊 Monitoring Integration**
310-
311-
- Registry publishes events for sync failures and recoveries
312-
- Metrics tracking for component usage and performance
313-
- Alerting for version inconsistencies across regions
314-
315-
**🚀 Performance Optimization**
316-
317-
- Template deduplication across component versions
318-
- Intelligent caching based on usage patterns
319-
- CDN edge caching for global distribution
171+
- **Use semantic versioning**: prefer `~1.2.0` over pinning `1.2.4`, so consumers tolerate a registry serving a slightly older patch during the sync window
172+
- **Short polling intervals**: the default 5-second `pollingInterval` keeps the inconsistency window small
173+
- **Monitoring**: subscribe to the [registry's events](../registry/registry-configuration#registryoneventname-callback) to track sync health
174+
- **Fallback registries**: configure [`fallbackRegistryUrl`](../registry/registry-configuration#configuration-reference) so requests can be served by a secondary registry if a component isn't found locally

0 commit comments

Comments
 (0)