Host a Vite site

Vite projects work as they are. npm create @fluid-app/fluid-site my-site starts you on Vite and React; an existing Vite project needs only the SDK.

Set up

npm install @fluid-app/sites

Import it once, at the top of your entry file:

src/main.tsx

import { fluid } from "@fluid-app/sites";

fluid.auth.me().then((me) => {
  console.log(me.viewer ? `Signed in as ${me.viewer.name}` : "Signed out");
});

Keep Vite’s default base of / and its default build folder, dist.

Routing

With no config/routes.json, every path that isn’t a file is answered by index.html, which is what a client-side router needs. Inside the storefront, let your router follow Back and Forward:

fluid.history.onGo((path, hash) => router.navigate(path + (hash ?? "")));

See Routes to send some paths to other files.

Search engines and link previews

A single-page app’s index.html is empty until its script runs, so a crawler that doesn’t run JavaScript sees nothing. Add the fluidSite() plugin from @fluid-app/sites/vite, and the build writes what crawlers read:

vite.config.ts

import react from "@vitejs/plugin-react";
import { fluidSite } from "@fluid-app/sites/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [react(), fluidSite()],
});

After vite build, it reads config/meta.json and writes:

the title, description, Open Graph and Twitter tags into index.html;
one index.html per route, such as events/index.html, each with that route’s own tags;
llms.txt, and sitemap.xml when config/meta.json gives the site’s absolute url.

A route marked noindex is left out of the sitemap and llms.txt. See SEO and indexing for config/meta.json, and for which title wins on the storefront.

Deploy

fluid deploy

Run fluid sites dev instead of npm run dev to get a working fluid.db while you build.

Get started

Sites

Mist apps

Core concepts

Guides

Guided setup

Storefront guides

SDKs

Portal & Widgets

Host a Vite site

Set up

Routing

Search engines and link previews

Deploy

​Set up

​Routing

​Search engines and link previews

​Deploy

Set up

Routing

Search engines and link previews

Deploy