Skip to main content

Introduce Frourio

We made the client type-safe on the previous page.

However, there are still parts of this project that are not type-safe. What is it?

It is the server.

So, let's install frourio into the server and build a type-safe 'One TypeScript'.

1. Set Up Frourio Server

1.1. Move API Specification

In frourio, the server is implemented as an extension of the previous api definition.

Therefore, first, migrate the api specification to the server directory.

Terminal
cd server
yarn add -D frourio aspida
mkdir api
yarn frourio --watch

In another terminal session,

Terminal
mkdir api/hi

Next, copy the API type definitions in src/api to server/api.

Terminal
cp ../src/api/index.ts api
cp ../src/api/hi/index.ts api/hi

1.2. Implement Controllers

By default, body is typed as string, and you can see the type error in api/controller.ts.

Then, specify { hello: 'world' } to the body, and the type error will be resolved.

server/api/controller.ts
 import {defineController} from './$relay';

export default defineController(() => ({
- get: () => ({ status: 200, body: 'Hello' }),
+ get: () => ({ status: 200, body: { hello: 'world' } }),
}));

Also, the body of api/hi should be replaced with { hello: 'how are you?' }.

1.3. Start Frourio Server

You can see $server.ts has been generated in the server directory.

Modify index.ts to start the server using this.

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

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?' });
-});
+server(fastify);

fastify.listen({ port: 8888, host: '0.0.0.0' });

It's time to start the frourio server!

Terminal
yarn ts-node index.ts

Just to be sure, confirm that the server works as well as before.

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

1.4. Modify Client

Since the api directory has been moved, the paths referenced by the client should also be changed.

aspida.config.js
 module.exports = {
- input: "src/api",
+ input: "server/api",
baseURL: "http://localhost:8888",
};
src/apiClient.ts
-import $api from "./api/$api";
+import $api from "../server/api/$api";

In addition, regenerate the API definition file.

Terminal
yarn aspida

1.5. Final Result

It looks the same as the previous page.

However, there is a big difference that 'One TypeScript' is realized inside.


How are you?

http://localhost:3000
Can't you get it?

Check the following.

  1. Did you start the back-end server? (yarn ts-node index.ts in frourio-tutorial/server directory)
  2. Did you start the front-end server? (yarn start in frourio-tutorial directory)
  3. Did you generate the server file? (yarn frourio in frourio-tutorial/server directory)
  4. Did you generate the API file? (yarn aspida in frourio-tutorial directory)

2. Other Frourio Features

This tutorial does not cover all the features of frourio such as Hooks or Validation. For more information about them, please refer to Docs.