Dev Environment Setup
Set up your dev environment with dev containers for VS Code.
Last updated
Was this helpful?
Set up your dev environment with dev containers for VS Code.
Last updated
Was this helpful?
Code for Life (CFL) has set up their development environment within . In short, dev containers are containerised virtual machines that come preinstalled with all the software and tools necessary for you to develop.
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 to the workspace repo. Then, you can just simply git-pull the latest dev container and rebuild it.
Follow the below steps to setup the CFL workspace in a dev container.
Git is required to sync your local code changes with our online Git repos.
Follow Git's and .
Docker Engine is required to build and run dev containers.
Note that Docker Desktop is an app built around Docker Engine that provides a user interface and additional tools. You only need Docker Engine.
If you're using an Ocado-issued laptop, DO NOT install Docker Desktop - it's licensed software requiring a paid subscription.
We recommend running the following commands.
Our dev containers are specifically defined to work within the VS Code IDE.
Open the Extensions tab (Ctrl+Shift+X) in VS Code.
Search for the "Dev Containers" extension and install it.
git clone https://github.com/{username}/codeforlife-workspace.git
If you're using Windows as your OS, then you'll need to change the line endings in your cloned workspace before opening the dev container.
Open a Git Bash terminal in the directory of your cloned workspace.
Configure the workspace to use LF as the EOL control character.
Remove all the files tracked by Git in the workspace.
Re-download the files. They should now have LF endings.
To confirm that the files have LF endings, open any file in the workspace in VS Code and look at the bottom right (in the toolbar). You should see "LF" (not "CRLF").
In VS Code, open the command palette (Ctrl+Shift+P or go to View > Command Palette...).
Search for the command: ">Dev Containers: Open Workspace in Container..." and select it.
Make sure Docker Engine is running before working with dev containers.
Select the codeforlife.code-workspace file in your local codeforlife-workspace folder.
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:
At some point, VS Code will reload the window so that it may re-open the code-workspace within the dev container.
If the build fails with an error message similar to:
Run this command before opening/building the dev container.
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.
To help you quickly fork and clone the many repos contained within our workspace, we've created a script that runs automatically when you start the workspace's dev container. You'll be prompted to sign into GitHub in VS Code's terminal window.
Follow the on-screen instructions in the terminal. Once you've successfully authenticated with GitHub, each repo within the workspace should be forked and cloned; the once empty folders should now be populated.
With the workspace folder open in VS Code, open the Source Control tab (Ctrl+Shift+G).
Click "Manage Unsafe Repositories". Then, select the one or more CFL repos shown in the drop-down.
In a new terminal in VS Code, run the following command:
This will install all the dependencies the repo requires for the code to run. Then, activate the virtual environment by running:
Finally, to start working on the project locally, run:
This script will:
run the project's database migrations,
collect the static files,
and start a Django server.
Once the script has finished running, you'll be able to run and view the project locally in your browser by going to localhost:8000.
Enjoy working on the project!
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 a local folder in the existing VS Code window ([Ctrl+K Ctrl+O] or go to File > Open Folder...).
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.
to download and install Docker Engine's server and client binaries.
Alternatively, you can install .
Check the to find your Linux distro. If you're using Ubuntu, follow .
.
our (only the main branch) first and then, in a folder of your choosing on your local machine, clone your fork:
and Unix-like OS's (like Linux and macOS) use different end of line (EOL) to Windows. Linux distributions (like Ubuntu) use line feed (LF), which is control character "\n", while Windows uses carriage return and line feed (CRLF), which is control characters "\r\n". .
While the workspace is open in VS Code you'll notice there are a few empty folders. These are the repos contained within the workspace, each of which will also need to be forked and cloned ().
