RedwoodJS 项目教程

RedwoodJS 项目教程

awesome-redwoodA community-driven collection of Redwood related plugins, config, themes, build scripts, tutorials, podcasts, and more.项目地址:https://gitcode.com/gh_mirrors/aw/awesome-redwood

1. 项目的目录结构及介绍

RedwoodJS 项目的目录结构遵循一定的组织规则，以便于开发和维护。以下是一个典型的 RedwoodJS 项目的目录结构：

my-redwood-app/
├── api/
│   ├── db/
│   │   ├── schema.prisma
│   │   └── seed.js
│   ├── src/
│   │   ├── functions/
│   │   ├── graphql/
│   │   ├── lib/
│   │   └── services/
├── web/
│   ├── public/
│   ├── src/
│   │   ├── components/
│   │   ├── layouts/
│   │   ├── pages/
│   │   ├── index.html
│   │   └── App.js
├── redwood.toml
└── package.json

目录结构介绍

• api/: 包含后端代码，主要用于处理数据和业务逻辑。

  • db/: 数据库相关文件，包括 Prisma 的 schema 文件和种子数据。
  • src/: 后端源代码。
    • functions/: 无服务器函数。
    • graphql/: GraphQL 相关文件。
    • lib/: 后端库文件。
    • services/: 业务逻辑服务。

• web/: 包含前端代码，主要用于用户界面。

  • public/: 静态文件，如图片、favicon 等。
  • src/: 前端源代码。
    • components/: React 组件。
    • layouts/: 页面布局。
    • pages/: 页面组件。
    • index.html: 入口 HTML 文件。
    • App.js: 前端应用入口文件。

• redwood.toml: RedwoodJS 的配置文件。

• package.json: 项目的依赖和脚本配置。

2. 项目的启动文件介绍

RedwoodJS 项目的启动文件主要位于 web/src/ 和 api/src/ 目录下。

前端启动文件

• web/src/App.js: 这是前端应用的入口文件，负责初始化 RedwoodJS 应用并加载路由。

后端启动文件

• api/src/functions/graphql.js: 这是 GraphQL 函数的入口文件，负责设置 GraphQL 服务器和解析器。

3. 项目的配置文件介绍

RedwoodJS 的配置文件主要有两个：

redwood.toml

redwood.toml 是 RedwoodJS 的主要配置文件，包含了应用的各种配置选项，如环境变量、数据库连接、构建和部署设置等。

[web]
  title = "My Redwood App"
  port = 8910
  apiUrl = "/.redwood/functions"

[api]
  port = 8911

[browser]
  open = true

[generate]
  tests = true

[database]
  schemaPath = "api/db/schema.prisma"

[experimental]
  fastRefresh = true

package.json

package.json 是 Node.js 项目的标准配置文件，包含了项目的依赖、脚本和其他元数据。

{
  "name": "my-redwood-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@redwoodjs/core": "^0.35.0",
    "@redwoodjs/web": "^0.35.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "scripts": {
    "build": "redwood build",
    "dev": "redwood dev",
    "start": "redwood start",
    "test": "redwood test"
  }
}

通过这些配置文件，可以对 RedwoodJS 项目进行详细的设置和管理。

awesome-redwoodA community-driven collection of Redwood related plugins, config, themes, build scripts, tutorials, podcasts, and more.项目地址:https://gitcode.com/gh_mirrors/aw/awesome-redwood