Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 1e2b66f

Browse files
authored
docs: update Get Started Page to Include Tasks (#19752)
1 parent f9f0ebb commit 1e2b66f

File tree

3 files changed

+164
-50
lines changed

3 files changed

+164
-50
lines changed
52.5 KB
Loading
113 KB
Loading

docs/tutorials/quickstart.md

Lines changed: 164 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,45 @@
11
# Quickstart
22

3-
Follow the steps in this guide to install Coder locally or on a cloud-hosting
4-
provider, set up a workspace, and connect to it from VS Code.
3+
Follow the steps in this guide to get your first Coder development environment
4+
running in under 10 minutes. This guide covers the essential concepts and walks
5+
you through creating your first workspace and running VS Code from it. You can
6+
also get Claude Code up and running in the background!
57

6-
By the end of this guide, you'll have a remote development environment that you
7-
can connect to from any device anywhere, so you can work on the same files in a
8-
persistent environment from your main device, a tablet, or your phone.
8+
## What You'll Build
99

10-
## Install and start Coder
10+
In this quickstart, you'll:
11+
12+
- ✅ Install Coder server
13+
- ✅ Create a **template** (blueprint for dev environments)
14+
- ✅ Launch a **workspace** (your actual dev environment)
15+
- ✅ Connect from your favorite IDE
16+
- ✅ Optionally setup a **task** running Claude Code
17+
18+
## Understanding Coder: 30-Second Overview
19+
20+
Before diving in, here are the core concepts that power Coder explained through
21+
a cooking analogy:
22+
23+
| Component | What It Is | Real-World Analogy |
24+
|----------------|--------------------------------------------------------------------------------------|--------------------------------------------|
25+
| **You** | The engineer/developer/builder working | The head chef cooking the meal |
26+
| **Templates** | A Terraform blueprint that defines your dev environment (OS, tools, resources) | Recipe for a meal |
27+
| **Workspaces** | The actual running environment created from the template | The cooked meal |
28+
| **Tasks** | AI-powered coding agents that run inside a workspace | Smart kitchen appliance that help you cook |
29+
| **Users** | A developer who launches the workspace from a template and does their work inside it | The people eating the meal |
30+
31+
**Putting it Together:** Coder separates who _defines_ environments from who _uses_ them. Admins create and manage Templates, the recipes, while developers use those Templates to launch Workspaces, the meals. Inside those Workspaces, developers can also run Tasks, the smart kitchen appliance, to help speed up day-to-day work.
32+
33+
## Prerequisites
34+
35+
- A machine with 2+ CPU cores and 4GB+ RAM
36+
- 10 minutes of your time
37+
38+
## Step 1: Install Docker and Setup Permissions
1139

1240
<div class="tabs">
1341

14-
## Linux/macOS
42+
### Linux/macOS
1543

1644
1. Install Docker:
1745

@@ -20,7 +48,6 @@ persistent environment from your main device, a tablet, or your phone.
2048
```
2149

2250
For more details, visit:
23-
2451
- [Linux instructions](https://docs.docker.com/desktop/install/linux-install/)
2552
- [Mac instructions](https://docs.docker.com/desktop/install/mac-install/)
2653

@@ -39,6 +66,24 @@ persistent environment from your main device, a tablet, or your phone.
3966
You might need to log out and back in or restart the machine for changes to
4067
take effect.
4168

69+
### Windows
70+
71+
If you plan to use the built-in PostgreSQL database, ensure that the
72+
[Visual C++ Runtime](https://learn.microsoft.com/en-US/cpp/windows/latest-supported-vc-redist#latest-microsoft-visual-c-redistributable-version)
73+
is installed.
74+
75+
1. [Install Docker](https://docs.docker.com/desktop/install/windows-install/).
76+
77+
</div>
78+
79+
## Step 2: Install & Start Coder
80+
81+
Install the `coder` CLI to get started:
82+
83+
<div class="tabs">
84+
85+
### Linux/macOS
86+
4287
1. Install Coder:
4388

4489
```shell
@@ -55,14 +100,12 @@ persistent environment from your main device, a tablet, or your phone.
55100
coder server
56101
```
57102

58-
## Windows
103+
### Windows
59104

60105
If you plan to use the built-in PostgreSQL database, ensure that the
61106
[Visual C++ Runtime](https://learn.microsoft.com/en-US/cpp/windows/latest-supported-vc-redist#latest-microsoft-visual-c-redistributable-version)
62107
is installed.
63108

64-
1. [Install Docker](https://docs.docker.com/desktop/install/windows-install/).
65-
66109
1. Use the
67110
[`winget`](https://learn.microsoft.com/en-us/windows/package-manager/winget/#use-winget)
68111
package manager to install Coder:
@@ -79,44 +122,61 @@ is installed.
79122

80123
</div>
81124

82-
## Configure Coder with a new Workspace
125+
Coder will attempt to open the setup page in your browser. If it doesn't open
126+
automatically, go to <http://localhost:3000>.
127+
128+
- If you get a browser warning similar to `Secure Site Not Available`, you can
129+
ignore the warning and continue to the setup page.
130+
131+
If your Coder server is on a network or cloud device, or you are having trouble
132+
viewing the page, locate the web UI URL in Coder logs in your terminal. It looks
133+
like `https://<CUSTOM-STRING>.<TUNNEL>.try.coder.app`. It's one of the first
134+
lines of output, so you might have to scroll up to find it.
135+
136+
## Step 3: Initial Setup
137+
138+
1. **Create your admin account:**
139+
- Username: `yourname` (lowercase, no spaces)
140+
- Email: `[email protected]`
141+
- Password: Choose a strong password
142+
143+
You can also choose to **Continue with GitHub** instead of creating an admin
144+
account. The first user that signs in is automatically granted admin
145+
permissions.
83146

84-
1. Coder will attempt to open the setup page in your browser. If it doesn't open
85-
automatically, go to <http://localhost:3000>.
147+
![Welcome to Coder - Create admin user](../images/screenshots/welcome-create-admin-user.png)
86148

87-
- If you get a browser warning similar to `Secure Site Not Available`, you
88-
can ignore the warning and continue to the setup page.
149+
## Step 4: Create your First Template and Workspace
89150

90-
If your Coder server is on a network or cloud device, or you are having
91-
trouble viewing the page, locate the web UI URL in Coder logs in your
92-
terminal. It looks like `https://<CUSTOM-STRING>.<TUNNEL>.try.coder.app`.
93-
It's one of the first lines of output, so you might have to scroll up to find
94-
it.
151+
Templates define what's in your development environment. Let's start simple:
95152

96-
1. On the **Welcome to Coder** page, to use your GitHub account to log in,
97-
select **Continue with GitHub**.
98-
You can also enter an email and password to create a new admin account on
99-
the Coder deployment:
153+
1. Click **"Templates"****"New Template"**
100154

101-
![Welcome to Coder - Create admin user](../images/screenshots/welcome-create-admin-user.png)_Welcome
102-
to Coder - Create admin user_
155+
2. **Choose a starter template:**
103156

104-
1. On the **Workspaces** page, select **Go to templates** to create a new
105-
template.
157+
| Starter | Best For | Includes |
158+
|-------------------------------------|---------------------------------------------------------|--------------------------------------------------------|
159+
| **Docker Containers** (Recommended) | Getting started quickly, local development, prototyping | Ubuntu container with common dev tools, Docker runtime |
160+
| **Kubernetes (Deployment)** | Cloud-native teams, scalable workspaces | Pod-based workspaces, Kubernetes orchestration |
161+
| **AWS EC2 (Linux)** | Teams needing full VMs, AWS-native infrastructure | Full EC2 instances with AWS integration |
106162

107-
1. For this guide, use a Docker container. Locate **Docker Containers** and
108-
select **Use template**.
163+
3. Click **"Use template"** on **Docker Containers**. Note: running this template requires Docker to be running in the background, so make sure Docker is running!
109164

110-
1. Give the template a **Name** that you'll recognize both in the Coder UI and
111-
in command-line calls.
165+
4. **Name your template:**
166+
- Name: `quickstart`
167+
- Display name: `quickstart doc template`
168+
- Description: `Provision Docker containers as Coder workspaces`
112169

113-
The rest of the template details are optional, but will be helpful when you
114-
have more templates.
170+
![Create template](../images/screenshots/create-template.png)
115171

116-
![Create template](../images/screenshots/create-template.png)_Create
117-
template_
172+
1. Click **"Save"**
118173

119-
1. Select **Save**.
174+
**What just happened?** You defined a template — a reusable blueprint for dev
175+
environments — in your Coder deployment. It's now stored in your organization's
176+
template list, where you and any teammates in the same org can create workspaces
177+
from it. Let's launch one.
178+
179+
## Step 5: Launch your Workspace
120180

121181
1. After the template is ready, select **Create Workspace**.
122182

@@ -127,14 +187,16 @@ is installed.
127187
![getting-started-workspace is running](../images/screenshots/workspace-running-with-topbar.png)_Workspace
128188
is running_
129189

130-
1. Select **VS Code Desktop** to install the Coder extension and connect to your
131-
Coder workspace.
190+
## Step 6: Connect your IDE
132191

133-
## Work on some code
192+
Select **VS Code Desktop** to install the Coder extension and connect to your
193+
Coder workspace.
134194

135195
After VS Code loads the remote environment, you can select **Open Folder** to
136196
explore directories in the Docker container or work on something new.
137197

198+
![Changing directories in VS Code](../images/screenshots/change-directory-vscode.png)
199+
138200
To clone an existing repository:
139201

140202
1. Select **Clone Repository** and enter the repository URL.
@@ -154,19 +216,71 @@ To clone an existing repository:
154216

155217
1. You are now using VS Code in your Coder environment!
156218

157-
## What's next?
219+
## Success! You're Coding in Coder
220+
221+
You now have:
222+
223+
- **Coder server** running locally
224+
- **A template** defining your environment
225+
- **A workspace** running that environment
226+
- **IDE access** to code remotely
227+
228+
### What's Next?
229+
230+
Now that you have your own workspace running, you can start exploring more
231+
advanced capabilities that Coder offers.
158232

159-
Now that you have your own workspace, use the same template to set one up for a
160-
teammate.
233+
- [Learn more about running Coder Tasks and our recommended Best Practices](https://coder.com/docs/ai-coder/best-practices)
161234

162-
Go to **Templates** and select **Create Workspace** and continue from Step 7 in
163-
[Configure Coder with a new workspace](#configure-coder-with-a-new-workspace).
235+
- [Read about managing Workspaces for your team](https://coder.com/docs/user-guides/workspace-management)
164236

165-
After that, you can try to:
237+
- [Read about implementing monitoring tools for your Coder Deployment](https://coder.com/docs/admin/monitoring)
238+
239+
### Get Coder Tasks Running
240+
241+
Coder Tasks is an interface that allows you to run and manage coding agents like
242+
Claude Code within a given Workspace. Tasks become available when the Template for a Workspace has the `coder_ai_task` resource and `coder_parameter` named `AI Prompt` defined in its source code.
243+
In other words, any existing template can become a Task template by adding in that
244+
resource and parameter.
245+
246+
Coder maintains the [Tasks on Docker](https://registry.coder.com/templates/coder-labs/tasks-docker?_gl=1*19yewmn*_gcl_au*MTc0MzUwMTQ2NC4xNzU2MzA3MDkxLjk3NTM3MjgyNy4xNzU3Njg2NDY2LjE3NTc2ODc0Mzc.*_ga*NzUxMDI1NjIxLjE3NTYzMDcwOTE.*_ga_FTQQJCDWDM*czE3NTc3MDg4MDkkbzQ1JGcxJHQxNzU3NzA4ODE4JGo1MSRsMCRoMA..) template which has Anthropic's Claude Code agent built in with a sample application. Let's try using this template by pulling it from Coder's Registry of public templates, and pushing it to your local server:
247+
248+
1. In the upper right hand corner, click **Use this template**
249+
1. Open a terminal on your machine
250+
1. Ensure your CLI is authenticated with your Coder deployment by [logging in](https://coder.com/docs/reference/cli/login)
251+
1. Create an [API Key with Anthropic](https://console.anthropic.com/)
252+
1. Head to the [Tasks on Docker](https://registry.coder.com/templates/coder-labs/tasks-docker?_gl=1*19yewmn*_gcl_au*MTc0MzUwMTQ2NC4xNzU2MzA3MDkxLjk3NTM3MjgyNy4xNzU3Njg2NDY2LjE3NTc2ODc0Mzc.*_ga*NzUxMDI1NjIxLjE3NTYzMDcwOTE.*_ga_FTQQJCDWDM*czE3NTc3MDg4MDkkbzQ1JGcxJHQxNzU3NzA4ODE4JGo1MSRsMCRoMA..) template
253+
1. Clone the Coder Registry repo to your local machine
254+
255+
```hcl
256+
git clone https://github.com/coder/registry.git
257+
```
258+
259+
1. Switch to the template directory
260+
261+
```hcl
262+
cd registry/registry/coder-labs/templates/tasks-docker
263+
```
264+
265+
1. Push the template to your Coder deployment. Note: this command differs from the registry since we're defining the Anthropic API Key as an environment variable
266+
267+
```hcl
268+
coder template push tasks-docker -d . --variable anthropic_api_key="your-api-key"
269+
```
166270

167-
- [Customize templates](../admin/templates/extending-templates/index.md)
168-
- [Enable Prometheus metrics](../admin/integrations/prometheus.md)
169-
- [Deploy to Google Cloud Platform (GCP)](../install/cloud/compute-engine.md)
271+
1. **Create the new Workspace**
272+
1. In your Coder Deployment, click **Workspaces** in the upper left hand corner
273+
1. Click **New workspace** and choose **tasks-docker**
274+
1. Fill in the Workspace name. Add in an AI Prompt for Claude Code like "Make the background yellow". Click **Create workspace**
275+
1. **See Tasks in action**
276+
1. Once your workspace is running, click **View tasks** with your workspace. This will bring you to the Tasks view where you can see Claude Code (left panel), preview the sample application, and interact with the code in code-server. You might need to wait for Claude Code to finish changing the background color of the application.
277+
![Tasks changing background color of demo application](../images/screenshots/quickstart-tasks-background-change.png)
278+
1. Navigate to the **Tasks** tab in the upper left hand corner
279+
1. Try typing in a new request to Claude Code: "make the background red"
280+
1. Let's exit out of this specific Task view, so we can see all the running tasks
281+
1. You can start a new task by prompting in the "Prompt your AI agent to start a task" box. You can select which template to run this from, so tasks-docker here, and that will spin up a new Workspace
282+
283+
Congratulation! You now have a Coder Task running. This demo has shown you how to spin up a task, and prompt Claude Code to change parts of your application. Learn more specifics about Coder Tasks [here](https://coder.com/docs/ai-coder/tasks).
170284

171285
## Troubleshooting
172286

0 commit comments

Comments
 (0)