Full-Stack Development
Project Setup
Set up your full-stack development environment — backend + frontend with hot reload and API proxy.
Prerequisites
- RaisFast installed
- Node.js 18+ (for frontend tooling)
- A frontend framework (React, Vue, or Svelte)
Backend Setup
Create a RaisFast project and start the server:
# Create project
raisfast app new my-app
cd my-app
# Start the server (default port 9898)
raisfastThe server runs at http://localhost:9898 with auto-created SQLite database.
Frontend Setup
npm create vite@latest frontend -- --template react-ts
cd frontend
npm install
npm install @raisfast/sdkConfigure dev proxy in vite.config.ts:
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
server: {
proxy: {
"/api": {
target: "http://localhost:9898",
changeOrigin: true,
},
},
},
});npm create vue@latest frontend -- --typescript
cd frontend
npm install
npm install @raisfast/sdkConfigure dev proxy in vite.config.ts:
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
plugins: [vue()],
server: {
proxy: {
"/api": {
target: "http://localhost:9898",
changeOrigin: true,
},
},
},
});npm create vite@latest frontend -- --template svelte-ts
cd frontend
npm install
npm install @raisfast/sdkConfigure dev proxy in vite.config.ts:
import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
export default defineConfig({
plugins: [svelte()],
server: {
proxy: {
"/api": {
target: "http://localhost:9898",
changeOrigin: true,
},
},
},
});No build tool needed. Include the SDK via CDN:
<script type="module">
import { RaisFast } from "https://esm.sh/@raisfast/sdk";
const client = new RaisFast({
baseUrl: "http://localhost:9898",
});
const posts = await client.posts.list();
console.log(posts);
</script>Initialize the SDK
Create a shared client instance:
import { RaisFast } from "@raisfast/sdk";
export const client = new RaisFast({
baseUrl: "/api", // Proxied in dev, direct in production
});In development, Vite proxies /api → http://localhost:9898/api. In production, serve the frontend behind the same domain as RaisFast.
Recommended Project Structure
my-app/
├── config.toml # RaisFast config
├── .env # Environment variables
├── extensions/
│ ├── content_types/ # Custom data models (TOML)
│ └── plugins/ # Plugin code (JS)
├── storage/
│ ├── db/ # SQLite database
│ └── uploads/ # Media files
└── frontend/ # Your frontend app
├── src/
│ ├── lib/
│ │ └── client.ts # SDK client instance
│ ├── pages/
│ ├── components/
│ └── App.tsx
├── package.json
└── vite.config.tsVerify Everything Works
Start both servers in separate terminals:
# Terminal 1 — Backend
cd my-app && raisfast
# Terminal 2 — Frontend
cd my-app/frontend && npm run devTest the connection in your frontend:
const health = await fetch("/api/health").then((r) => r.json());
console.log(health); // { status: "ok" }Next Step
Now that your environment is ready, let's add authentication.