Non SPA TypeScript Example?

[jamcalli]

Prerequisites

• I have written a descriptive issue title
• I have searched existing issues to ensure the issue has not already been raised

Issue

Hello,

Just wondering if there is an example in TypeScript that includes the all the features of the other react demos?

I can't for the life of me figure out how to get it working.

Thanks.

[dennemark]

You could try adapting this one:
https://github.com/fastify/fastify-vite/tree/dev/examples/typescript-vanilla
With this one:
https://github.com/fastify/fastify-vite/tree/dev/examples/react-vanilla-spa

However I am struggling to get proper building of server an client.
Since the dev script only considers the backend to be build once. So if anything in the backend hast to be reloaded, the whole server needs to restart.

I tried to do it with tsup

    "dev": "tsup && concurrently -i -k -p \"[{name}]\" -n \"TypeScript,App\" -c \"yellow.bold,cyan.bold\" \"pnpm:watch\" \"pnpm:dev:start\"",
    "watch": "tsup --watch",
    "dev:start": "node --inspect --watch dist/server.js --dev",

Here is the rough tsup config

export default defineConfig({
  entry: [
    "src/server.ts",
    "src/plugins/**/*.ts",
    "src/routes/**/*.ts",
    /** ignore test folders and files */
    "!**/test/*",
    "!**/*.test.*",
    "!**/*.spec.*",
  ],
  format: "esm",
  tsconfig: "./tsconfig.json",
  // we use bundling otherwise imports do not work, since they should resolve to .js
  bundle: true,
  // we remove code splitting to get readable js files for our node app. in client-side app it would make sense, but not for our backend
  splitting: false,
  sourcemap: true,
  // dts: true, // tsc type checking
  clean: true,
  external: ["dotenv", "close-with-grace"],
  /** ignore test folders and files */
  ignoreWatch: ["**/test/*", "**/*.test.*", "**/*.spec.*"],
})

pnpm watch will rebuild the server file to dist folder, and pnpm dev:start would listen to changes to this file. however this will go into endless loop of restarting the server, maybe since vite is doing SIGTERM to restart?

  // delay is the number of milliseconds for the graceful close to finish
  closeWithGrace(
    { delay: Number.parseInt(process.env.FASTIFY_CLOSE_GRACE_DELAY || "500") },
    (async ({ signal, err, manual, ...rest }) => {
      if (err) {
        app.log.error(err)
      }
      await app.close()
    }) as closeWithGrace.CloseWithGraceAsyncCallback
  )
  await app.vite.ready()

So right now i also do not have a fully working example.

I am wondering if it actually makes sense to couple vite so closely to the fastify server....

[dennemark]

I am trying it with this script now:
"dev": "tsup --watch --onSuccess 'node --inspect dist/server.js --dev'"
reloads vite server, but does not end in endless loop.
it is also easy to add i.e. graphql codgen infront of it:
"dev": "tsup --watch --onSuccess 'pnpm generate && node --inspect dist/server.js --dev'"

lets see how it goes.

[FrancoRATOVOSON]

@jamcalli @dennemark I created this pr: https://github.com/FrancoRATOVOSON/fastify-vite-examples to try to provide some complete example of using typescript.
I'm facing some bugs but I'm open to some help and contributions

[galvez]

See react-vanilla-spa-ts, available since v8.1.0 😄