Stoat Frontend

The official web client powering https://stoat.chat/app, built with Solid.js 💖.
Track the project roadmap on OpenProject.

Development Guide

Before contributing, make yourself familiar with our contribution guidelines, the code style guidelines, and the technical documentation for this project.

Before getting started, you'll want to install:

• Git
• mise-en-place

Then proceed to setup:

# clone the repository
git clone --recursive https://github.com/stoatchat/for-web client
cd client

# update submodules if you pull new changes
# git submodule init && git submodule update

# install all packages
mise install:frozen

# build deps:
mise build:deps

# or build a specific dep (e.g. stoat.js updates):
# pnpm --filter stoat.js run build

# customise the .env
cp packages/client/.env.example packages/client/.env

# run dev server
mise dev

# run all CI checks locally
mise check

Finally, navigate to http://local.revolt.chat:5173.

Pulling in Stoat's brand assets

If you want to pull in Stoat brand assets after pulling, run the following:

# update the assets
git -c submodule."packages/client/assets".update=checkout submodule update --init packages/client/assets

You can switch back to the fallback assets by running deinit and continuing as normal:

# deinit submodule which clears directory
git submodule deinit packages/client/assets

Using the official backend

By default, the client connects to a backend running on the same host (localhost).

If you want the client to connect to the official hosted backend instead, open the .env file at /packages/client/.env and comment out the local URL varaibles like this:

# connect to local Stoat instance
#VITE_API_URL=http://localhost:14702
#VITE_WS_URL=ws://localhost:14703
#VITE_MEDIA_URL=http://localhost:14704
#VITE_PROXY_URL=http://localhost:14705

When these variables are not set, the client automatically falls back to the official backend. (See https://github.com/stoatchat/for-web/blob/main/packages/client/components/common/lib/env.ts)

Deployment Guide

Build the app

# install packages
mise install:frozen

# build dependencies
mise build:deps

# build for web
mise build

# ... when building for Stoat production
mise build:prod

You can now deploy the directory packages/client/dist.

Routing Information

The app currently needs the following routes:

• /login
• /pwa
• /dev
• /discover
• /settings
• /invite
• /bot
• /friends
• /server
• /channel

This corresponds to Content.tsx#L33.