Setting up a Forum

This is a guide on manually building a Forum with @state-less/leap-frontend

There's also a boilerplate repo which you can fork in order to spin up a Forum as hosted on javascript.forum.

You can either clone the Forum repo and connect it to a running React Server instance, or you can build the Forum using the Components and hooks provided by @state-less/leap-frontend.

In both cases you will need the backend Forum running on React Server. Follow the instructions to spin up a Forum.


Before you can drop the Forum component into your server you first need to setup a new React Server instance. This only takes a few minutes.


Once your server is running you can install the backend repo which contains the Forum @state-less/leap-backend.

cd my-server
yarn add @state-less/leap-backend

Find the following section of code in src/index.tsx

export const reactServer = (
  <Server key="server">
    <HelloWorldExample2 key="button" />

Import the Forum and place it inside the Server component.

import { Forum, ForumPolicies } from "@state-less/leap-backend";
export const reactServer = (
  <Server key="server">
      name="My Forum"
      users={["moritz.roessler@gmail.com"]} //Use your gmail adress

That's all it needs to provide the Forum services on the backend. You can start your server with yarn start.


You have two options of connecting a frontend to the backend. 1. Use the boilerplate repo to connect your backend. 2. Create your own frontend from scratch with Leap's frontend components.


To connect the whole SPA at state-less/javascript-forum to the backend, simply clone the repo and follow the README instructions in the github repo.

git clone https://github.com/C5H8NNaO4/javascript-forum.git my-forum
cd my-forum
cp .env.template .env
yarn install
yarn dev

If you set up your env variables correctly, the Forum should connect to your server and you can login and start to post questions.


In case you want to build a site with a different layout you can use the @state-less/leap-frontend to build a frontend yourself. Note: It currently provides plug and play components that connect to the Forum. However we will also provide hooks in order to simply fetch data.

Open a split terminal and start your backend server.

cd my-server
yarn start


Install our open source frontend components @state-less/leap-frontend along with their peer dependencies.

yarn add @state-less/leap-frontend
yarn add react-router react-router-dom

In order for your App to render, you need to wrap it in an ApolloProvider AuthProvider and Router. The Forum App needs to be routed in userland. Which means you will have to setup some basic routing.

Paste the following code into your App.tsx.

import { ApolloProvider } from "@apollo/client";
import { BrowserRouter as Router, Routes } from "react-router-dom";

import client from "./lib/client";
import { routes } from "./routes";
import { AuthProvider } from "@state-less/react-client";

function App() {
  return (
    <ApolloProvider client={client}>
      <AuthProvider client={client}>

export default App;

Create a new file called src/routes.tsx and render the ForumPage and ForumPost routes.

import { ForumPage, PostsPage } from "@state-less/leap-frontend";
import { Route } from "react-router";

const CLIENT_ID = import.meta.env.REACT_APP_GOOGLE_ID;
export const routes = [
    Component={() => {
      return (
            qa: "https://raw.githubusercontent.com/state-less/blogs.state-less.cloud/main/Q&A.md",
    Component={() => (
      <PostsPage basePath="" forumKey="my-forum" clientId={CLIENT_ID} />

Note, you need to obtain a valid google client id and pass it to the forum in order to be able to login and approve posts. Right now the only supported login method is Google.