RedWoodJS
-
Blitz.js よりもrailsに近く, formに対してもサポートあるの良さげ
- RedwoodJS: The App Framework for Startups | RedwoodJS.com
yarn create redwood-appが動かないので終わり todo
-
2022-07-29 プロジェクト作成
-
ページ作成
# yarn rw g page <name> <route>
yarn rw g page home /- レイアウト: 共通の構造
prisma
-
/api/db/schema.prisma -
migrateは
yarn rw prisma migrate dev- メッセージ入力
/scripts/seed.jsも実行される
-
yarn rw prisma studioで確認
scaffold
yarn rw g scaffold post- CRUD API
- routingの登録
<Route path="/posts/new" page={PostNewPostPage} name="newPost" />
<Route path="/posts/{id:Int}/edit" page={PostEditPostPage} name="editPost" />
<Route path="/posts/{id:Int}" page={PostPostPage} name="post" />-
routingも設定されている
- いい感じのフォームも出来ている
-
/postsは<PostsCell />を表示する- @
/src/components/Post/PostsCell/PostsCell.tsxCellという単位Query(GraphQL query),Loading,Empty,Failure,Successのコンポーネントがある
- @
Cells
yarn rw g cell Articles/src/components/ArticlesCell/が出来るHomePage.tsx
import ArticlesCell from 'src/components/ArticlesCell'
<ArticlesCell />dynamic routing
/article/{id}に飛びたい
yarn rw g page ArticleArticlesCell.tsx#Successでリンクの追加
import { Link, routes } from '@redwoodjs/router'
...
<Link to={
routes.article({ id: article.id })
} />
{item.title}
</Link>Routes.tsx
<Route path="/article/{id}" page={ArticlePage} name="article" />pages/ArticlePage.tsxのroute.article()行を削除
Articleのページを作る
yarn rw g cell Article- Article CellをArticle Pageから使用
import ArticleCell from 'src/components/ArticleCell'
const ArticlePage = ({ id }) => {
<ArticleCell id={id} />
}-
idはIntだがURLは文字列なのでエラー -
yarn rw devで GraphQL Playground開く- なんか入力欄使えない
認証機能
dbAuthというものが用意されている- DB内に保存する
- Routing
/posts->/admin/posts/に
yarn rw setup auth dbAuth-
schema.prismaでUserモデル作成 -
yarn rw prisma migrate dev -
すると GraphQL API(CRUD)に認証がつく
@requireAuthディレクティブがつく
-
ページで認証をかけるにはRoutes.tsxで
<Set>を<Private unauthenticated="home">で囲む -
認証をスキップ
/api/src/graphql/posts.sdl.tsで@requireAuthを@skipAuthに変える
login, signupページ
yarn rw g dbAuth/loginにアクセスしてユーザー登録すると見れるように- auth系の操作は
import { useAuth } from '@redwoodjs/auth'hooksがある
ここまでで The Tutorial のChapter 2まで相当
Tailwind CSS
yarn rw setup tailwindで入るっぽい
-
Vercel, Supabaseにデプロイ
-
How to: Add TailwindCSS to RedwoodJS - Get Help and Help Others - RedwoodJS Community