Exercise: Code with Codespaces

[github-actions]

Code with Codespaces

👋 Hey there @shinny-xuyida! Welcome to your Skills exercise!

Let's create a pre-configured environment to simplify development!

As you complete each step, I will respond in the comments to:

• check your work and give feedback
• share next steps
• occasionally share tips
• congratulate you when you finish!

Good luck and have fun!
- Mona

[github-actions]

Step 1: Start a codespace and push some code

What's the big deal about Codespaces?

A codespace is a development environment hosted in the cloud, defined by configuration files in your repository. This creates a repeatable development environment tailored specifically to the project that simplifies developer onboarding and avoids the famous phrase "It works on my machine!" 😎

Each codespace follows the Dev Container specification and is hosted by GitHub as a Docker container.

But don't worry! You don't need to know Docker or even have it installed on your machine!

Tip

Since the Dev Container configuration is part of the repository, you can also use it locally with your own Docker host. Nice!

A Codespace has several advantages/features compared to local development. To name a few:

• Start a codespace directly from the repository page.
• Develop in the browser. No IDE installation required.
  • Option to use a local install of VS Code to link to the remote Codespace.
• Preconfigure everything you need to run the project:
  • Add features to install common development needs.
  • Run scripts at various steps of the codespace lifecycle (e.g install python/npm packages).
  • Setup VS Code settings and extensions to match the project needs.
• Fast internet access (since the container is in the datacenter).

Tip

Codespaces are even useful in short-lived situations like reviewing a pull request. No need to verify you have the right setup to test out the incoming code changes.

Let's get started! We'll start up a Codespace, run the application, make a change, and push it. Like normal development! 🤓

⌨️ Activity: Start a codespace

1. Open a second tab and navigate to this repository. Ensure you are on the Code tab.

2. Above the files list on the right, click the green <> Code button.

   

3. Select the Codespaces tab and click the Create codespace on main button. A new window will open running VS Code and it will connect to the remote Codespace. Wait a few minutes for the codespace to be created.

4. Look in the bottom left of the VS Code window see the remote connection.

   

Tip

GitHub uses the universal Codespace image if the repository doesn't include a configuration. It includes several useful and commonly used tools.

⌨️ Activity: Run the application

1. Ensure you are in the VS Code Codespace.

2. In the left sidebar, select the file Explorer tab and open the file src/hello.py.

   

3. In the lower panel, select the TERMINAL tab.

   

4. Paste the following command in the Codespace's remote terminal to show the installed versions of several tools. Note the versions for comparison later.

   node --version
   dotnet --version
   python --version
   gh --version

5. Paste the following command to run the Python program in the Codespace's remote terminal.

   python src/hello.py

⌨️ Activity: Push changes to your repository from the codespace

1. Replace the src/hello.py file contents with the following and save the file.

   print("Hello World!")

2. With the message updated, commit the change and push it to GitHub. Use VS Code's source control tools or the below terminal commands.

   git add 'src/hello.py'
   git commit -m 'fix: incomplete hello message'
   git push

3. (optional) Back in your web browser, open the src/hello.py file to to verify the change was updated.

4. With the the change pushed to GitHub, Mona will begin checking your work. Give her a moment to provide feedback and the next learning steps.

[github-actions]

Step 1 - Passed ✅

Status	Description
✅ - Pass	Hello message fixed in hello.py

[github-actions]

🎉🎉🎉 Nice work! Everything is perfect! 🎉🎉🎉
Preparing content for step 2! One moment... 🤓

[github-actions]

Step 2: Use a custom image in your codespace

The didn't specify any configuration for the codespace we just created, so GitHub used a default Docker image. While this is very useful, it won't be consistent and it doesn't version lock our runtime environment. Specifying the configuration is important to keep the development environment repeatable.

Let's do that now by providing a specific docker container image.

How to configure a Codespace?

Configuration is provided directly in the repository via the .devcontainer/devcontainer.json. You can even add multiple configurations!

Let's create this file and set a few of the most common settings. For other options like setting configuring VS Code, forwarding ports, and running lifecycle scripts, see the Codespaces documentation on GitHub.

⌨️ Activity: Customize the codespace

1. Ensure you are in the VS Code Codespace.

2. Use the VS Code file explorer to create the configuration file.

   .devcontainer/devcontainer.json

   Alternately, run the below terminal command to create it.

   mkdir -p .devcontainer
   touch .devcontainer/devcontainer.json

3. Open the .devcontainer/devcontainer.json file and add the following content. Let's start with the default image.

   {
     "name": "Universal - Latest",
     "image": "mcr.microsoft.com/devcontainers/universal:latest"
   }

   💡 Tip: The name is optional but it will help identify the configuration when creating a codespace on GitHub, if there are multiple options.

4. After saving, VS Code likely popped up a notification that it detected a configuration change. You can Accept that option to rebuild the development container or manually use the Command Palette (CTRL+Shift+P) and run the command Codespaces: Rebuild Container. Select the Rebuild option. A full build is not necessary.

   

5. Wait a few minutes for the Codespace to rebuild and VS Code to reconnect.

6. Expand the lower panel and select the TERMINAL tab.

7. Paste the following command to view the versions of several tools. Notice they are the same from the previous step.

   node --version
   dotnet --version
   python --version
   gh --version

8. With our new configuration verified, let's commit the changes. Use VS Code's source control tools or the below terminal command.

   git add '.devcontainer/devcontainer.json'
   git commit -m 'feat: Add codespace configuration'
   git push

9. With our dev container configuration committed, Mona will begin checking your work. Give her a moment to provide feedback and the next learning steps.

[github-actions]

Please, follow the steps above.
I'll watch your progress in the background to provide feedback. 🧐