Full-Stack Development
项目搭建
搭建全栈开发环境 — 后端 + 前端热重载与 API 代理。
前提条件
- 已安装 RaisFast
- Node.js 18+（前端工具链）
- 一个前端框架（React、Vue 或 Svelte）
后端搭建
创建 RaisFast 项目并启动服务：
# 创建项目
raisfast app new my-app
cd my-app
# 启动服务（默认端口 9898）
raisfast服务运行在 http://localhost:9898，SQLite 数据库自动创建。
前端搭建
npm create vite@latest frontend -- --template react-ts
cd frontend
npm install
npm install @raisfast/sdk在 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/sdk在 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/sdk在 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,
},
},
},
});无需构建工具。通过 CDN 引入 SDK：
<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>初始化 SDK
创建共享的客户端实例：
import { RaisFast } from "@raisfast/sdk";
export const client = new RaisFast({
baseUrl: "/api", // 开发时代理，生产时直连
});开发环境由 Vite 将 /api 代理到 http://localhost:9898/api。生产环境将前端部署在 RaisFast 同域名下即可。
推荐项目结构
my-app/
├── config.toml # RaisFast 配置
├── .env # 环境变量
├── extensions/
│ ├── content_types/ # 自定义数据模型（TOML）
│ └── plugins/ # 插件代码（JS）
├── storage/
│ ├── db/ # SQLite 数据库
│ └── uploads/ # 媒体文件
└── frontend/ # 前端应用
├── src/
│ ├── lib/
│ │ └── client.ts # SDK 客户端实例
│ ├── pages/
│ ├── components/
│ └── App.tsx
├── package.json
└── vite.config.ts验证环境
在两个终端分别启动服务：
# 终端 1 — 后端
cd my-app && raisfast
# 终端 2 — 前端
cd my-app/frontend && npm run dev在前端测试连接：
const health = await fetch("/api/health").then((r) => r.json());
console.log(health); // { status: "ok" }下一步
环境就绪后，继续学习认证集成。