### ■ Chat

* create 押すと、chat 追加できます。

* create画面で、name を入力

***
### ■  Chat リスト

* 作成した。chatをクリックします

* 各chatが、開けます

![img](https://img-static-kuc.netlify.app/img/js-front1/chat/ss-chat0129a.png)

* メンバー参加方法は、開いたChatのURLを、メール等で連絡する、
　　又は、Chat リスト画面、で作成したchat名を検索して頂きます。

***
### chat 詳細

* 上部の入力欄に、メッセージ入力し。Post押します

* 各投稿の、[More] ボタンを押すと詳細を開く事が可能です。

* 詳細モーダルで、reply(返信)が可能です。


Chat 操作説明

# Setup, express-API

```
npm install
```

* .env:  set password, host , dbname

```
POSTGRES_DATABASE="chat"
POSTGRES_USER="__USER__"
POSTGRES_PASSWORD="__PASSWORD__"
POSTGRES_HOST="__DBHOST__"
POSTGRES_PORT=5432
```
*  supabase の場合　プロジェクト選択、左下の設定アイコン＞database > Connection string 
 のURI

* password, HOST  を入力

* dbnameは、作成したDB名

***
* migrate

https://gist.github.com/kuc-arc-f/79fc7be9a275d7e695bda51580665035

* prisma install等は省略します。
* 別フォルダで良いので prisma追加し。schema.prisma設置します

```
npx prisma migrate dev --name init
```
* テーブルが、作成されるので。確認下さい

***
* local start

```
yarn start
```

***
# Setup, chat next.js

```
npm install
```


***
### Setup , etc


***
* next.config.js , 

* MY_API_URL : 設置したbackend　ドメインのエンドポイント


```
MY_API_URL : "http://localhost:4000",
```

***
### Start server
* dev-start :

```
yarn dev
```

***
### Start server
* dev-start :

```
yarn dev
```

* start

```
yarn build

yarn start
```


Chat Setup 


* 下記の Gitで公開しております。サーバーレス構成も可能です

* frontend

https://github.com/kuc-arc-f/nextjs12_18chat

* backend (express + postgres)

https://github.com/kuc-arc-f/express_api_12chat

***
### 構成
* db: postgres

* front : next.js 12

* backend: express

***
### ■ 補足

* 参考に設置場所の、テスト環境を記載しておきます。

* DB: postgres: tokyo リージョン(supabase)

* front /nextjs : tokyo リージョン(vercel hobby)

* backend: tokyo リージョン(vercel hobby)

***


js_front1

Category : chat

Chat 操作説明

Chat Setup

Chat Download