-
Notifications
You must be signed in to change notification settings - Fork 2
Fix/plugin docs #123
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Fix/plugin docs #123
Changes from all commits
Commits
Show all changes
4 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| 24.12.0 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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? |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| 24.12.0 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 | ||
|
|
||
| ### 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 | ||
| ``` | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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. |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.