Platformatic setup proposal

### Prerequisites

- [x] I have written a descriptive issue title
- [x] I have searched existing issues to ensure the feature has not already been requested

### 🚀 Feature Proposal

Make fresh demo how to use with platformatic / watt.

I want to left it only as reference for one who would try to setup it. That's how I did it based on fastify/vite react-typescript demo and platformatic vite integration.

Feel free to close it or modify.

### Motivation

Existed guide on platformatic blog is too old.

### Example

### vite.config.ts

Add `server` settings for watt.

```ts
import { defineConfig } from "vite";
import viteReact from "@vitejs/plugin-react-swc";
import tailwindcss from "@tailwindcss/vite";
import { join } from "path";
import viteFastifyReact from "@fastify/react/plugin";

// https://vite.dev/config/
export default defineConfig({
root: join(import.meta.dirname, "src", "client"),
build: {
emptyOutDir: true,
outDir: join(import.meta.dirname, "dist"),
},
// base: "/rewards", // Should be in sync with gatway, currently set to "/"
plugins: [
viteReact(),
tailwindcss(),
viteFastifyReact({
ts: true,
}) as unknown as [],
],
dev: {}, // enable development mode
ssr: {
external: ["use-sync-external-store"],
},
server: {
// allowedHosts and strictPort copy paseted from
// https://github.com/platformatic/platformatic/blob/main/packages/vite/lib/capability.js
allowedHosts: [".plt.local"],
strictPort: false,
hmr: true, // If false it will reload the app page with HMR timeout interval
},
});
```

### watt.json

Load `@fastify/vite` as `@platformatic/service`.

```json
{
"$schema": "https://schemas.platformatic.dev/@platformatic/service/3.2.0.json",
"service": {
"openapi": true
},
"server": {
"logger": {
"level": "error"
}
},
"watch": true,
"plugins": {
"paths": [
{
"path": "./src/plugins",
"encapsulate": false
}
]
}
}
```

### package.json (additional props)

Add dev and start scripts for watt server and platformatic dependencies if needed.

```json
{
"scripts": {
"dev": "platformatic dev",
"start": "platformatic start",
"dev_self": "tsx src/server.ts --dev",
"start_self": "NODE_ENV=production node dist/server.js",
"build": "npm run build:client && npm run build:server",
"build:server": "tsc --project ./tsconfig.node.json",
"build:client": "NODE_ENV=production vite build",
"clean": "rm -rf dist tsconfig.tsbuildinfo"
},
"dependencies": {
"@fastify/vite": "^8.2.0",
"@platformatic/globals": "^3.2.0",
"@platformatic/client": "2.75.2",
"@platformatic/service": "^3.2.0"
},
}
```

### src/server.ts

Add internal server entrypoint for runs without watt.

```ts
import Fastify from "fastify";
import boot from "./plugins/boot.ts";
const server = Fastify({
logger: {
transport: {
target: "@fastify/one-line-logger",
},
},
});

await boot(server, {});

await server.listen({ port: 3000 });
```

### src/viteOptions.ts

Add `dev: true` so that `wattpm dev` or `platformatic dev` can be used.

```ts
import type { FastifyViteOptions } from "@fastify/vite";
import { resolve } from "node:path";
export const viteOptions: FastifyViteOptions = {
// TODO handle via CLI path argument with proper resolve
root: resolve(import.meta.dirname, ".."),
distDir: import.meta.dirname, // This file will also live in the dist folder when built
renderer: "@fastify/react",
dev: true, // This flag needs to be set to enable watt server to run vite without /build/
};
```

### src/plugins/boot.ts

Add plugin to boot FastifyVite as watt server plugin.

```ts
import { type FastifyInstance, type FastifyPluginOptions } from "fastify";
import FastifyVite from "@fastify/vite";
import FastifyFormBody from "@fastify/formbody";
import { viteOptions } from "../viteOptions.ts";

export default async function (
server: FastifyInstance,
_opts: FastifyPluginOptions
) {
await server.register(FastifyFormBody);

await server.register(FastifyVite, viteOptions);

await server.vite.ready();
}
```

### gateway/watt.json

Add application proxy to "/" for `id=package.name`

```json
{
"$schema": "https://schemas.platformatic.dev/@platformatic/gateway/3.2.0.json",
"watch": true,
"server": {
"logger": {
"level": "error"
}
},
"gateway": {
"applications": [
{
"id": "frontend",
"proxy": {
"prefix": "/"
}
},
],
"refreshTimeout": 0
}
}
```