Skip to main content

Prepare Client and Server

1. Create React App

As mentioned before, use create-react-app for the client.

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

2. Create Server Directory

Set up the server project so that it is contained within the frourio-tutorial directory.

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

3. Create Fastify Server

Create and edit server/index.ts and server/tsconfig.json as follows.

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: '' });
"extends": "../tsconfig.json",
"compilerOptions": {
"module": "commonjs"
"exclude": ["node_modules"],
"include": ["**/*.ts"]

In another terminal session,

yarn ts-node index.ts

Here we have two endpoints, / and /hi.

Ensure that you can see the json correctly in both the Terminal and the Browser Console.

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

Preparation is now all done.

Now it's time to send HTTP requests to the server using aspida!