Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion context/CONTEXT_INDEX.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
|----------|----------|---------|
| TypeScript declarations | `types/` | Authoritative public API surface (env, fs, kv, secret, globals) |
| GitHub Pages docs | `github-pages/` | Astro-based user-facing documentation site |
| Pipeline docs | `docs/` (planned) | Human-facing docs feeding into fastedge-plugin |
| Pipeline docs | `docs/` | 7 generated docs feeding into fastedge-plugin sync pipeline (operational since 2026-04-09) |
| Examples | `examples/` | 13 standalone example apps showing real patterns |

---
Expand Down
2 changes: 1 addition & 1 deletion context/PLUGIN_CONTRACT.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Plugin Source Contract — Naming Conventions

This document describes the naming and structure conventions for `manifest.json` in this repo. These rules ensure the sync-reference-docs pipeline correctly maps source files to plugin reference docs and intent skills.
This document describes the naming and structure conventions for `manifest.json` in this repo. These rules ensure the sync-reference-docs pipeline correctly maps source files to plugin reference docs and intent skills. The pipeline is operational — first PR generated and merged 2026-04-09.

## Reference File Structure

Expand Down
1 change: 1 addition & 0 deletions eslint.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ export default [
'eslint.config.js',
'.github/**',
'.releaserc.cjs',
'examples/react-with-hono-server/**',
],
},

Expand Down
1 change: 1 addition & 0 deletions examples/mcp-server/.node-version
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
24.12.0
6 changes: 3 additions & 3 deletions examples/mcp-server/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@
],
"dependencies": {
"@gcoredev/fastedge-sdk-js": "^2.1.0",
"@hono/mcp": "^0.2.3",
"@modelcontextprotocol/sdk": "^1.24.3",
"hono": "^4.11.9",
"@hono/mcp": "^0.2.5",
"@modelcontextprotocol/sdk": "^1.29.0",
"hono": "^4.12.12",
"zod": "^4.3.6"
},
"devDependencies": {
Expand Down
31 changes: 31 additions & 0 deletions examples/react-with-hono-server/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

# Dependencies & build artifacts
node_modules/
out/
dist/
build/
*.wasm
*.local

# Environment variables
.env.local
.env.*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
1 change: 1 addition & 0 deletions examples/react-with-hono-server/.node-version
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
24.12.0
109 changes: 109 additions & 0 deletions examples/react-with-hono-server/API-README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
# API Routes Setup

This project now has a clean separation between static site serving and API backend routes.

## Structure

```
fastedge-server/
├── server.ts # Main FastEdge server (production)
├── dev-server.ts # Development API server
├── config/
| └──server.config.ts # Static server configuration
└── api/
└── routes.ts # API route definitions
```

## Development

### Running the full stack in development:

```bash
npm run dev
```

This runs both:

- Frontend (Vite) on http://localhost:5173
- API server on http://localhost:3001

### Running individually:

```bash
# Frontend only
npm run dev:vite

# API server only
npm run dev:api
```

## API Endpoints

The API server provides the following endpoints:

- `GET /api/hello` - Simple hello message
- `GET /api/users` - Get list of users (mock data)
- `POST /api/users` - Create a new user
- `GET /api/status` - API status and environment info
- `GET /health` - Health check

### Example API calls:

```javascript
// Import the API utility
import { api } from './utils/api';

// Fetch users
const users = await api.get('api/users');

// Create a user
const newUser = await api.post('api/users', {
name: 'John Doe',
email: 'john@example.com',
});

// Update a user
const updatedUser = await api.put('api/users/1', {
name: 'Jane Doe',
});

// Delete a user
await api.delete('api/users/1');
```

### Environment Configuration

The app automatically detects the environment and uses the correct API endpoint:

- **Development**: API calls are proxied through Vite dev server (same origin)
- **Production**: API calls go directly to `/api/*` on the same domain

Environment files:

- `.env.development` - Development settings
- `.env.production` - Production settings
- `.env` - Default fallback settings

## Production

In production (FastEdge WASM environment), both static files and API routes are served from the same
server on the same domain, avoiding CORS issues.

The API routes will be available at:

- `https://yourdomain.com/api/*`

## Adding New API Routes

1. Edit `fastedge-server/api/routes.ts`
2. Add your new routes to the `api` Hono instance
3. The routes will automatically be available in both development and production

## Notes

- **Development**: Vite proxy forwards `/api/*` requests to the dev server on port 3001
- **Production**: API routes are served directly from the same WASM bundle
- CORS is enabled on the dev server for direct API access if needed
- The `api` utility automatically handles environment differences
- All API routes are prefixed with `/api/`
- Environment variables are automatically loaded by Vite based on the mode
95 changes: 95 additions & 0 deletions examples/react-with-hono-server/ENVIRONMENT-SETUP.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
# API Environment Setup Summary

## What was set up:

### 1. Environment Variables

- `.env` - Default/fallback settings
- `.env.development` - Development mode settings
- `.env.production` - Production mode settings
- `src/vite-env.d.ts` - TypeScript declarations for env variables

Comment thread
godronus marked this conversation as resolved.
### 2. API Utility (`src/utils/api.ts`)

- Automatically detects environment (dev vs prod)
- Provides convenient methods: `api.get()`, `api.post()`, `api.put()`, `api.delete()`
- Handles URL building for different environments
- TypeScript typed for better developer experience

### 3. Vite Proxy Configuration

- Development: Proxies `/api/*` requests to `localhost:3001`
- Production: Serves API routes from same domain

### 4. Updated React App

- Demo component showing how to use the API utility
- Environment info display
- API interaction examples

## How it works:

### Development Mode:

1. Run `npm run dev` to start both frontend and API server
2. Frontend runs on `http://localhost:5173`
3. API server runs on `http://localhost:3001`
4. Vite proxy forwards `/api/*` requests from frontend to API server
5. Your React code just calls `api.get('/api/users')` - no URL management needed

### Production Mode:

1. Build with `npm run build`
2. Both frontend and API are served from the same FastEdge WASM bundle
3. API routes available at `https://yourdomain.com/api/*`
4. Same React code works without changes

## Usage in React Components:

```tsx
import { api } from "../utils/api";

// In your component
const fetchData = async () => {
try {
const users = await api.get("api/users");
setUsers(users);
} catch (error) {
console.error("Failed to fetch users:", error);
}
};

const createUser = async (userData) => {
try {
const newUser = await api.post("api/users", userData);
return newUser;
} catch (error) {
console.error("Failed to create user:", error);
}
};
```

## Benefits:

✅ **No hardcoded URLs** - Environment automatically detected
✅ **Same code works in dev and prod** - No environment-specific changes needed
✅ **Type safety** - TypeScript support throughout
✅ **Easy to use** - Simple API methods instead of manual fetch calls
✅ **Proxy in dev** - No CORS issues during development
✅ **Clean separation** - API routes separate from static serving logic

## Commands:

```bash
# Run frontend only
npm run dev:vite

# Run API server only
npm run dev:api

# Run both frontend and API
npm run dev

# Build for production
npm run build
```
56 changes: 56 additions & 0 deletions examples/react-with-hono-server/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
# FastEdge React Application

A React + Vite frontend served from a FastEdge application using Hono.

This starter-kit provides backend route functionality examples for Users.

## Build

```bash
npm install
npm run build
```

This will create `./wasm/react-app.wasm` ready for deployment.

## Deploy

Use the FastEdge CLI or API to deploy the generated wasm binary file.

## Development

```bash
npm run dev
```

This will run the Vite server for developing your React front-end with HMR as well as a Hono server
to provide the `/api` routes.

## How it works

The React site is broken down into 2 main sections:

├── /fastedge-server \
└── /src

- /fastedge-server: \
This is the backend for the React site, it is the FastEdge application that serves the React site
and handles any backend API routes, \
it is using [Hono](https://hono.dev/) to handle all incoming requests.

- /src: \
This is the React front end code. This gets built using Vite's React tooling.

During the build process it takes all of your front-end code and embeds it into the wasm binary. \
This allows the FastEdge static-server to serve your React site to the browser
[(read more)](https://g-core.github.io/FastEdge-sdk-js/guides/creating-a-static-manifest/).

Apart from serving your React site, this example also provides some back-end routes: `/api/users`

During development the `fastedge-server` is replaced with a
[dev-server](./fastedge-server/dev-server.ts). This makes for a faster development cycle.

> **Note** \
> This dev-server is not a direct replacement for testing within the FastEdge environment. \
> @Hono/node-server does not have the same limitations or functionality as FastEdge. \
> This is purely provided as an example of how to achieve this working environment.
Loading
Loading