nebel/hasura-rest-hands-on
1
0
Fork 0
mirror of https://github.com/kou029w/hasura-rest-hands-on.git synced 2025-01-18 16:08:14 +00:00
Code Issues Projects Releases Wiki Activity

use stackblitz

Browse source
This commit is contained in:
Nebel 2022-08-01 21:20:47 +09:00
parent 694144907f
commit a388a581b5
2 changed files with 4 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
docs/README.md
View file

@ -5,7 +5,7 @@
これからこのハンズオンで作成するのは次のようなWebアプリです。 これからこのハンズオンで作成するのは次のようなWebアプリです。
<iframe <iframe
src="https://codesandbox.io/embed/github/kou029w/hasura-rest-hands-on/tree/main/frontend?codemirror=1&hidenavigation=1&view=preview&module=/src/App.vue" src="https://stackblitz.com/github/kou029w/hasura-rest-hands-on/tree/main/frontend?embed=1&view=preview&terminal=dev&file=src/App.vue"
style=" style="
width: 100%; width: 100%;
height: 500px; height: 500px;
@ -14,14 +14,13 @@
overflow: hidden; overflow: hidden;
" "
title="vue3-hasura-rest" title="vue3-hasura-rest"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe> ></iframe>
構成としては下記の通りです。 構成としては下記の通りです。
- [Hasura Cloud](https://cloud.hasura.io/) - すぐに利用可能なHasuraの環境 - [Hasura Cloud](https://cloud.hasura.io/) - すぐに利用可能なHasuraの環境
- [Heroku Postgres](https://jp.heroku.com/postgres) - すぐに利用可能なデータベース - [Heroku Postgres](https://jp.heroku.com/postgres) - すぐに利用可能なデータベース
- [CodeSandbox](https://codesandbox.io/) (あるいは、[StackBlitz](https://stackblitz.com/)) - フロントエンドのオンライン開発環境 - [StackBlitz](https://stackblitz.com/) (あるいは、[CodeSandbox](https://codesandbox.io/)) - フロントエンドのオンライン開発環境
- [Vue 3](https://vuejs.org/) - プログレッシブWebフレームワーク - [Vue 3](https://vuejs.org/) - プログレッシブWebフレームワーク
- [Quill](https://quilljs.com/) - リッチテキストエディター - [Quill](https://quilljs.com/) - リッチテキストエディター

4
docs/create-vue-app.md
View file

@ -1,7 +1,7 @@
# Vueアプリケーションの作成 # Vueアプリケーションの作成
[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/fork/github/kou029w/hasura-rest-hands-on/tree/main/frontend?terminal=dev&file=src/App.vue)
[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/kou029w/hasura-rest-hands-on/tree/main/frontend?file=/src/App.vue) [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/kou029w/hasura-rest-hands-on/tree/main/frontend?file=/src/App.vue)
[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/kou029w/hasura-rest-hands-on/tree/main/frontend?terminal=dev&file=src/App.vue)
いずれかのリンクにアクセスし、Vueアプリケーションを作成します。 いずれかのリンクにアクセスし、Vueアプリケーションを作成します。
@ -10,7 +10,7 @@
{{#include ../frontend/src/App.vue}} {{#include ../frontend/src/App.vue}}
``` ```
ローカル環境で作成する場合は、CodeSandboxにアクセスし、左の[Files]パネルから[↓ (Export to Zip)]ボタンを押すと、ソースコード一式をダウンロードできます。ダウンロードしたZIPファイルを展開後、`npm install` コマンドなどで必要なパッケージを導入することで同様にVueアプリケーションを作成できます。 ローカル環境で作成する場合は、StackBlitzにアクセスし、左の[Project]パネルから[↓ (Download Project)]ボタンを押すと、ソースコード一式をダウンロードできます。ダウンロードしたZIPファイルを展開後、`npm install` コマンドなどで必要なパッケージを導入することで同様にVueアプリケーションを作成できます。
ソースコードの中には、HasuraのREST APIのエンドポイントURLが含まれます。そのURLに含まれるドメイン名の部分の `memo-demo` は、Hasura Cloudプロジェクト名です。プロジェクトによって異なるので、自分の作成したプロジェクトに合わせて書き換えましょう。 ソースコードの中には、HasuraのREST APIのエンドポイントURLが含まれます。そのURLに含まれるドメイン名の部分の `memo-demo` は、Hasura Cloudプロジェクト名です。プロジェクトによって異なるので、自分の作成したプロジェクトに合わせて書き換えましょう。