Build a member site

A member site is a static web app, such as a Vite and React app, that runs on your company’s storefront. Members open it at an address under /accounts/, inside the storefront’s own cart, sign-in and account menu. You build it like any static app, and you publish its build output with the Fluid CLI.

This is the new way to build member sites. The Liquid-based pages in the Member sites v2 group describe the earlier approach, and they will be retired. Build new sites as described here.

Fluid turns member sites on for your company. Until they are on, publishing answers 404. To ask for them, contact support.

How a member site runs

A visitor opens a site at its storefront address:

https://yoli.com/accounts/diamond-leaders
https://yoli.com/accounts/diamond-leaders/events

diamond-leaders is the site’s handle: lowercase letters, digits and single hyphens, at most 40 characters, unique in your company. Everything after the handle is the site’s own path. The storefront draws the page around your site:

The storefront’s own parts. The cart drawer, checkout, sign-in and the account menu belong to the storefront. Your site uses them through the SDK, so member pricing and the visit’s credit are the storefront’s own.
One frame for your site. Your site runs in one full-page frame, served from its own host under sites.fluid.app. The frame is sandboxed, so your code can’t move the storefront’s window by script. Link to storefront pages with plain <a href> links, and the SDK opens them in the storefront’s window when the visitor clicks. See Link to the storefront.
One address bar. The storefront keeps the address bar and the history. Back and Forward move through your site’s pages, one entry per page.
Page titles and previews. The storefront writes each page’s title and link preview from your site’s config/meta.json. See Page titles and previews.

If someone opens your site’s own host directly, they land on its storefront address, so your site always opens inside the storefront.

Who can open a site

A site belongs to a member or to the company. A new site is private until its owner makes it public.

Visibility	Who can open it
`public`	Anyone, signed in or not
`private`	The owner, company admins, and members a share admits

Sites are shared within one company. A visitor who isn’t a member of your company is a guest, and a guest opens public sites only. A signed-in member a private site doesn’t admit sees a refusal page. A guest is asked to sign in.

Start from the template

Start from the member site template. Mist creates a new member site from it, and it builds and publishes as it is. It’s a Vite and React app with three pages: a home page, a shop that adds products to the storefront’s cart, and a guestbook kept in the site’s own database.

diamond-leaders/
  index.html
  package.json
  vite.config.ts
  src/
    main.tsx            imports the SDK once
    App.tsx             the pages
    router.ts           a small router that follows Back and Forward
    products.ts         the variant ids the shop recommends
    styles.css          the design tokens
  db/schema.json        the site's database
  config/access.json    the Fluid API scopes the site asks for
  config/meta.json      each page's title, description and image

db/schema.json and the files in config/ are your site’s declarations. They’re published with the build and never served as files. Each is optional: leave one out and the site gets its default.

File	What it declares	Page
`db/schema.json`	The site’s tables, their columns and who may read and write them	Database
`config/access.json`	The Fluid API scopes and member fields the site uses	Declarations
`config/meta.json`	Each page’s title, description and preview image	Declarations
`config/routes.json`	Which file answers each path	Declarations

Build and publish

Install the dependencies, build, check and publish:

npm install
npm run build            # typechecks, then writes dist/
fluid sites lint         # checks dist/, db/ and config/
fluid sites publish      # uploads what changed, and makes it live

npm run dev serves the app on its own, outside the storefront. The cart and the database answer only once the site is published and opened at its storefront address. Publish a member site covers the login, the checks, and what each answer means.

Use the SDK

Your site talks to Fluid through @fluid-app/sites. Import it once, at the top of your app:

src/main.tsx

import "@fluid-app/sites";

Then use fluid anywhere:

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

const me = await fluid.auth.me();
await fluid.cart.add([{ variant_id: 48213, quantity: 1 }]);
const { data, error } = await fluid.db.from("guestbook").select("name,message");

The member sites SDK covers each part.

What member sites don’t do yet

No server functions. A site is static files and the SDK. fluid.fn.fetch answers 404, and fluid sites publish refuses a site with a functions/ folder or config/functions.json.
No service workers. The site’s host refuses a service worker’s script.
No files under /_fluid/. The site’s host answers that path itself, and publishing refuses a build with a file under it.
No SQL from the browser. Your code reads and writes its tables through fluid.db, and the site’s table rules decide each request.
No secrets in the site. Everything in your build is public to whoever can open the site. Don’t put an API key or a token in it.
No visitors from other companies. A person who isn’t a member of your company opens your sites as a guest.

Get started

Mist apps

Core concepts

Guides

Guided setup

Storefront guides

Member sites

Member sites v2

SDKs

Portal & Widgets

Build a member site

How a member site runs

Who can open a site

Start from the template

Build and publish

Use the SDK

What member sites don’t do yet

​How a member site runs

​Who can open a site

​Start from the template

​Build and publish

​Use the SDK

​What member sites don’t do yet

How a member site runs

Who can open a site

Start from the template

Build and publish

Use the SDK

What member sites don’t do yet