メインコンテンツまでスキップ

クライアントとサーバーの準備

1. React アプリの作成​

前述の通り、クライアントには create-react-app を使用します。

Terminal
yarn create react-app frourio-tutorial --template typescript
cd frourio-tutorial

2. サーバーディレクトリの作成​

frourio-tutorial ディレクトリに含まれるように server プロジェクトをセットアップします。

Terminal
mkdir server
cd server
yarn init -y
yarn add fastify @fastify/cors
yarn add -D typescript ts-node @types/node

3. Fastify サーバーの作成​

server/index.ts と server/tsconfig.json を作成し、以下のように編集します。

server/index.ts
import Fastify from 'fastify';
import FastifyCors from '@fastify/cors';

const fastify = Fastify();

fastify.register(FastifyCors, {});

fastify.get('/', (req, reply) => {
  reply.send({ hello: 'world' });
});

fastify.get('/hi', (req, reply) => {
  reply.send({ hello: 'how are you?' });
});

fastify.listen({ port: 8888, host: '0.0.0.0' });
server/tsconfig.json
{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "module": "commonjs"
  },
  "exclude": ["node_modules"],
  "include": ["**/*.ts"]
}

別のターミナルセッションで、

Terminal
yarn ts-node index.ts

これにて / と /hi の 2 つのエンドポイントができました。

ターミナルとブラウザコンソールにて、正しく json を見れることを確認します。

Terminal
curl http://localhost:8888
curl http://localhost:8888/hi
Browser Console
const response = await fetch('http://localhost:8888');
await response.json();

準備はこれにて完了です。

それでは aspida を用いてサーバーに HTTP リクエストを送信しましょう！