#react #front-end #generation #typescript #back-end

create-rust-app

运行一个命令即可设置现代的 Rust+React 网页应用

37 个稳定版本 (11 个主要版本)

11.0.0 2024年1月15日
10.0.0 2023年10月28日
9.3.2 2023年10月7日
9.2.0 2023年3月26日
0.1.0 2021年5月8日

#258 in 网页开发

每月49次下载

MIT/Apache

275KB
5.5K SLoC

Create Rust App

License: MIT OR Apache-2.0

运行一个命令即可设置现代的 Rust+React 网页应用。 加入我们的 Discord

create-rust-app.dev

要求

  • Rust
  • diesel_cli
    • 对于 SQLite,如果您不想将 diesel_cli 与系统中的 libsqlite3 动态链接,您可以运行以下命令:cargo install diesel_cli --no-default-features --features sqlite-bundled

安装

cargo install create-rust-app_cli

快速开始

create-rust-app my-todo-app
# .. select backend framework, plugins, etc.
# Code-gen resources for your project
cd ./my-todo-app
create-rust-app
# .. select resource type / properties

功能

1. 项目创建

create-rust-app create <project_name>
  • 运行前端和后端: cargo fullstack
  • Rust 后端
    • 以下框架之一:
      • actix-web
      • poem (暂时支持暂停,使用版本 9.2.2:cargo install [email protected])
    • 数据库迁移(使用 diesel.rs)
      • 在项目中运行 cargo dsync 生成 diesel 结构和类型(见下方的代码生成部分)。
    • 发送邮件
    • PostgreSQL,SQLite 3.35+ 支持
    • ViteJS(前端编译速度极快)
    • SSR 模板,可以选择包含自动代码拆分的包
      • /views 文件夹中包含所有模板
      • 《/frontend/bundles》文件夹包含所有可以包含在您视图中的捆绑包,您可以通过以下方式包含它们:
    • 自动路由到您的单页应用程序
      • 使用以下代码自动路由到您的单页应用程序(如果使用Poem,参数略有不同,示例在函数文档中提供):
  • React前端(或安装您自己的框架!)
    • TypeScript,具有后端类型定义生成(在项目文件夹中运行cargo tsync;请参阅下面的代码生成部分)
    • 路由(通过react-router-dom
    • 生成类型化的react-query钩子(运行$ cd my_project && create-rust-app,然后选择“生成react-query钩子”)

可用的插件

  • 身份验证(+授权)插件

    • 使用简单命令添加基于JWT令牌的认证
    • 会话管理:恢复先前的会话,撤销刷新令牌
    • 凭据管理/恢复
    • 电子邮件验证/激活流程
    • 添加前端UI + react钩子
    • 添加认证服务和用户/会话模型
    • 通过Auth保护器阻止您的端点
    • 遵循OWASP安全最佳实践
    • 开箱即用的RBAC权限(将角色和权限分配给用户)
  • 社交认证(OIDC)插件

    • 添加基于OAuth2的认证(需要认证插件)
    • 只需配置一些OIDC提供者
    app.app_data(Data::new(AuthConfig {
      oidc_providers: vec![GOOGLE(
      "client_id",
      "client_secret",
      "/success/redirect",
      "/error/redirect",
      )],
    }))
    

    然后重定向到开始流程

    <a href={"/api/auth/google"}>Login with Google</a>
    
  • 容器插件

    • Dockerfile,将Rust应用程序容器化成一个单一镜像
  • 开发插件

    • 通过前端门户查看数据库:在"localhost:3000/admin"(仍在开发中)
    • "devbox"显示后端正在编译或数据库无法访问时
    • 此外,当有挂起的迁移时,“devbox”还会显示“运行迁移”按钮
    • 浏览器中的编译错误和迁移检查:
  • 存储插件

    • 添加Storage提取器,允许您从兼容S3的对象存储上传/下载文件

    • 使用Attachment::*无缝添加单个或多个附件到您的模型中!

    • 以下是一些示例

      • 向用户表中的用户添加头像
      let s3_key = Attachment::attach("avatar", "users", user_id, AttachmentData {
          file_name: "image.png",
          data: bytes
      })?;
      
      • 获取附件的URL
      let storage: Storage // retreive this via the appropriate extractor in your frameowrk of choice
      let url = storage.download_uri(s3_key)?;
      

      (注意:请参阅 附件::*存储::* 了解更多功能!)

  • GraphQL 插件

    • 添加了暴露 GraphQL 所需的所有样板代码
    • 需要身份验证插件:开箱即用的身份验证和授权设置
    • localhost:3000/graphql 找到 graphql 演示场
  • Utoipa 插件

    • 使用 utoipa crate 添加 OpenAPI 文档并在 SwaggerUI 演示场中提供。
    • https://127.0.0.1:3000/swagger-ui/ 找到演示场
    • 需要后端是 Actix(目前如此 ;) )
    • 查看 此页面 了解如何使用各种后端为您的 API 端点编写文档
    • 对身份验证插件有软依赖
  • 任务插件

    • 用于运行后台作业,目前仅支持 actix-web 和 postgresql
    • 底层使用 fang 并暴露了所有功能。
    • 使用 create_rust_app::tasks::queue() 将任务添加到队列
    • 使用 cargo run --bin tasks 运行队列
  • 工作区支持(默认启用,不依赖于功能标志)

    • 允许您以工作区组织 Rust 应用程序,并更改指定路径的环境变量默认值。
    • 要将项目组织为工作区
      • 启用此功能
      • 将代码库重构为工作区(请参阅 #194
      • 可选:设置以下环境变量(路径相对于您从 cargo fullstack/backend/run 调用的目录)
        • CRA_MANIFEST_PATH:当从工作区根目录调用时,默认值为 ./frontend/dist/manifest.json,否则为 ../frontend/dist/manifest.json
        • CRA_FRONTEND_DIR:当从工作区根目录调用时,默认值为 ./frontend,否则为 ../frontend
        • CRA_VIEWS_GLOB:当从工作区根目录调用时,默认值为 backend/views/\*\*/\*.html,否则为 views/\*\*/\*.html
      • 请注意,在任何非标准设置中,您都需要设置上述环境变量以正确的值,以确保项目行为正确。

2. 代码生成以减少样板代码

cargo dsync
  • 运行此命令以在 backend/models 文件夹中生成 diesel 模型结构和查询!
  • 请参阅 dsync 文档 此处
cargo tsync
  • 运行此命令以生成带有 #[tsync::tsync] 注释的 Rust 代码的类型脚本类型。您可以在以下位置找到此命令的输出: frontend/src/types/rust.d.ts
  • 请参阅 tsync 文档 此处
cd my_project && create-rust-app
  • CRUD 代码生成以减少样板代码
    • 为数据库模型、端点服务文件提供脚手架,并在 /api 中连接它们!
  • 为前端生成 react-query 钩子
    • services/ 文件夹中定义的每个处理函数生成一个钩子
    • 之后编辑生成的钩子 -- 除非您删除(或重命名)钩子,否则它们不会被重新生成!

操作步骤(旧版)

Gif

贡献

欢迎在问题部分提出问题和评论!

如果您遇到编译时间慢的问题,请确保模板文件中没有冗余(查找 node_modules 或 typescript / parcel 缓存并删除它们)。此外,您还可以尝试使用 mold 链接器,它也可能提高编译时间。

依赖项

~13–64MB
~1M SLoC