← All blocks
Quickstart with numbered steps
quickstart · numbered-rail · quickstart-steps
npx shadcn@latest add @plus-ui/quickstart-stepsDefault content
{
"eyebrow": "Quickstart",
"title": "Deploy your first app",
"description": "Install the CLI, link a repository and ship it to production. You will end with a live URL, a preview for every branch and a `rivetlane.toml` you can commit.",
"duration": {
"label": "Time",
"value": "5 minutes"
},
"prerequisites": {
"title": "Before you start",
"items": [
"Node.js 20 or later",
"A Git repository with a web app (Next.js, Astro, Remix or a static site)",
"A Rivetlane account on any plan, including Hobby"
]
},
"labels": {
"steps": "Steps",
"output": "Expected output",
"copy": "Copy",
"copied": "Copied"
},
"steps": [
{
"title": "Install the CLI",
"text": "Install `rivet` globally and check the version. Every command in these docs assumes CLI 5.0 or later.",
"command": {
"language": "shell",
"label": "Terminal",
"code": "$ npm install -g @rivetlane/cli\n$ rivet --version"
},
"output": "rivet/5.0.2 darwin-arm64 node-v20.17.0"
},
{
"title": "Log in",
"text": "Opens your browser to approve the device. The token is stored in your system keychain, never in the project.",
"command": {
"language": "shell",
"label": "Terminal",
"code": "$ rivet login"
},
"output": "→ Opening https://rivetlane.dev/device?code=QXRV-7241\n✓ Logged in as [email protected] (Quillon)"
},
{
"title": "Link your project",
"text": "Run `rivet init` in the repository root. It detects the framework, creates the project and writes `rivetlane.toml`.",
"command": {
"language": "shell",
"label": "~/code/storefront",
"code": "$ rivet init"
},
"output": "✓ Detected Next.js 15 (pnpm)\n✓ Created project storefront in Quillon\n✓ Wrote rivetlane.toml",
"callout": {
"tone": "tip",
"text": "Commit `rivetlane.toml`. Every teammate and every CI run then builds with the same settings."
}
},
{
"title": "Deploy to production",
"text": "Builds the current commit and promotes it to your production URL once the build passes.",
"command": {
"language": "shell",
"label": "~/code/storefront",
"code": "$ rivet deploy --prod"
},
"output": "→ Building storefront@a41c9e2 (main)\n✓ Build completed in 38s\n✓ Deployed to production\n https://storefront.rivetlane.app"
}
],
"done": {
"title": "You're live",
"text": "storefront is serving from 18 regions. Push a branch to get a preview URL, or keep going with one of these.",
"links": [
{
"title": "Environment variables",
"description": "Add secrets per scope with `rivet env set`.",
"href": "#",
"icon": "key"
},
{
"title": "Preview environments",
"description": "A URL for every pull request, posted as a comment.",
"href": "#",
"icon": "layers"
},
{
"title": "Custom domains",
"description": "Serve production from your own domain with automatic TLS.",
"href": "#",
"icon": "globe"
}
]
}
}