Part 2: Development environment

In Part 1: Frontend with Lovable we built the Snake frontend inside Lovable. Before we run it, we get the code out of Lovable and set up a place to work on it.

Get the code onto your machine

The easiest way to get the code out of Lovable is to connect the project to GitHub.

Connect Lovable to your GitHub account and let it create a repository for the project. From there you have two ways to work on the code.

You can clone it to your laptop:

git clone https://github.com/<your-username>/<your-repo>.git
cd <your-repo>

Or open it in a Codespace, which is what I recommend for this workshop.

Set up your environment

I run everything in GitHub Codespaces, a ready-made dev container attached to the repo.

Open the repo on GitHub and create a Codespace from the Code menu. It opens VS Code in the browser on the Lovable project, with Node 24, Python 3.12, and Docker already installed. You can keep working in the browser, or open the Codespace in VS Code Desktop.

Whether you work in a Codespace or on your own machine, add the few tools the rest of the workshop needs.

We use uv as the Python package manager for the backend.

Install it with pip:

pip install uv

Check that it's there with uv --version.

Next comes the coding assistant that writes the backend for us. I use Codex, but any other assistant works the same way.

The Codespace's Node installs it as a global npm package:

npm install -g @openai/codex

Start it with codex and sign in with your ChatGPT account when it prompts you.

If you prefer Claude Code, install it too:

curl -fsSL https://claude.ai/install.sh | bash

Start it with claude and sign in when it prompts you.

The AWS CLI handles the deployment part.

Install it as a uv tool so it stays isolated from the backend's own dependencies:

uv tool install awscli

Confirm it with aws --version, and set up the credentials later in Part 12: Deploy to AWS with infrastructure as code.

The last tool is dirdotenv, which loads the .env file for whatever folder you're in. That way the backend and the deploy step pick up their settings without exporting variables by hand.

Install it as a uv tool:

uv tool install dirdotenv

dirdotenv works through a shell hook that runs on every prompt and loads the .env of the current folder.

In bash, the hook that loads from .env comes from dirdotenv hook bash.

Append this line to your ~/.bashrc:

echo 'eval "$(dirdotenv hook bash)"' >> ~/.bashrc

Open a new terminal, or run source ~/.bashrc, and dirdotenv loads the .env file as soon as you cd into a folder that has one.

AGENTS.md

Coding assistants need context about the project. Without it, they'll guess at the tools we use, and those guesses won't always be right.

For example, we use uv in our project. But the agent may assume pip and create a requirements.txt file we don't need. Or, even worse, install a library into our global Python instead of the virtual environment.

We fix that by creating an AGENTS.md file at the repo root, which the assistant reads automatically on startup from anywhere in the project.

Put the house rules in it:

for backend, use uv for dependency management. a few useful commands:

uv sync
uv add <PACKAGE-NAME>
uv run python <PYTHON-FILE>

regularly commit code to git

If you use Claude, also create a CLAUDE.md with this single line:

@AGENTS.md

That tells Claude to read AGENTS.md, and the same file works with any other assistant.

It starts short, and it grows. Watch for the assistant repeating a mistake or hunting for something it should already know. When that happens, add a line that gives it the answer up front.

With the environment ready, we run the frontend and look at its tests in Part 3: Run and test the frontend.