mirror of
https://github.com/kou029w/hasura-rest-hands-on.git
synced 2025-03-13 17:35:19 +00:00
28 lines
1.9 KiB
Markdown
28 lines
1.9 KiB
Markdown
# Vueアプリケーションの作成
|
|
|
|
[](https://stackblitz.com/fork/github/kou029w/hasura-rest-hands-on/tree/main/frontend?terminal=dev&file=src/App.vue)
|
|
[](https://codesandbox.io/s/github/kou029w/hasura-rest-hands-on/tree/main/frontend?file=/src/App.vue)
|
|
|
|
いずれかのリンクにアクセスし、Vueアプリケーションを作成します。
|
|
|
|
```vue
|
|
<!-- src/App.vue -->
|
|
{{#include ../frontend/src/App.vue}}
|
|
```
|
|
|
|
ローカル環境で作成する場合は、StackBlitzにアクセスし、左の[Project]パネルから[↓ (Download Project)]ボタンを押すと、ソースコード一式をダウンロードできます。ダウンロードしたZIPファイルを展開後、`npm install` コマンドなどで必要なパッケージを導入することで同様にVueアプリケーションを作成できます。
|
|
|
|
ソースコードの中には、HasuraのREST APIのエンドポイントURLが含まれます。そのURLに含まれるドメイン名の部分の `memo-demo` は、Hasura Cloudプロジェクト名です。プロジェクトによって異なるので、自分の作成したプロジェクトに合わせて書き換えましょう。
|
|
|
|
```js
|
|
// src/App.vue
|
|
{{#include ../frontend/src/App.vue:14:16}}
|
|
```
|
|
|
|
このエンドポイントURLを自分の作成したプロジェクトのものに書き換えると完成です。
|
|
|
|
Hasuraを使用してPostgresデータベースに接続したREST APIを構築し、それを利用したWebアプリを作成できました 🎉
|
|
|
|
Hasuraのコンソールにアクセスすると、実際にデータが更新されていることを確認できます。
|
|
|
|
|