SPA Documentation / Examples

[jkirkpatrick24]

Prerequisites

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

Issue

Hi there 👋

I'm working on setting up fastify-vite in SPA mode, and I would like to use this plugin to serve my static build.

There are some comments in the README that suggest there is an SPA example, but it doesn't appear to exist. I'd be happy to contribute a PR with an example, but I'm a bit unsure on some of the requirements

When using fastify-vite to serve a built application, does a user always need to provide a server entrypoint as well? Looking at this example, the comment suggests that its required for SSR but I'm not sure about how SPAs fit in to the picture.

Thanks for your time and work on this plugin!

[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!

[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.

[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.

[galvez]

New docs site expanding on this going live for the v8 release.