Keystonejsの最初の観察

KeystoneJS あなたのスキーマに基づく内容とデータのためのGraphSQL APIと管理UIを提供する開発者のためのCMSです.このチュートリアルではcreate-keystone-app ユーザーと基本的なブログのダッシュボードをスキャフォールドする.将来的にはこのプロジェクトを展開します.

キーストンアプリ

create-keystone-app Kiystoneを開始するためのCLIアプリです.それはあなたのためのファイルのカップルを生成し、管理のUIを実行し、GraphSQL APIを使用して起動する必要があるすべての依存関係をインストールします.

yarn create keystone-app

success Installed "[email protected]" with binaries:
      - create-keystone-app

ℹ️ You're about to generate a project using Keystone
Next packages. If you'd like to use Keystone 5, please
use `create-keystone-5-app` instead. Learn more about
the changes between Keystone 5 and Keystone Next on
our website.

https://next.keystonejs.com/guides/keystone-5-vs-keystone-next​

あなたのプロジェクトに名前を与えてください.鉱山は呼称されるajcwebdev-keystone .

✔ What directory should create-keystone-app generate your app into? · ajcwebdev-keystone

データベースURLが必要になります.あなたが1つの高速を使用する場合はRailway , Supabase , Fly , または他のカップルのダースのいずれか“スピン30秒で”サービスをそこにスピン.鉄道を利用します.
あなたは、データベースを回転させる方法を見るために前半の後を追うことができます.唯一の重要な違いは、あなたが鉄道から接続文字列をコピーするとき、最初から一部を変更することですpostgresql:// to postgres:// .
あなたの接続文字列はxxxx :

✔ What database url should we use? · postgres://postgres:[email protected]:6787/railway

これは、アプリケーションを作成し、さらに指示を提供します.

🎉  Keystone created a starter project in: ajcwebdev-keystone

To launch your app, run:

  - cd ajcwebdev-keystone
  - yarn dev

Next steps:

  - Edit ajcwebdev-keystone/keystone.ts to customize your app.
  - Open the Admin UI - ​http://localhost:3000​
  - Read the docs - ​https://next.keystonejs.com​
  - Star Keystone on GitHub - https://github.com/keystonejs/keystone​

キーストーンのアプリをローカル開発

ランyarn dev ローカル開発サーバーを起動します.

cd ajcwebdev-keystone
yarn dev

これは実行されますkeystone-next dev .

$ keystone-next dev

✨ Starting Keystone

⭐️ Dev Server Ready on http://localhost:3000

✨ Generating GraphQL and Prisma schemas
✨ Your database is now in sync with your schema. Done in 3.17s
✨ Connecting to the database
✨ Generating Admin UI code
✨ Creating server
✨ Preparing GraphQL Server
✨ Preparing Admin UI Next.js app

info  - Using webpack 4. Reason: custom
webpack configuration in next.config.js

https://nextjs.org/docs/messages/webpack5

event - compiled successfully

👋 Admin UI and GraphQL API ready

オープンlocalhost:3000 .

ユーザの作成

あなたはキーストロニーJSニュースレターにサインアップする場合は、次に尋ねられます.大胆な動き!!!

あなたがあなたのユーザーとポストを見ることができるキーストロークダッシュボードに連れて行かれるそのような軽々しいふるまいに報いるかどうか決定したあと.

最初に作成したユーザーが表示されます.

ポストを作る

あなたは、まだポストがないのを見ます.どうしたらよいのだろう.

“Create Post”をクリックしたら投稿を作成できます.

ポストを書く.それを傑作にしてください.

あなたのデータベースを見て、それが爆発しなかったことを確認してください.

GraphSQL APIを問い合わせる

オープンlocalhost:3000/api/graphql を実行します.posts クエリ.

query {
  posts {
    title
  }
}

キーストーンアプリの配備

あなたが別のガイドに従っていない限り、キーストーンのアプリを展開することは複雑ですHow to embed Keystone + SQLite in a Next.js app . それがVercelにこのものを展開することが可能であるならば、理論上、それは可能ですdeploy it to Netlify . その次の時間のチューン!
また、このプロジェクトのすべてのコードを表示することもできますon my GitHub しかし、あなたがそれをクローンにするならば、あなたが試みて、デフォルトで原因をそれに回転させるならば、それは実際に働くつもりでありませんcreate-keystone-app ハードコードあなたDATABASE_URL そして、それをすることなしで働く方法を考え出すことは、複雑です.