Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added .github/images/add-to-devcontainer-button.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added .github/images/delete-codespace-command.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added .github/images/green-code-button.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added .github/images/list-of-codespaces.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added .github/images/python-extensions.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added .github/images/rebuild-codespace-command.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added .github/images/remote-connection-status.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added .github/images/run-and-debug-tab.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added .github/images/vscode-explorer-tab.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added .github/images/vscode-extensions-tab.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added .github/images/vscode-terminal-tab.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 4 additions & 4 deletions .github/steps/1-first-codespace.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,13 +33,13 @@ Let's get started! We'll start up a Codespace, run the application, make a chang

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

<img width="300" alt="green code button" src="https://github.com/user-attachments/assets/a9d80b0d-4614-4b26-83dd-b4b6fefd76c9" />
<img width="300" alt="green code button" src="https://raw.githubusercontent.com/FidelusAleksander/code-with-codespaces/refs/heads/main/.github/images/green-code-button.png" />

1. 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.

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

<img width="350" alt="remote connection status in VS Code" src="https://github.com/user-attachments/assets/35fa3230-db51-4a9d-a82b-3a1184e2e9a0"/>
<img width="350" alt="remote connection status in VS Code" src="https://raw.githubusercontent.com/FidelusAleksander/code-with-codespaces/0e3bbe4318a6d94d473494d9251e57a2e7387986/.github/images/remote-connection-status.png"/>

> [!TIP]
> GitHub uses the [universal](https://github.com/devcontainers/images/tree/main/src/universal) Codespace image if the repository doesn't include a configuration. It includes several useful and commonly used tools.
Expand All @@ -50,11 +50,11 @@ Let's get started! We'll start up a Codespace, run the application, make a chang

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

<img width="250" alt="vs code explorer tab" src="https://github.com/user-attachments/assets/76af1f05-1fed-43ff-b362-43d1c6c6cc53" />
<img width="250" alt="vs code explorer tab" src="https://raw.githubusercontent.com/FidelusAleksander/code-with-codespaces/0e3bbe4318a6d94d473494d9251e57a2e7387986/.github/images/vscode-explorer-tab.png" />

1. In the lower panel, select the **TERMINAL** tab.

<img width="350" alt="vs code terminal tab" src="https://github.com/user-attachments/assets/9bb493b6-167c-4414-8f39-ab9c4baa5514" />
<img width="350" alt="vs code terminal tab" src="https://raw.githubusercontent.com/FidelusAleksander/code-with-codespaces/0e3bbe4318a6d94d473494d9251e57a2e7387986/.github/images/vscode-terminal-tab.png" />

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

Expand Down
2 changes: 1 addition & 1 deletion .github/steps/2-custom-image.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ Let's create this file and set a few of the most common settings. For other opti

1. 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.

<img width="350" alt="rebuild codespace command" src="https://github.com/user-attachments/assets/2b72e1a7-68c4-4c8d-8bf1-5727a520fd0e"/>
<img width="350" alt="rebuild codespace command" src="https://raw.githubusercontent.com/FidelusAleksander/code-with-codespaces/0e3bbe4318a6d94d473494d9251e57a2e7387986/.github/images/rebuild-codespace-command.png"/>

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

Expand Down
14 changes: 7 additions & 7 deletions .github/steps/3-customize-codespace.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ Let's add the GitHub CLI, extensions to run the python program using VS Code, an
Codespaces: Add Dev Container Configuration Files...
```

<img width="350" alt="vs code configure dev container command" src="https://github.com/user-attachments/assets/38265419-47bf-4ac8-a0fd-71ea67e2d6eb" />
<img width="350" alt="vs code configure dev container command" src="https://raw.githubusercontent.com/FidelusAleksander/code-with-codespaces/0e3bbe4318a6d94d473494d9251e57a2e7387986/.github/images/configure-dev-container-command.png" />

1. Select the option `Modify your active configuration...`.

Expand All @@ -39,15 +39,15 @@ Let's add the GitHub CLI, extensions to run the python program using VS Code, an

1. In the left navigation, select the **Extension** tab.

<img width="200" alt="vs code extensions tab" src="https://github.com/user-attachments/assets/d7941711-e5a9-4871-83f3-c723c203bc70" />
<img width="200" alt="vs code extensions tab" src="https://raw.githubusercontent.com/FidelusAleksander/code-with-codespaces/0e3bbe4318a6d94d473494d9251e57a2e7387986/.github/images/vscode-extensions-tab.png" />

1. Search for `python` and find entries for `Python` and `Python Debugger`.

<img width="250" alt="python extensions for vs code" src="https://github.com/user-attachments/assets/b34ef808-2023-41f2-8963-85ba04d5684b" />
<img width="250" alt="python extensions for vs code" src="https://raw.githubusercontent.com/FidelusAleksander/code-with-codespaces/0e3bbe4318a6d94d473494d9251e57a2e7387986/.github/images/python-extensions.png" />

1. Right click on each entry and select the `Add to devcontainer.json` option.

<img width="250" alt="add to devcontainer config button" src="https://github.com/user-attachments/assets/30ada390-c8a7-4175-9d83-dfa17fc83de3" />
<img width="250" alt="add to devcontainer config button" src="https://raw.githubusercontent.com/FidelusAleksander/code-with-codespaces/0e3bbe4318a6d94d473494d9251e57a2e7387986/.github/images/add-to-devcontainer-button.png" />

1. Navigate to and open the `.devcontainer/devcontainer.json` file.

Expand Down Expand Up @@ -116,7 +116,7 @@ The Dev Container specification provides multiple locations to run [lifecycle sc

1. Open the VS Code Command Palette (`CTRL`+`Shift`+`P`) and run the `Codespaces: Rebuild Container` command. Select the **Rebuild** option. A full build is not necessary.

<img width="350" alt="rebuild codespace command" src="https://github.com/user-attachments/assets/2b72e1a7-68c4-4c8d-8bf1-5727a520fd0e"/>
<img width="350" alt="rebuild codespace command" src="https://raw.githubusercontent.com/FidelusAleksander/code-with-codespaces/0e3bbe4318a6d94d473494d9251e57a2e7387986/.github/images/rebuild-codespace-command.png"/>

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

Expand All @@ -133,11 +133,11 @@ Now that you've rebuilt the codespace, let's verify the python extension, python

1. In the left sidebar, click the extensions tab and verify that the Python extensions are installed and enabled.

<img width="250" alt="python extensions for vs code" src="https://github.com/user-attachments/assets/b34ef808-2023-41f2-8963-85ba04d5684b" />
<img width="250" alt="python extensions for vs code" src="https://raw.githubusercontent.com/FidelusAleksander/code-with-codespaces/0e3bbe4318a6d94d473494d9251e57a2e7387986/.github/images/python-extensions.png" />

1. In the left sidebar, select **Run and Debug** tab and then press the **Start Debugging** icon. VS Code will open the lower panel and show the run logs.

<img width="250" alt="run and debug tab pointing to start button" src="https://github.com/user-attachments/assets/63327b56-b033-4ca1-aa83-93ec076389f5"/>
<img width="250" alt="run and debug tab pointing to start button" src="https://raw.githubusercontent.com/FidelusAleksander/code-with-codespaces/0e3bbe4318a6d94d473494d9251e57a2e7387986/.github/images/run-and-debug-tab.png"/>

1. In the lower panel, switch to the **TERMINAL** tab.

Expand Down
4 changes: 2 additions & 2 deletions .github/steps/4-use-codespace.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ The final test of our Codespace is to put ourselves in the position of an onboar

1. Select the **Codespaces** tab to show the list of created Codespaces.

<img width="250" alt="list of codespaces" src="https://github.com/user-attachments/assets/2ed90b91-0c62-4c49-96f5-75abbb34a989" />
<img width="250" alt="list of codespaces" src="https://raw.githubusercontent.com/FidelusAleksander/code-with-codespaces/0e3bbe4318a6d94d473494d9251e57a2e7387986/.github/images/list-of-codespaces.png" />

1. Find the active entry, select the three dot menu `...`, and select the **Delete** command.

<img width="500" alt="delete codespace command" src="https://github.com/user-attachments/assets/911a62a5-c50f-497b-a853-6e3865886211" />
<img width="500" alt="delete codespace command" src="https://raw.githubusercontent.com/FidelusAleksander/code-with-codespaces/0e3bbe4318a6d94d473494d9251e57a2e7387986/.github/images/delete-codespace-command.png" />

> [!TIP]
> You can manage all of your Codespaces across all projects at https://github.com/codespaces
Expand Down
3 changes: 1 addition & 2 deletions .github/workflows/0-start-exercise.yml
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,10 @@ jobs:
if: |
!github.event.repository.is_template
name: Start Exercise
uses: skills/exercise-toolkit/.github/workflows/start-exercise.yml@v0.5.0
uses: skills/exercise-toolkit/.github/workflows/start-exercise.yml@start-exercise-updates
with:
exercise-title: "Code with Codespaces"
intro-message: "Let's create a pre-configured environment to simplify development!"

post_next_step_content:
name: Post next step content
runs-on: ubuntu-latest
Expand Down