getting-started.html
177 lines1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
{{template "main.html" .}}
{{define "title"}}Getting Started — Congo Dev{{end}}
{{define "content"}}
<div class="fade-up max-w-2xl mx-auto">
<div class="mb-6">
<a href="/" class="text-[11px] text-slate-400 hover:text-indigo-500 transition-colors" hx-boost="true">← Dashboard</a>
</div>
<h1 class="text-xl font-bold text-slate-800 mb-1">Build Your First App</h1>
<p class="text-sm text-slate-500 mb-8">From zero to deployed in five minutes. Congo gives you a full-stack Go app with auth, database, HTMX, and one-click deploy.</p>
<!-- Step 1: Create -->
<div class="panel-card p-5 mb-3">
<div class="flex items-start gap-4">
<span class="w-7 h-7 rounded-full bg-indigo-500 text-white text-xs font-bold flex items-center justify-center shrink-0 mt-0.5">1</span>
<div class="flex-1">
<h2 class="text-sm font-bold text-slate-800 mb-2">Create a project</h2>
<p class="text-xs text-slate-500 mb-3">Click the <span class="text-indigo-500 font-medium">+</span> button in the Projects panel on the dashboard, or use the terminal:</p>
<div class="bg-slate-50 rounded-lg p-3 font-mono text-xs space-y-1">
<div class="text-slate-400"># From the Congo Dev terminal</div>
<div class="text-slate-700">congo init my-app</div>
</div>
<p class="text-[11px] text-slate-400 mt-2">This creates a Go web app at <code class="bg-slate-100 px-1 rounded">~/repos/my-app</code> with controllers, models, views, database, and auth scaffolded.</p>
</div>
</div>
</div>
<!-- Step 2: Explore -->
<div class="panel-card p-5 mb-3">
<div class="flex items-start gap-4">
<span class="w-7 h-7 rounded-full bg-indigo-500 text-white text-xs font-bold flex items-center justify-center shrink-0 mt-0.5">2</span>
<div class="flex-1">
<h2 class="text-sm font-bold text-slate-800 mb-2">Explore the code</h2>
<p class="text-xs text-slate-500 mb-3">Open the project in the editor by clicking <span class="font-mono text-indigo-500">Code</span> in the nav bar. Here's what you get:</p>
<div class="bg-slate-50 rounded-lg p-3 font-mono text-[11px] space-y-0.5 text-slate-600">
<div>web/</div>
<div class="pl-4">controllers/ <span class="text-slate-400">-- route handlers + template methods</span></div>
<div class="pl-4">models/ <span class="text-slate-400">-- database models (auto-migrate)</span></div>
<div class="pl-4">views/ <span class="text-slate-400">-- HTML templates with HTMX</span></div>
<div class="pl-4">main.go <span class="text-slate-400">-- app entry point</span></div>
<div>internal/ <span class="text-slate-400">-- vendored framework (yours to modify)</span></div>
<div>CLAUDE.md <span class="text-slate-400">-- AI context (for Claude Code)</span></div>
</div>
</div>
</div>
</div>
<!-- Step 3: Run -->
<div class="panel-card p-5 mb-3">
<div class="flex items-start gap-4">
<span class="w-7 h-7 rounded-full bg-indigo-500 text-white text-xs font-bold flex items-center justify-center shrink-0 mt-0.5">3</span>
<div class="flex-1">
<h2 class="text-sm font-bold text-slate-800 mb-2">Run in development</h2>
<p class="text-xs text-slate-500 mb-3">Start the dev server with hot reload:</p>
<div class="bg-slate-50 rounded-lg p-3 font-mono text-xs space-y-1">
<div class="text-slate-700">cd ~/repos/my-app</div>
<div class="text-slate-700">congo dev</div>
</div>
<p class="text-[11px] text-slate-400 mt-2">The app starts on a local port with live reload. In-memory database — no setup needed. Edit a template file and see changes instantly.</p>
</div>
</div>
</div>
<!-- Step 4: Add a feature -->
<div class="panel-card p-5 mb-3">
<div class="flex items-start gap-4">
<span class="w-7 h-7 rounded-full bg-indigo-500 text-white text-xs font-bold flex items-center justify-center shrink-0 mt-0.5">4</span>
<div class="flex-1">
<h2 class="text-sm font-bold text-slate-800 mb-2">Add a feature</h2>
<p class="text-xs text-slate-500 mb-3">Add a new page with a model and controller. Example: a todo list.</p>
<p class="text-[11px] font-semibold text-slate-600 mb-1.5">1. Create the model</p>
<div class="bg-slate-50 rounded-lg p-3 font-mono text-[11px] text-slate-600 mb-3">
<div class="text-slate-400">// web/models/todo.go</div>
<div>type Todo struct {</div>
<div class="pl-4">database.Model <span class="text-slate-400">// ID, CreatedAt, UpdatedAt</span></div>
<div class="pl-4">Title string</div>
<div class="pl-4">Done bool</div>
<div>}</div>
<div class="mt-1 text-slate-400">// Register in web/models/db.go:</div>
<div>var Todos = database.Manage(DB, new(Todo))</div>
</div>
<p class="text-[11px] font-semibold text-slate-600 mb-1.5">2. Create the controller</p>
<div class="bg-slate-50 rounded-lg p-3 font-mono text-[11px] text-slate-600 mb-3">
<div class="text-slate-400">// web/controllers/todos.go</div>
<div>func Todos() (string, *TodosController) {</div>
<div class="pl-4">return "todos", &TodosController{}</div>
<div>}</div>
<div class="mt-1">func (c *TodosController) Setup(app *application.App) {</div>
<div class="pl-4">c.BaseController.Setup(app)</div>
<div class="pl-4">app.Handle("GET /todos", app.Serve("todos.html", nil))</div>
<div class="pl-4">app.Handle("POST /todos", app.Method(c, "Create", nil))</div>
<div>}</div>
<div class="mt-1 text-slate-400">// Register in web/main.go:</div>
<div>application.WithController(controllers.Todos()),</div>
</div>
<p class="text-[11px] font-semibold text-slate-600 mb-1.5">3. Create the view</p>
<div class="bg-slate-50 rounded-lg p-3 font-mono text-[11px] text-slate-600">
<div class="text-slate-400"><!-- web/views/todos.html --></div>
<div>{{`{{template "main.html" .}}`}}</div>
<div>{{`{{define "content"}}`}}</div>
<div><h1>Todos</h1></div>
<div>{{`{{range $t := todos.All}}`}}</div>
<div class="pl-4"><div>{{`{{$t.Title}}`}}</div></div>
<div>{{`{{end}}`}}</div>
<div><form hx-post="/todos" hx-target="body"></div>
<div class="pl-4"><input name="title" required /></div>
<div class="pl-4"><button>Add</button></div>
<div></form></div>
<div>{{`{{end}}`}}</div>
</div>
<p class="text-[11px] text-slate-400 mt-2">Tables auto-create on startup. No migrations needed. HTMX handles form submission without JavaScript.</p>
</div>
</div>
</div>
<!-- Step 5: Deploy -->
<div class="panel-card p-5 mb-3">
<div class="flex items-start gap-4">
<span class="w-7 h-7 rounded-full bg-indigo-500 text-white text-xs font-bold flex items-center justify-center shrink-0 mt-0.5">5</span>
<div class="flex-1">
<h2 class="text-sm font-bold text-slate-800 mb-2">Deploy</h2>
<p class="text-xs text-slate-500 mb-3">From the dashboard, go to the Services panel and deploy your project. Or use the CLI:</p>
<div class="bg-slate-50 rounded-lg p-3 font-mono text-xs space-y-1">
<div class="text-slate-700">congo build</div>
<div class="text-slate-700">congo launch</div>
</div>
<p class="text-[11px] text-slate-400 mt-2">Congo builds a Docker image, creates a container on the internal network, and routes traffic with automatic TLS.</p>
</div>
</div>
</div>
<!-- Step 6: Activate the AI Agent -->
<div class="panel-card p-5 mb-3">
<div class="flex items-start gap-4">
<span class="w-7 h-7 rounded-full bg-indigo-500 text-white text-xs font-bold flex items-center justify-center shrink-0 mt-0.5">6</span>
<div class="flex-1">
<h2 class="text-sm font-bold text-slate-800 mb-2">Activate the AI Agent</h2>
<p class="text-xs text-slate-500 mb-3">Your server has Claude Code pre-installed. Authenticate it to enable the autonomous AI agent that monitors, builds, and deploys.</p>
<div class="bg-slate-50 rounded-lg p-3 font-mono text-xs space-y-1">
<div class="text-slate-400"># Open VS Code from the dashboard (Code button)</div>
<div class="text-slate-400"># Open a terminal (Ctrl+`) and run:</div>
<div class="text-slate-700">claude auth</div>
</div>
<p class="text-[11px] text-slate-400 mt-2">After authentication, the agent starts automatically. It reads tasks from the database, does the work, and logs results. Create tasks from the <a href="/work/tasks" class="text-indigo-500" hx-boost="true">Tasks page</a> and the agent picks them up.</p>
</div>
</div>
</div>
<!-- What's next -->
<div class="panel-card p-5 mb-3" style="border-left: 3px solid rgba(99,102,241,0.3);">
<h2 class="text-sm font-bold text-slate-800 mb-2">What's next</h2>
<div class="space-y-2 text-xs text-slate-500">
<div class="flex items-start gap-2">
<span class="text-indigo-400 mt-0.5">▸</span>
<span><strong class="text-slate-700">Create tasks for the agent</strong> — Go to <a href="/work/tasks" class="text-indigo-500" hx-boost="true">Tasks</a>, add what you want built. The agent picks up todo tasks every 5 minutes.</span>
</div>
<div class="flex items-start gap-2">
<span class="text-indigo-400 mt-0.5">▸</span>
<span><strong class="text-slate-700">Use Claude directly</strong> — Open the terminal and run <code class="bg-slate-100 px-1 rounded text-[10px]">claude</code> for interactive AI-assisted development, just like a regular Claude Code session.</span>
</div>
<div class="flex items-start gap-2">
<span class="text-indigo-400 mt-0.5">▸</span>
<span><strong class="text-slate-700">Add a domain</strong> — Point a DNS A record to this server's IP, then add it from the service settings. TLS is automatic.</span>
</div>
</div>
</div>
<div class="text-center py-4">
<a href="/" class="text-[11px] text-indigo-500 hover:text-indigo-600 font-medium transition-colors" hx-boost="true">← Back to Dashboard</a>
</div>
</div>
{{end}}