SPA Documentation / Examples

[fastify]

SPA Documentation / Examples

[jkirkpatrick24]

Hey @spaceemotion

I've been using a * as a fallback route that serves my SPA. If no other paths match, we render the application and let the client take over. Heres an example plugin

module.exports = fp(async function (app, opts) {
  await app.register(vite, {
    root: import.meta.url,
    dev: process.env.NODE_ENV !== "production",
    spa: true,
  });

  app.get("*", async (request, reply) => {
    return reply.html();
  });

  await app.vite.ready();
});

[galvez]

I'm this close to being able to work on the new documentation suite — I'll be essentially reusing the same template I'm working on for the new Fastify DX docs. I definitely need to expand the docs on this area, will keep this issue open until I do.

[galvez]

Right now, using spa: true changes the Reply.html() method to deliver the static index html (both in dev, with the necessary dev transformations, and in production, serving index.html from the production bundle).

import Fastify from 'fastify'
import FastifyVite from '@fastify/vite'

const server = Fastify()

await server.register(FastifyVite, {
  spa: true,
  root: import.meta.url,
})

await server.vite.ready()

server.get('/', (req, reply) => {
  reply.html()
})

Note that when using spa: true, you don't have to provide createRenderFunction.

I'll gladly accept a PR that adds this piece of information to the README.

I'm crazy busy trying to sort out Fastify DX's last remaining issues!

[spaceemotion]

So I got an SPA setup working for a vue3 application I am working on, but whenever I reload the browser, fastify obviously can't find the routes, as they're being handled client-side. I don't need server side rendering for this project.

my config looks pretty much what your suggestion shows.

Is this something that's still being worked on? Or do I have to provide some kind of hints to fastify to handle this properly? is there a fallback route I can use to e.g. say "if there's no route, use the frontend"?

thanks in advance!

[spaceemotion]

Thanks for the hard work so far! I was eventually able to cobble together a working version. The only other problem I ran into was that fastify did not detect that the port I was trying to listen to, was already in use. But that's unrelated and not part if this issue :)

If it helps: as a general feedback, I found the current documentation on this project a bit confusing as I have never used fastify before (this was my first time trying to combine both vite and fastify into one server). As such the current README was a bit overwhelming, but the examples folder worked well enough.