Getting started with OpenCode (the developer way)

Your first web CRUD application

My main recomendation while using OpenCode is to execute it inside a Docker Container as a sandbox while we wait for Docker Sandboxes stable version which has better support for AI Coding Agents.

First install Docker Desktop fron this link.

Then from the terminal execute the following command to start Docker:

docker desktop start

Pull the official OpenCode image from DockerHub (source).

docker pull ghcr.io/anomalyco/opencode

List the images downloaded.

docker image list 

Copy the ID. Now create a container named opencode with port 8080 exposed so you can access the future web from the host.

docker create --name opencode -p 8080:8080 [ID]

Start the container named opencode

docker start opencode

Now enter the container and execute the Shell

docker exec -it opencode /bin/sh

Now that you are in the Shell execute:

cd /home
mkdir taskadmin
cd taskadmin
opencode

Now in OpenCode execute this prompt so the LLM knows where is working and how to install programs

Initialize agents.md with the current operating system and the available package manager

Now let OpenCode intall git

Initialize git with main

For begginers it is better to check every command that the Agent wants to execute.

Set opencode to ask me every time you want to run a command. Search at opencode.ai/docs

Restart OpenCode to read the settings

Let’s continue with the setup installing the GitHub CLI the Agent con interact with GitHub.

Install github cli

Exit OpenCode and execute in the terminal the following command. Login using the browser that is the faster way.

gh auth login

Once you are logged in, back to OpenCode.

In software development (especially within Agile methodologies such as Scrum or Kanban), a User Story is a clear, concise, and simplified explanation of a system functionality, written from the perspective of the end user or customer.

A user story does not seek to say how something is going to be programmed, but what needs to be achieved and why.

So we are going to tell OpenCode to write one for our app.

Create a branch. Write a complete .feature file in Gherkin syntax for a Task Management CRUD application. Include the user story header and individual scenarios for creating, viewing, updating, and deleting tasks. Save it in specs/start/taskadmin.feature

It is important to save the User Story in a file for future tasks like updating the functionality or creating tests from it. It should look similar to:

Now we need to tell the Agent the Technicall Specification of the web app. We are going to create a simple one, so:

With taskadmin.feature generate the technical specification, save it in /specs/start/spec.md. Create a simple web with vanilla JS, HTML, CSS and local storage

Review what the Agent did and if you agree, go ahead with the implementation.

Implement

You will have something similar to this

Now lets serve the web

Serve the web to the windows host since we are inside a docker container using darkhttpd

It is a good practice to keep agents.md updated with important changes on the app

setup darkhttpd for this project and update agents.md

Now lets commit

Commit and merge

Now lets serve the web to the host

Serve the application in the background to the host

From the host open de browser on http://localhost:8080. It should be similar to:

Now the finals steps. Let’s use GitHub Pages to publish the app.

Create a repository on GitHub

Push to the repo

Enable GitHub Pages and give me the final url

Should be similar to