Coding4Beginners: Setup DevContainer

Prepare Development Environment

Create a folder C:\Coding4Beginner

Checkout the Repository into this folder

git clone https://github.com/coding4beginner/DevContainer

Start Command Line

Press the keys Windows + R

Type cmd

A new window appears:

Create folder for development environment.

Enter the following commands:

C:
cd \
mkdir \Coding4Beginner
cd \Coding4Beginner

Enter the following command:

git clone https://github.com/coding4beginner/DevContainer

Change to new folder and view content.

cd DevContainer
dir

Start VS Code

Press the keys CTRL + ESC or open the program menu.

In the upper input box type “Visual”

Beneath this line, the application Visual Studio Code – Insiders should appear.

Click on the icon

Visual Studio Code should open:

On the lower left, if you see a blue badge with a number, you could update to a new version.

Click on the icon and select Restart to Update

The application should be closed and reopened after a while with the new version information.

Open the Repository

Open the created folder.

Select File / Open Folder

Select the created folder C:\Coding4Beginner\DevContainer

After opening the folder and some time, you see two popups on the lower right side:

Install recommended extensions

Click on Install

After a few seconds, restart die application.

• Either by close the app and open it again
• Or be typing CTRL-SHIT-P and entering Reload in the search field.
  Click on Developer: Reload Window

The application should be closed and reopened after a while.

Then, on the popup, click on Reopen in Container

The application will start with some installation steps, which you can follow by clicking on show log

In the log, you will see the steps, which are executed to install and prepare our development environment.

Technically:

We are installing a Linux Distribution (Ubuntu) and install all the required packages (Python, Django, NodeJS, JavaScript, Jupiter) we need for our exercises.

After a long time (maybe more than 20 Minutes, depending on your internet speed), the installation is finished.

You should see something like this, especially on the upper left under EXPLORER the folder name

WORKSPACE [DEV CONTAINER: …]

And, again, you should the pop up for installing recommended extensions,

So, click on Install

After this, you should see multiple windows with a register for each installed extension

Right-Click on a header of a register and select Close All

Check Development Environment

Check, if a required extension is installed.

Click on Extensions:

In the upper textbox insert live server

If you find the extension with a configuration icon, everything is good.

If you see an Install Button, then click on Install, Install Pre-Release or Install in Dev-Container

Preview a file

Open the Explorer View

Navigation to the file lessons/Week01/solutions/01.html

Right-Click on 01.html and select Show Preview

Final Result should be