Add a terminal to the IDE - in the sky

[lakruzz]

GitHub CodeSpaces are now available for free to all GitHub users. CodeSpaces are essentially next step from the web based VS Code editor we've already explored. The addition is that we now also have access to an actual linux terminal where we can do stuff.

Note

☝️ Learning goals in this issue

• Start a Code Space
• Work from there as if it was your own PC
• Add a but in a shared setup
• Open a new development branch on an issue - from the command line
• Tweak the CodeSpace to your team's standards by adding a .devcontainer configuration

---

Tip

You can see you current CodeSpaces from github.com/codespaces.
This follows the well GitHub standard, that you access personal information from global URLs - when you are logged in:
github.com/issues
github.com/settings
github.com/notifications
github.com/codespaces

🏋️‍♀️ Exercise

• 👉 Create a new CodeSpace on this repo 👈

You go to Code panel, hit the Code button, Select the CodeSpace tab and then create a CodeSpace

When the CodeSpace is done building you'll see a full fledged IDE environment - it look like the one we explored earlier in the web based editor, only this time you have a genuine linux terminal in the bottom - as if your were on your own machine.

🏋️‍♀️ Exercise

• 👉 run a few familiar commands👈

Try stuff like ls, gh, env, cat R<TAB>, git log, az and docker run hello-world

It feels like home eh? Even tab-completion, git, docker, gh is pre-installed. Well the Azure CLI az wasn't installed, but everything else was there.

Let's imagine that we're a development team who agrees that:

Caution

👮‍♀️ You must only make changes that are related to an issue.
👮‍♀️ Each issue must have its own dedicated development branch.
👮‍♀️ Work can only be added to the master branch through pull-requests.

If these are rules we should make it easy to follow them.

Now consider, that this issue you're looking at now - #4 instructs you to configure the CodeSpace in a way that ensures that.

🏋️‍♀️ Exercise

• 👉Create a development branch dedicated to issue Add a terminal to the IDE - in the sky #4👈
• 👉Add the az CLI to the devcontainer👈
• 👉Install the GitLens, Copilot and Copilot Chat VS Code extensions and add them to the devcontainer👈
• 👉Create a .gitconfig in the root of the repo, and make it active for all users of the devcontainer👈

Let's do all this! it's easy!

In the CodeSpace go to the terminal and run the command listed below.

gh issue develop 4 --checkout

What happened? Well a branch dedicated to issue No. 4 was created. Now you can hack all you want and when you are done push the branch and create pull request upon it.

Actually something similar is available even from the GUI - I just wanted to demonstrate the power of gh.

In the command palette find the command that will Add Dev Container configuration chose to modify the current configuration. In the list find and install the Azure CLI.

In the extension list find and install GitLens, Copilot and Copilot Chat and then add them to the .devcontainer configuration.

In the .devcontainer configuration also add a PostCreateCommand as listed below as the second-to-last line in the configuration - just before the last closing bracket } ⚠️ remember to add a comma , after the closing bracket above.

"postCreateCommand": "git config --local --get include.path | grep -e ../.gitconfig || git config --local --add include.path ../.gitconfig"

🤔 Hmm - what does it do? It looks if the the .gitconfig in the repo-root is already added to the local gitconfig - and if not, it adds it. Since this runs fall all users of the CodeSpace the team now effectively share a jointly maintained and version controlled .gitconfig - that is handy!

...and finally create the new file .gitconfig in the root of the repo and let it contain the following

👇 .gitconf file

[core]
  editor = nano
 
[push]
  default = current
 
[alias]
  undo-commit = reset --soft HEAD^
  addremove = add -A
  recommit = commit -C HEAD --amend
  co = checkout
  st = status
  root = rev-parse --show-toplevel
  tree = log --graph --full-history --all --color --date=short --pretty=format:\"%Cred%x09%h %Creset%ad%Cblue%d %Creset %s %C(bold)(%an)%Creset\"
  backward = checkout HEAD^1
  forward = !git checkout $(git log --all --ancestry-path ^HEAD --format=format:%H | tail -n 1)

You may want to test the new Dev Container configuration before you commit it?

In the command palette find the command that will Rebuild Dev Container configuration. Perform some tests;From the terminal test the following commands

git config --list --show-origin
git tree
az

Open the workflow .yml you created earlier and see that is gives you info about who committed it (That's GitLens)

Open the .gitconfig file you created - invoke the CoPilot Chat. Prompt it to

Add the most commonly used aliases, but don't delete or overwrite any existing settings

🏋️‍♀️ Exercise

• 👉Commit the changes made to issue Add a terminal to the IDE - in the sky #4 and create a pull request👈
• 👉Merge the pull request - and clean up the branch👈

add, commit and push the development branch branch either from the terminal of from the GUI - make sure the commit message mentions Issue #4 like Fixed #4"

Go to the github.com and browse the repo (recall gh browse?) and finish the pull request from the web. Come back to the CodeSpace and clean up - could be something like the commands listed below: 👈**

git co master
git pull
git branch -d 4
# After you've typed '4' use <TAB> to complete the branch name

...or you can click and point your way through the GUI - what ever suits you best.