AI: Batteries Included

What is an IDE?

As you begin your project, you'll benefit from having a dedicated space that has the right tools and setup that help you work effectively.

This includes your computer setup, your keyboard and mouse -- even your desk and chair. This makes up your *physical* environment.

An Integrated Development Environment, or IDE, describes the virtual environment where we can:

  • edit code with context-based highlighting and formatting,
  • compile code (translate our code to machine-readable code)
  • debug code (see if something doesn't work and where)

The main benefit of an effective IDE is that we're centralizing the ways that we interact with/change our code -- rather than use several different applications to make changes, we can use extensions within our IDE to keep our changes in one place.

What IDE should I use?

Our choice: VSCode using a Linux environment

We'll use Visual Studio Code (VSCode) as our IDE as we begin creating a website from scratch.

As we noted, VSCode will help us centralize where we do the bulk of our work towards our project -- helping several different applications/services work in concert with one another, making our work much easier.

These include:

  • Ubuntu

    • A Linux-based operating system where we can write and execute code (the basis of our project), and where Claude Code (our LLM assistant) will execute its changes.

    Gives us an isolated space to make changes as we work in our IDE, with full permissions.

  • Windows Subsystem for Linux (WSL)

    • Allows for us to run the Linux-based environment in our native Windows environment, without needing to use a virtual machine or partition our device.

  • Node.js

    • An environment that allows us to execute JavaScript code (one of the languages we'll use to create our website) outside of a web browser, allowing us to visualize our project in real time locally.

  • Claude Code for VSCode

    • An AI-powered assistant that uses Linux commands to plan and generate code based on your prompts.

    Claude Code operates directly within your IDE and, if given proper permissions, can utilize command line interfaces to manage your project beyond your local environment.

  • GitHub CLI

    • A command line interface (CLI) for GitHub that allows us to save and track our changes to our code repository directly from Ubuntu -- especially useful, as Claude Code can interface with this to automatically manage your branches.

Installation Guide for Setting Up Your IDE

1. Creating a GitHub Account

GitHub is an online platform we'll use for version control across different iterations of our project.

We'll need an account for other stages of setting up our IDE, so let's do that now:

  1. Visit GitHub and click `Sign Up` in the top right corner of the screen to create an account.
  2. Input your email, password choice, public username, and country/region.
  3. Click `Create Account` and verify through the email sent to the account you provided.

2. Installing WSL and Ubuntu

WSL lets us run our Linux-based environment (needed for Claude Code) directly on our Windows Setup.

  1. Right-click the Start button, and select "Windows Powershell (Administrator)".
  2. In the terminal, type `wsl --install` and hit enter.
  3. Once completed, restart your computer.
  4. Ubuntu will finish installing, then prompt you to create a Unix account with a password. Do not forget this information!
  5. Open Ubuntu and run `sudo apt update && sudo apt upgrade` to ensure that your packages are updated.

3. Installing Node.js

Node.js will let us run JavaScript (a language used for websites) outside of an internet browser.

We'll use it to visualize our website in development by building it locally.

  1. Launch Ubuntu and enter the following command: `sudo apt install nodejs npm`
  2. Once installed, verify your installation with `node --version` and `npm --version`

4. Installing Git in WSL and the GitHub CLI

Git is a version control system that will let us save and track the changes we make to our code repository.

The GitHub CLI is a command-line tool that lets us execute GitHub functions from our terminal.

Git:

  1. Add GitHub's package repository:
    • `curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | sudo dd of=/usr/share/keyrings/githubcli-archive-keyring.gpg`
  2. Add the repository to your sources:
    • `echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | sudo tee /etc/apt/sources.list.d/github-cli.list > /dev/null`
  3. Update the package list:
    • `sudo apt update`
  4. Install GitHub CLI:
    • `sudo apt install gh -y`
  5. Verify your installation:
    • `gh --version`
  6. Authenticate GitHub CLI:
    • `gh auth login`
  7. Check your status -- this should return "logged in to github.com as [your username]":
    • `gh auth status`

Test if it works:

We'll try creating a test directory in GitHub from the terminal. In Ubuntu, run:

  • `mkdir ~/test-repo`
  • `cd ~/test-repo`

Now, we'll initialize Git:

  • `git init`
  • `echo "# Test Repository" > README.md`
  • `git add README.md`
  • `git commit -m "Initial commit"`

Finally, we'll make the repository using the GitHub CLI:

  • `gh repo create test-repo --private --source=. --push`

You should now be able to check GitHub, navigate to your repositories, and see the test repository.

5. Installing VSCode

We're now ready to download and install VSCode, our IDE itself.

  1. Visit the VSCode website and select the "Windows" download package.
  2. When your download is finished, double-click the file to run it. This will open a prompt page for the installer.
  3. Follow the prompts provided by the installer, and click "Install".
  4. Click "Finish" and VSCode should launch automatically.
  5. Once open, you should be able to choose your preferences (such as theme), as well as link your GitHub account (highly recommended).

6. Installing Claude Code and WSL Extensions for VSCode

We need to setup VSCode to be able to communicate with WSL in order for Claude Code to work in our IDE.

Claude Code

  1. Open VSCode, and open the "Extensions" tab on the left side of the screen. Search for `Claude Code for VSCode` from `Anthropic`.
  2. Install and enable Claude Code.
  3. Claude Code may now be called from the Terminal in VSCode with the line `claude`.

Windows Subsystem for Linux

  1. Under "Extensions" again, search for `WSL` from `Microsoft`.
  2. Install and enable WSL.

Ensure that you only select and install these extensions from their verified creators (marked with a blue check).

Now that your IDE is set up, visit the Project Creation Hub to get started creating your website!