开源项目安装与配置指南——webapp-starter

开源项目安装与配置指南——webapp-starter

webapp-starter A monorepo template for building webapps - perfect for LLMs 项目地址: https://gitcode.com/gh_mirrors/we/webapp-starter

1. 项目基础介绍

webapp-starter 是一个现代化全栈应用模板，使用 Turborepo 进行管理，集成了 Hono + Bun API 后端和 Next.js 前端。该项目旨在为构建SaaS应用提供最便捷的途径。

主要编程语言：TypeScript

2. 项目使用的关键技术和框架

• 后端

  • Bun：一个全功能的JavaScript运行时，用于创建后端服务。
  • Drizzle ORM：一个简单、强大的ORM，用于数据库操作。
  • Supabase：一个开源替代方案，提供Postgres数据库、实时功能和认证服务。

• 前端

  • Next.js：React框架，用于构建服务器端渲染或静态生成的网页。
  • Tailwind CSS：一个功能类优先的CSS框架，用于快速UI开发。
  • Shadcn/ui：一套高质量的React UI组件库。
  • Clerk：一个用于用户身份验证和管理的工具。

• 部署

  • Vercel：用于部署Next.js前端。
  • Render：用于部署Bun后端。

3. 项目安装和配置的准备工作

在开始安装之前，请确保您的系统中已安装以下工具：

• Node.js：建议使用LTS版本。
• Git：用于克隆和操作项目代码。

确保您的环境变量设置正确，对于macOS和Linux用户，可能需要安装Homebrew。

4. 详细安装步骤

克隆项目

首先，克隆项目到您的本地环境：

git clone https://github.com/sullyo/webapp-starter.git
cd webapp-starter

安装依赖

使用以下命令安装项目依赖：

pnpm install

环境配置

在项目的 apps/api 和 apps/web 目录下创建 .env 文件，并添加以下环境变量：

对于 apps/api/.env：

DATABASE_URL=your_database_url
CLERK_SECRET_KEY=your_clerk_secret_key
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SIGNING_SECRET=your_clerk_webhook_secret

对于 apps/web/.env：

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key
NEXT_PUBLIC_API_URL=your_api_url

对于 packages/db/.env（如果需要运行数据库迁移）：

DATABASE_URL=your_database_url

数据库配置

使用Supabase或其他Postgres数据库，创建新项目并复制数据库URL到 .env 文件中。

运行以下命令以初始化数据库：

pnpm db:push

然后生成数据库模式并应用：

pnpm db:generate
pnpm db:migrate

Clerk配置

在Clerk上创建新应用，复制API密钥到 .env 文件，并配置OAuth提供商（如果需要）。

运行开发服务器

使用以下命令启动开发服务器：

turbo dev

这将启动API和Web应用的开发模式。API将在 http://localhost:3004 上运行，Web应用将在 http://localhost:3000 上运行。

部署

按照Vercel和Render的文档，将项目部署到这两个平台。

以上就是 webapp-starter 项目的详细安装和配置指南。按照这些步骤操作，您应该能够成功安装并运行该项目。

webapp-starter A monorepo template for building webapps - perfect for LLMs 项目地址: https://gitcode.com/gh_mirrors/we/webapp-starter