#155 Renew Tutorial

docs/tutorial/basic/about.mdx

@@ -0,0 +1,46 @@
+---
+id: about
+title: About aspida and frourio
+---
+
+## What is aspida?
+
+Before we learn about fourio, we need to know about aspida.
+
+Aspida is an HTTP client wrapper for type safety.
+Let's look at the real example to see what this means.
+
+For example, if you make an API request using `fetch`, the response in the client will be `any`.
+
+![typed as any](/img/docs/fetch.png)
+
+Aspida converts it to an object of the type defined in the type definition, making it easier for the client to handle.
+
+![typed as defined](/img/docs/aspida.png)
+
+In this example, we used `@aspida/fetch`, which wraps fetch, but there are other wrappers such as axios and SWR.
+
+## Remaining problems
+
+There are still a few problems with aspida.
+
+First, there is no guarantee that the server will respond according to the type definition.
+Aspida types according to the defined type definition, so if the server breaks it, a runtime error will occur.
+There is no way to detect this as aspida has no validation capabilities.
+
+![Two TypeScript](/img/docs/TwoTS.svg#gh-light-mode-only)
+![Two TypeScript](/img/docs/TwoTS-dark.svg#gh-dark-mode-only)
+
+Second, if you are using server-generated OpenAPI, you need to convert it through `openapi2aspida` every time.
+Many server frameworks generate OpanAPI based on their implementations, but using them in aspida requires conversion through `openapi2aspida`.
+
+Frourio solves these problems by "implementing with the same type definitions in the server-side TS".
+
+![One TypeScript](/img/docs/OneTS.svg#gh-light-mode-only)
+![One TypeScript](/img/docs/OneTS-dark.svg#gh-dark-mode-only)
+
+## What is frourio?
+
+Frourio is a CLI tool that generates bridge files and enables type-driven development for static type checking with TypeScript between client and server.
+
+You can easily build projects with any combination of client and server frameworks that frourio supports.

docs/tutorial/basic/advanced.mdx

@@ -0,0 +1,4 @@
+---
+id: advanced
+title: Advanced Features
+---

docs/tutorial/basic/aspida.mdx

@@ -0,0 +1,4 @@
+---
+id: aspida
+title: Introduce Aspida
+---

docs/tutorial/basic/frourio.mdx

@@ -0,0 +1,4 @@
+---
+id: frourio
+title: Introduce Frourio
+---

docs/tutorial/basic/index.mdx

@@ -0,0 +1,36 @@
+---
+id: index
+title: Frourio Basic Tutorial
+---
+
+<div style={{ textAlign: 'center', padding: '16px' }}>
+  <img src="/logos/svg/black.svg#gh-light-mode-only" style={{ width: 300 }} />
+  <img src="/logos/svg/white.svg#gh-dark-mode-only" style={{ width: 300 }} />
+</div>
+
+Welcome to the frourio basic tutorial.
+
+In this tutorial, we will learn about aspida and frourio using a basic client + server project built by create-vite and Fastify.
+
+## Purpose
+
+The purpose of this tutorial is to
+
+- Understand how frourio works
+- Set up frourio without create-frourio-app
+
+## Environment
+
+- **create-vite** with **react-ts template**  
+  It is also possible to set up the client by yourself.
+- **npm**  
+  It is also possible to use yarn, pnpm, or others.
+- **tsx**  
+  It is also possible to use ts-node or others.
+
+Due to the nature of the full-stack framework, the four CLI tools are finally launched in parallel.
+We recommend using tabs in the terminal itself, tmux, etc.
+
+Also, as there will be situations where type errors are being checked, we recommend an environment where help such as IntelliSense is available.
+
+Directory and file operations are described in terms of UNIX commands; Windows users not using WSL should read accordingly.

docs/tutorial/basic/prepare.mdx

@@ -0,0 +1,76 @@
+---
+id: prepare
+title: Prepare Client and Server
+---
+
+import BrowserWindow from '@site/src/components/BrowserWindow';
+
+## Set up client
+
+As mentioned above, use create-vite with react-ts template.
+
+```shell title=Terminal
+npm create vite@latest -- --template react-ts
+```
+
+The project can be named anything, but in this case we will use `frourio-tutorial`.
+
+```shell
+✔ Project name: … frourio-tutorial
+```
+
+Change the directory as instructed and install dependencies.
+
+```shell title=Terminal
+cd frourio-tutorial
+npm install
+```
+
+Although it would be ideal to continue the tutorial in ESM, there are many unsupported packages and it would be complicated, so commonjs will be used in this tutorial.
+
+```diff title=package.json
+-  "type": "module",
+```
+
+Start the dev server and check that it has been set up correctly.
+
+```shell title='Terminal (Tab 1)'
+npm run dev -- --port 3000
+```
+
+<BrowserWindow url="http://localhost:3000"></BrowserWindow>
+
+## Set up server
+
+Create a single-file server in the `server/` directory using Fastify.
+
+```shell title=Terminal
+mkdir server
+cd server
+npm init -y
+npm install fastify @fastify/cors
+npm install -D typescript tsx
+```
+
+```ts title='server/index.ts'
+import Fastify from 'fastify';
+import cors from '@fastify/cors';
+
+const fastify = Fastify();
+
+fastify.register(cors, {});
+
+fastify.get('/', (req, reply) => {
+  reply.send({ hello: 'world', server: 'fastify' });
+});
+
+fastify.listen({ port: 8888, host: '0.0.0.0' });
+```
+
+Start the server and check that it has been set up correctly.
+
+```shell title='Terminal (Tab 2)'
+npx tsx watch index.ts
+```
+
+<BrowserWindow url="http://localhost:8888"></BrowserWindow>

sidebars.js

@@ -50,6 +50,19 @@ module.exports = {
     },
   ],
   tutorial: [
+    {
+      type: 'category',
+      label: 'Basic',
+      collapsed: false,
+      link: { type: 'doc', id: 'tutorial/basic/index' },
+      items: [
+        'tutorial/basic/about',
+        'tutorial/basic/prepare',
+        'tutorial/basic/aspida',
+        'tutorial/basic/frourio',
+        'tutorial/basic/advanced',
+      ],
+    },
     'tutorial/welcome',
     'tutorial/why-frourio',
     'tutorial/preparation',