Visual Studio Code has recently introduced the ability to run docker dev containers. They can be useful to quickly create and run full development environments without needing to download and install lots of components and libraries, not to mention the usual complicated install processes for some languages.
It is pretty simple to get started once you have docker desktop up and running. If you aren’t sure where to get started getting docker desktop running then head over to our other blog post.
Setting up your Dev Container
Lets jump in, fire up Visual Studio Code, there are a few quick ways to do this you can search for VSCode in your start menu (just start typing it in), open up a command prompt and type code . or maybe find a shortcut?
Next you will need to pick a folder which will hold your application. For this tutorial we have just created a folder called “Demo”. So go ahead and create a directory and open it up (File > Open Folder… in the menu).
Before we move on you need to double check you have docker desktop running. The easiest way to see if it is already running is by taking a look in your start bar and see if you can see the docker logo (a whale), if you can and it isn’t animating then you are good to go. If not you will need to start it up and wait till it is running. You should be able to find it hiding in the start menu or a shortcut which was created during the install.
The next step is to install the Dev Container extension in Visual Studio Code. To do this simply click on the extensions icon and enter container in the search, the first one in the list should be Dev Containers by Microsoft. Next click on the install button and it will quickly download and install. You should now notice a new green button with a >< symbol. This icon is your shortcut to everything on dev containers.
If you click on the new icon you will see a menu pop up and select Add Dev Container Configuration Files… this will take you through step by step adding everything you need. We will create a simple Python application as a quick demo.
From the menus select:
- Python 3
- 3.10-bullseye
- lts/*
- Additional features – just click OK as we don’t need any
If you take a look you will now notice that you have a new .devcontainer directory with a json config file and a Dockerfile. These have been automatically generated by the wizard, feel free to take a look if you like but everything should be set up exactly as required.
Starting the Dev Container
Hopefully (if you didn’t close it) you will see a popup at the bottom right letting you know that the “Folder contains a Dev Container configuration file…” just click on the Reopen in Container and the magic should happen (well docker should be starting up the container). If you accidentally closed it then you can click on the new green icon and select Reopen in Container from the menu.
It will take a little while for your container to start up, this is especially true the first time as it will need to download as well as run. If you want to see what is going on then you can click on the Starting Dev Container text at the bottom right. Here is a quick summary while you wait:
- First the docker image will be downloaded from Microsoft which has a number of preconfigured images.
- Next the container will install everything to work with Visual Studio Code.
- Then some Python specific libraries etc. will be installed.
- Finally any dev config will be applied.
Example Application
Once your container is running then you will find that you can see the folder that you started in. Now you are ready to start development. Lets start on a simple Python hello world application.
Click on the blank area in the EXPLORER and then create a new file by pressing the new file icon. Name the file helloworld.py and enter the following code and make sure you save your file:
print("Hello World")
Now we can try running our Python application in a terminal. To create a new terminal then click on Terminal > New Terminal from the menu at the top. You will now see a new terminal at the bottom of the screen waiting for input. Enter the following:
python helloworld.py
If it has all worked then you should see Hello world printed in the terminal.
From now on whenever you open this directory in Visual Studio Code it will prompt you to open in the dev container.
Wondering about hello world in other programming languages, then see our previous post with other examples.
Leave a Reply