Skip to content

Updated the quickstart to use the new 1.0 API #130

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 28 commits into from
Feb 8, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
0c36b82
Updated the quickstart to use the new 1.0 API
cloutiertyler Jan 22, 2025
a1b85c1
Ran prettier
cloutiertyler Jan 22, 2025
cee497f
Updated CSS
cloutiertyler Jan 24, 2025
667c0fc
Removed server code
cloutiertyler Jan 28, 2025
145e818
Moved out of the client dir
cloutiertyler Jan 28, 2025
d6a03d7
Updated lockfile
cloutiertyler Jan 28, 2025
f2a8ac8
Added new workflow
cloutiertyler Jan 28, 2025
56120e8
Small fixes
cloutiertyler Jan 28, 2025
4102fd3
Updated PR template
cloutiertyler Jan 28, 2025
9c099fe
Ran prettier
cloutiertyler Jan 28, 2025
5ba8bf3
Fixes to workflwo
cloutiertyler Jan 28, 2025
40f7cb4
Workflow fixes
cloutiertyler Jan 28, 2025
8a1d28b
Fixes the toolchain thing
cloutiertyler Jan 28, 2025
4d308ca
Added SpacetimeDB integration test
cloutiertyler Jan 28, 2025
2a1f7ce
Fix workflow hopefully
cloutiertyler Jan 28, 2025
4aa5bcc
Fix workflow
cloutiertyler Jan 28, 2025
1422830
Prettier
cloutiertyler Jan 28, 2025
2a84f67
Updated pull request template to better reflect the reality
cloutiertyler Jan 28, 2025
f409b64
Fixed path in workflow
cloutiertyler Jan 28, 2025
40901c1
Prettier after codegen
cloutiertyler Jan 28, 2025
422f8b0
Regenerate
cloutiertyler Jan 28, 2025
340ec7f
Say yes to deleting data
cloutiertyler Jan 28, 2025
e06824d
Updated codegen to latest master of SpacetimeDB
cloutiertyler Feb 6, 2025
5224d68
debug actions
cloutiertyler Feb 6, 2025
b549cce
Formatting
cloutiertyler Feb 6, 2025
cff3b22
add README steps
bfops Feb 7, 2025
4c7ad25
Ran lints
cloutiertyler Feb 8, 2025
fec9d29
Merge branch 'main' into tyler/update-quickstart
cloutiertyler Feb 8, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .github/pull_request_template.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,9 @@ _If the API is breaking, please state below what will break_
## Requires SpacetimeDB PRs

_List any PRs here that are required for this SDK change to work_

## Testing

_Write instructions for a test that you performed for this PR_

- [ ] Describe a test for this PR that you have completed
1 change: 1 addition & 0 deletions .github/spacetimedb-version.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
master
102 changes: 99 additions & 3 deletions .github/workflows/test.yml
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,13 @@ name: Tests

on:
push:
branches:
- main
- master
pull_request:

jobs:
build:
compile-and-test:
runs-on: ubuntu-latest

steps:
Expand Down Expand Up @@ -35,8 +38,101 @@ jobs:
restore-keys: |
${{ runner.os }}-pnpm-store-

- name: Build
- name: Compile
run: pnpm compile

- name: Run tests
- name: Extract SpacetimeDB branch name from file
id: extract-branch
run: |
# Define the path to the branch file
BRANCH_FILE=".github/spacetimedb-branch.txt"

# Default to master if file doesn't exist
if [ ! -f "$BRANCH_FILE" ]; then
echo "::notice::No SpacetimeDB branch file found, using 'master'"
echo "branch=master" >> $GITHUB_OUTPUT
exit 0
fi

# Read and trim whitespace from the file
branch=$(cat "$BRANCH_FILE" | sed -e 's/^[[:space:]]*//' -e 's/[[:space:]]*$//')

# Fallback to master if empty
if [ -z "$branch" ]; then
echo "::warning::SpacetimeDB branch file is empty, using 'master'"
branch="master"
fi

echo "branch=$branch" >> $GITHUB_OUTPUT
echo "Using SpacetimeDB branch from file: $branch"

- name: Checkout SpacetimeDB
uses: actions/checkout@v4
with:
repository: clockworklabs/SpacetimeDB
ref: ${{ steps.extract-branch.outputs.branch }}
path: SpacetimeDB

- name: Install Rust toolchain
uses: dtolnay/rust-toolchain@stable

- name: Cache Rust dependencies
uses: Swatinem/rust-cache@v2
with:
workspaces: SpacetimeDB/modules/quickstart-chat
shared-key: quickstart-chat-test

- name: Install SpacetimeDB CLI from the local checkout
run: |
cargo install --force --path SpacetimeDB/crates/cli --locked --message-format=short
cargo install --force --path SpacetimeDB/crates/standalone --locked --message-format=short
# Add a handy alias using the old binary name, so that we don't have to rewrite all scripts (incl. in submodules).
rm $HOME/.cargo/bin/spacetime || echo "haven't run on this host before"
ln -s $HOME/.cargo/bin/spacetimedb-cli $HOME/.cargo/bin/spacetime
# Clear any existing information
spacetime server clear -y
env:
# Share the target directory with our local project to avoid rebuilding same SpacetimeDB crates twice.
CARGO_TARGET_DIR: SpacetimeDB/modules/quickstart-chat/target

- name: Generate client bindings
working-directory: SpacetimeDB/modules/quickstart-chat
run: |
spacetime generate --lang typescript --out-dir ../../../examples/quickstart-chat/src/module_bindings
pnpm lint --write

- name: Check for changes
run: |
git diff --exit-code examples/quickstart-chat/src/module_bindings || {
echo "Error: Bindings are dirty. Please generate bindings again and commit them to this branch."
exit 1
}

- name: Start SpacetimeDB
run: |
spacetime start &
disown

- name: Publish module to SpacetimeDB
working-directory: SpacetimeDB/modules/quickstart-chat
run: |
spacetime logout && spacetime login --server-issued-login local
spacetime publish -s local quickstart-chat -c -y

- name: Check if SpacetimeDB process is running
run: |
echo "Currently running spacetime processes:"
pgrep -laf spacetime || echo "No spacetime process found."

- name: Publish module to SpacetimeDB
working-directory: SpacetimeDB/modules/quickstart-chat
run: |
spacetime logs quickstart-chat

- name: Run all tests recursively
run: pnpm test

# Run this step always, even if the previous steps fail
- name: Print rows in the user table
if: always()
run: spacetime sql quickstart-chat "SELECT * FROM user"
6 changes: 3 additions & 3 deletions DEVELOP.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Notes for maintainers

The directory `src/client_api` is generated from [the SpacetimeDB client-api-messages](https://github.com/clockworklabs/SpacetimeDB/tree/master/crates/client-api-messages).
The directory `packages/sdk/src/client_api` is generated from [the SpacetimeDB client-api-messages](https://github.com/clockworklabs/SpacetimeDB/tree/master/crates/client-api-messages).
This is not automated.
Whenever the `client-api-messages` crate changes, you'll have to manually re-generate the definitions.
See that crate's DEVELOP.md for how to do this.
Expand All @@ -12,7 +12,7 @@ Within each generated file:

## Releases and publishing

Every Pull Request with public-facing change(Bug fix, perf, feature etc) must be accompanied by a changeset. Any person working on a patch or feature needs to run `pnpm -w changeset` command, which will prompt them to select packages changed. Choose `@clockworklabs/spacetimedb-sdk`
Every Pull Request with a public-facing change (Bug fix, perf, feature etc) must be accompanied by a changeset. Any person working on a patch or feature needs to run `pnpm -w changeset` command, which will prompt them to select packages changed. Choose `@clockworklabs/spacetimedb-sdk`

![image](https://github.com/user-attachments/assets/3a69ff1f-c92b-459a-8dcc-d8fea53f77b4)

Expand All @@ -26,7 +26,7 @@ After selecting the correct tag, it will ask you for a message

Once that is done, hit enter. It will generate a `.md` file which you can then push to github. This all has to be done in the PR with the feature/fix in it.

We can merge it instantly to do a release, or we can merge PRs with their own Changesets. For eg, any new feature or patch we work on for 0.12 now, should have a Changeset in it. All of these will accumulate in the "Version Packages" PR. Once all these are satisfactorily done, we merge this PR, which will
We can merge it instantly to do a release, or we can merge PRs with their own Changesets. E.g. Any new feature or patch we work on for 1.0 now, should have a Changeset in it. All of these will accumulate in the "Version Packages" PR. Once all these are satisfactorily done, we merge this PR, which will

- Release the package on npm
- Release on Github tags
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,5 +22,3 @@ dist-ssr
*.njsproj
*.sln
*.sw?

server
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# client-vite
# quickstart-chat

## 0.0.3-rc1.0

Expand Down
67 changes: 67 additions & 0 deletions examples/quickstart-chat/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
# SpacetimeDB TypeScript Quickstart Chat
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we add the instructions for running this to the readme? As someone who likes to start with being able to run an end-to-end example, then go through the code, it's nice to be able to get clear setup instructions without going through the explanation of how to write the code.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I can do this.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Steps are added (Zeke added them)


This is a simple chat application that demonstrates how to use SpacetimeDB with TypeScript and React. The chat application is a simple chat room where users can send messages to each other. The chat application uses SpacetimeDB to store the chat messages.

It is based directly on the plain React + TypeScript + Vite template. You can follow the quickstart guide for how creating this project from scratch at [SpacetimeDB TypeScript Quickstart](https://spacetimedb.com/docs/sdks/typescript/quickstart).

You can follow the instructions for creating your own SpacetimeDB module here: [SpacetimeDB Rust Module Quickstart](https://spacetimedb.com/docs/modules/rust/quickstart). Place the module in the `quickstart-chat/server` directory for compability with this project.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This might be more of a comment on the quickstart docs, but I think it would be quicker to get up and running if this linked to the server module code that is ready to be run immediately.


In order to run this example, you need to:

- `pnpm compile` in the root directory (`spacetimedb-typescriptsdk`)
- `pnpm install` in this directory
- `pnpm run build` in this directory
- `pnpm run dev` in this directory to run the example

Below is copied from the original template README:

# React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

- Configure the top-level `parserOptions` property like this:

```js
export default tseslint.config({
languageOptions: {
// other options...
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
},
});
```

- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
- Optionally add `...tseslint.configs.stylisticTypeChecked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:

```js
// eslint.config.js
import react from 'eslint-plugin-react';

export default tseslint.config({
// Set the react version
settings: { react: { version: '18.3' } },
plugins: {
// Add the react plugin
react,
},
rules: {
// other rules...
// Enable its recommended rules
...react.configs.recommended.rules,
...react.configs['jsx-runtime'].rules,
},
});
```
28 changes: 28 additions & 0 deletions examples/quickstart-chat/eslint.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import js from '@eslint/js';
import globals from 'globals';
import reactHooks from 'eslint-plugin-react-hooks';
import reactRefresh from 'eslint-plugin-react-refresh';
import tseslint from 'typescript-eslint';

export default tseslint.config(
{ ignores: ['dist'] },
{
extends: [js.configs.recommended, ...tseslint.configs.recommended],
files: ['**/*.{ts,tsx}'],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
},
plugins: {
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
},
rules: {
...reactHooks.configs.recommended.rules,
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
);
File renamed without changes.
38 changes: 38 additions & 0 deletions examples/quickstart-chat/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
{
"name": "client",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview",
"test": "vitest",
"spacetime:generate-bindings": "spacetime generate --lang typescript --out-dir src/module_bindings --project-path server",
"spacetime:publish:local": "spacetime publish chat --project-path server --server local",
"spacetime:publish": "spacetime publish chat --project-path server --server testnet"
},
"dependencies": {
"@clockworklabs/spacetimedb-sdk": "workspace:*",
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
"devDependencies": {
"@eslint/js": "^9.17.0",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^16.2.0",
"@testing-library/user-event": "^14.6.1",
"@types/react": "^18.3.18",
"@types/react-dom": "^18.3.5",
"@vitejs/plugin-react": "^4.3.4",
"eslint": "^9.17.0",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.16",
"globals": "^15.14.0",
"jsdom": "^26.0.0",
"typescript": "~5.6.2",
"typescript-eslint": "^8.18.2",
"vite": "^6.0.5"
}
}
1 change: 1 addition & 0 deletions examples/quickstart-chat/public/vite.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading