clockwork-tien
d79a769a67
# Description of Changes - Bump Angular to ^21.2.12 in angular-ts template + sdk devDeps <!-- Please describe your change, mention any related tickets, and so on here. --> # API and ABI breaking changes <!-- If this is an API or ABI breaking change, please apply the corresponding GitHub label. --> # Expected complexity level and risk 1 <!-- How complicated do you think these changes are? Grade on a scale from 1 to 5, where 1 is a trivial change, and 5 is a deep-reaching and complex change. This complexity rating applies not only to the complexity apparent in the diff, but also to its interactions with existing and future code. If you answered more than a 2, explain what is complex about the PR, and what other components it interacts with in potentially concerning ways. --> # Testing <!-- Describe any testing you've done, and any testing you'd like your reviewers to do, so that you're confident that all the changes work as expected! --> - [ ] <!-- maybe a test you want to do --> - [ ] <!-- maybe a test you want a reviewer to do, so they can check it off when they're satisfied. --> --------- Co-authored-by: Tyler Cloutier <cloutiertyler@users.noreply.github.com>
Get a SpacetimeDB Angular 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 Angular client.
This will start the local SpacetimeDB server, publish your module, generate TypeScript bindings, and start the Angular development server.
spacetime dev --template angular-ts
Open your app
Navigate to http://localhost:4200 to see your app running.
The template includes a basic Angular 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/app.component.ts to build your UI.
my-spacetime-app/
├── spacetimedb/ # Your SpacetimeDB module
│ └── src/
│ └── index.ts # Server-side logic
├── src/ # Angular frontend
│ └── app/
│ ├── app.component.ts
│ ├── app.config.ts
│ └── module_bindings/ # Auto-generated types
├── angular.json
└── 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.000000Z INFO: Hello, World!
Next steps
- Read the TypeScript SDK Reference for detailed API docs