Platformatic setup proposal

[NikitaIT]

Prerequisites

• I have written a descriptive issue title
• 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.

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.

{
  "$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.

{
  "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.

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.

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.

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

{
  "$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
  }
}