👩💻Setup your Dev Environment
Setup your dev environment with dev containers for VS Code.
Code for Life has set up their development environment within dev containers for VS Code. In short, dev containers are containerised virtual machines that come preinstalled with all the software and tools necessary for you to develop.
Inside each git-submodule/-repository within our workspace, we define:
.devcontainer.json- the dev container definition for a specific git-repository.codeforlife.code-workspace- the code-workspace definition for a specific git-repository.
VS Code's dev containers allow us to setup your dev environment for you so you don't have to worry about doing it yourself. Furthermore, anytime we make a change to our dev environment, we will git-push the latest dev container definition(s) to their respective git-repositories. Then, you can just simply git-pull the latest dev container definition(s) and rebuild the dev containers.
Follow the below steps to build and run dev containers within the CFL workspace.
1. Install and set up Git
Git is required to sync your local code changes with our online git-repositories.
Follow Git's installation instructions and first-time setup instructions.
2. Install Docker Engine
Docker Engine is required to build and run dev containers.
3. Install VS Code
Our dev containers are specifically defined to work within the VS Code IDE.
4. Install the Dev Containers extension in VS Code
Open the Extensions tab (Ctrl+Shift+X) in VS Code.
Search for the Dev Containers extension and install it.
5. Fork our workspace and repos
In a directory of your choosing on your local machine, fork and clone our workspace (only the main branch). Within your local codeforlife-workspace directory, you'll then need to fork (only the main/development branch) and clone all the CFL repos you wish to develop for.
For the dev containers to work, you're required to clone your forked CFL-repos within the codeforlife-workspace directory you cloned on your local machine:
"/path/to/codeforlife-workspace/{cfl-repo}"
6. Open a repo in VS Code
In VS Code, open a git-repo as a folder ([Ctrl+K, Ctrl+O] or go to File > Open Folder...).
This should open your local file explorer so that you may select the folder to open. Select any git-repo you wish to develop for.
7. Build and run a Dev Container
In VS Code, open the command palette (Ctrl+Shift+P or go to View > Command Palette...).
Search for the ">Dev Containers: Open Workspace in Container..." and select it.
VS Code will then open your local file explorer in a new window. Go to this window and select "codeforlife.code-workspace" from the current directory. VS Code will now begin building your dev container. If you wish to see the output of the build as it is happening, click the following prompt in the bottom-right:
VS Code may display the warning "workspace could fail to open in a container" before opening the code-workspace in the dev container. Ignore this and click continue.
At some point, VS Code will reload the window so that it may re-open the code-workspace within the dev container.
The first time the container is built takes some time, as it needs to download its OS and the various software, tools and extensions required for development. The duration of the build will also depend on your internet speed and processing power.
First-time builds have been known to take around 10-15 minutes.
Luckily, this is a one-off; the build is cached and rebuilds will be significantly faster!
If you get build errors stating that some images or dependencies failed to install, it could be due to any VPN / DDoS mitigation software you might have running on your machine or network. Try disabling those temporarily to see if it helps.
Once the dev container is built and run, the dev container will also run a setup command to install the code-dependencies needed to run the project. You should see the output of this automatically in a terminal window in VS Code.
Your dev container is now built and running!
8. Enable source control
Open the Source Control tab (Ctrl+Shift+G) in VS Code.
If VS Code has disabled source control for the CFL repos you wish to develop for, you'll need to trust the repos within VS Code to enable source-control features like checking out branches, commiting code changes and push code changes.
To trust the CFL repos, go to the Source Control tab and click "Manage Unsafe Repositories". Then, select the one or more CFL repositories shown in the drop-down.
10. Exiting a Dev Container
There are a few different ways you can stop running your VS Code window in a dev container and run it on your local machine instead.
Close the VS Code window and open a new window.
Open another local folder in the VS Code window (see step 6).
Reopen the current folder locally by either:
Opening the command palette (Ctrl+Shift+P or go to
View > Command Palette...) and typing ">Dev Containers: Reopen Folder Locally".Clicking the Dev Container toolbox in the bottom-left of your VS Code window and selecting
Reopen Folder Locally.
Close the connection to the dev container by either:
Opening the command palette (Ctrl+Shift+P or go to
View > Command Palette...) and typing ">Remote: Close Remote Connection".Clicking the Dev Container toolbox in the bottom-left of your VS Code window and selecting
Close Remote Connection.
Last updated
