一个全栈式、无服务器的Jamstack框架

热门技术勘探工
100 阅读5分钟

Meet Redwood, a Full-stack, Serverless Jamstack Framework

想象一下，一个由CDN交付的React应用，将GraphQL查询发送到世界各地运行AWS Lambdas的后端，所有这些都可以通过git push 。 这就是Redwood--一个有主见的、拥抱Jamstack的全栈框架。

红木框架背后的想法体现在名字本身。红木是北加州的一种树。它们是大树，是世界上最高的树，有些大到380英尺（约116米）。最古老的活着的红木在大约3200年前发芽离地。红豆杉的松果小得出奇。这些树木抗火，从远处看很复杂，但在近处仍然很简单。这就是该框架试图实现的目标--为开发者提供一种方法来构建密集的、有弹性的、易于操作的漂亮应用程序。

在本教程中，我将好好看看Redwood以及它带来的东西。我将假设你对React、GraphQL和Jamstack有一定的熟悉程度。如果你想跟着学习，你可以在GitHub上找到整个演示示例代码。本教程将建立一个CRUD应用（创建-读取-更新-删除），并展示在Redwood中是如何实现无缝连接的。

初始设置

对于一个成功的Redwood安装，该工具会检查以下版本要求。

  • Node: >=12
  • Yarn: >=1.5

假设Node通过NVM可用，例如，通过npm 安装Yarn 。

npm install -g yarn

所有Redwood命令都使用Yarn，这是一个要求。要启动你的第一个应用程序。

yarn create redwood-app getting-started-redwood-js

这就是终端中的初始输出的样子。

Redwood initial project

确保目标目录是一个新的或空的文件夹，否则这个Yarn命令会失败。切换到这个新目录，并启动开发服务器。

cd getting-started-redwood-js
yarn redwood dev

Ta-da!这将自动打开一个设置为http://localhost:8910 的浏览器。你的新项目应该是这样的。

Redwood first page

继续前进，让开发服务器运行。当它需要重新启动时，我一定会让你知道。接下来，有了最初的Redwood项目，是时候提交进展了。

git init
git add .
git commit -m "First commit"

请自由地在骨架项目中探寻。应该有一个.gitignore 文件，你可以在其中附加任何你想忽略的文件。例如，最初的骨架项目在这个文件里有node_modules 文件。任何不在这个文件中的文件都会被提交到 repo 中。

现在，深吸一口气，欣赏一下这个工具是如何完成让一个骨架项目落地的大部分工作的。有两个感兴趣的文件夹--web 和api --这似乎表明在这个项目中既有后端也有前端。有一个Babel和一个GraphQL配置文件，这表明这些是依赖性的。

回头看看初始项目运行后的控制台输出。应该有一条消息说 "Watching files inapi/src/functions"。这表明任何后端代码的变化都会通过这个webpack文件观察器自动刷新。

红木文件夹结构

在文件资源管理器中打开Redwood项目，或你最喜欢的代码编辑器，并查看文件夹结构。忽略非必要的文件，它有以下的层次结构。

┳
┣━┓ api
┃ ┣━┓ db
┃ ┃ ┣━━ schema.prisma
┃ ┃ ┗━━ seed.js
┃ ┗━┓ src
┃   ┣━┓ functions
┃   ┃ ┗━━ graphql.js
┃   ┣━━ graphql
┃   ┣━┓ lib
┃   ┃ ┗━━ db.js
┃   ┗━━ services
┗━┓ web
  ┣━┓ public
  ┃ ┣━━ favicon.png
  ┃ ┣━━ README.md
  ┃ ┗━━ robots.txt
  ┗━┓ src
    ┣━━ components
    ┣━━ layouts
    ┣━┓ pages
    ┃ ┣━┓ FatalErrorPage
    ┃ ┃ ┗━━ FatalErrorPage.js
    ┃ ┗━┓ NotFoundPage
    ┃   ┗━━ NotFoundPage.js
    ┣━━ index.css
    ┣━━ index.html
    ┣━━ index.js
    ┗━━ Routes.js

在根部是web 和api 文件夹，它们将前端和后端代码分开。Redwood称这些为 "边"，而Yarn称它们为 "工作空间"。

api 文件夹有以下子目录。

  • db，包含数据库。
  • schema.prisma 有数据库模式定义，包括表和列。
  • seed.js 最初用任何零配置的数据来填充数据库。

数据库迁移是在SQLite中进行的，是框架的一部分。在我添加数据库之后，会有一个dev.db 文件，和一个名为migrations 的文件夹。这就是Redwood如何跟踪项目中的数据库模式变化。

  • src 有所有的后端代码。
  • functions: 这些将有Lambda函数和Redwood生成的graphql.js 文件。
  • graphql: 这是用Schema Definition Language（或SDL）编写的GraphQL模式。
  • lib 有一个文件 ，它设置了Prisma数据库。这个文件夹是用来存放不适合在 或 的代码。db.js functions services
  • services这个文件夹是用于处理数据的业务逻辑。查询或改变数据的代码放在这里。

对于前端，请看web 目录。

  • public 拥有所有不在React中的静态资产。这个文件夹中的所有文件都被原样复制过来。
  • favicon.png图标：当页面第一次打开时，在浏览器的标签中弹出的一个图标。
  • robots.txt 控制网络爬虫，用于搜索引擎优化。
  • README.md 解释了如何以及何时使用这个公共文件夹。
  • src 有几个子目录。
  • components 有传统的React组件和Redwood Cells（后面会详细介绍）。
  • layouts:跨页共享的HTML/组件。在一个项目中，布局是可选的。
  • pages 有一些组件可能被包裹在Layouts里面，成为URL的登陆页面。例如， ，映射到一个页面，每个页面路由都有自己的文件夹。/authors
    • NotFoundPage/NotFoundPage.js：当没有页面存在时，框架会提供这个页面（请看下面的Routes.js ）。
    • FatalErrorPage/FatalErrorPage.js: 在应用程序中以一个未捕获的错误异常进行渲染。
  • index.css: 一个通用的地方，用来放置不属于其他地方的全局CSS。
  • index.html:React初始页面。
  • index.js: 引导代码，使应用程序启动和运行。
  • Routes.js：路由定义，将URL映射到一个页面。

在Routes.js 文件中，这就是应用程序如何路由到NotFoundPage 。

<Router>
  <Route notfound page={NotFoundPage} />
</Router>

继续阅读Redwood，一个全栈式的无服务器Jamstack框架，位于SitePoint。

avatar
文章
阅读
粉丝