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 generated 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.