# Description of Changes This PR adds support for Solid. Related issue: https://github.com/clockworklabs/SpacetimeDB/issues/4820 The initial implementation was with an LLM, since Solid and React are very similar. Then I improved on it. The docs though are completely written by the LLM, I just read through them once to make sure there aren't any problems. # API and ABI breaking changes There are no API or ABI changes. Just added support for Solid. # Expected complexity level and risk I'd say around 1 or 2. I haven't tested it too much except for the example that I added. # Testing I'll be testing it more with the test app I'm planing to build. - [ ] I've added the test solid router similar to test react router, and it was working, but it'll be nice if someone else can verify as well. - [ ] I'll be testing it more with the test app I'm planing to build --------- Co-authored-by: Tyler Cloutier <cloutiertyler@users.noreply.github.com> Co-authored-by: clockwork-labs-bot <clockwork-labs-bot@users.noreply.github.com>
2.8 KiB
Get a SpacetimeDB SolidJS app running in under 5 minutes.
Prerequisites
- Node.js 18+ installed
- SpacetimeDB CLI installed
Install the SpacetimeDB CLI before continuing.
Create your project
Run the spacetime dev command to create a new project with a SpacetimeDB module and SolidJS client.
This will start the local SpacetimeDB server, publish your module, generate TypeScript bindings, and start the SolidJS development server.
spacetime dev --template solid-ts
Open your app
Navigate to http://localhost:5173 to see your app running.
The template includes a basic SolidJS app connected to SpacetimeDB.
Explore the project structure
Your project contains both server and client code.
Edit spacetimedb/src/index.ts to add tables and reducers. Edit src/App.tsx to build your UI.
my-spacetime-app/
├── spacetimedb/ # Your SpacetimeDB module
│ └── src/
│ └── index.ts # Server-side logic
├── src/ # SolidJS frontend
│ ├── App.tsx
│ └── module_bindings/ # Auto-generated types
└── package.json
Understand tables and reducers
Open spacetimedb/src/index.ts to see the module code. The template includes a person table and two reducers: add to insert a person, and sayHello to greet everyone.
Tables store your data. Reducers are functions that modify data — they're the only way to write to the database.
import { schema, table, t } from 'spacetimedb/server';
const spacetimedb = schema({
person: table(
{ public: true },
{
name: t.string(),
}
),
});
export default spacetimedb;
export const add = spacetimedb.reducer(
{ name: t.string() },
(ctx, { name }) => {
ctx.db.person.insert({ name });
}
);
export const sayHello = spacetimedb.reducer(ctx => {
for (const person of ctx.db.person.iter()) {
console.info(`Hello, ${person.name}!`);
}
console.info('Hello, World!');
});
Test with the CLI
Open a new terminal and navigate to your project directory. Then use the SpacetimeDB CLI to call reducers and query your data directly.
cd my-spacetime-app
# Call the add reducer to insert a person
spacetime call add Alice
# Query the person table
spacetime sql "SELECT * FROM person"
name
---------
"Alice"
# Call sayHello to greet everyone
spacetime call say_hello
# View the module logs
spacetime logs
2025-01-13T12:00:00.000000Z INFO: Hello, Alice!
2025-01-13T12:00:00.000Z INFO: Hello, World!
Next steps
- Read the TypeScript SDK Reference for detailed API docs