Pre-Requisites: Ensure you have Visual Studio Code (VSC) and Docker installed with Windows Subsystem for Linux (WSL2).
This guide will assist you in setting up a development container that runs Docker and includes a well-defined tool/runtime stack. The container comprises Python, PostgreSQL, and MySQL databases on an Alpine Linux base for both frontend and backend, along with Visual Studio Code (VSC) plugins customised to suit our requirements.
After completion of this setup, it allows you to open or clone code in a local or cloud-hosted Dev Container and take advantage of VS Code's full development feature set.
We are going to use Alpine Linux for our container, read more at: Alpine Linux Container Documentation
1. Download the Repository Zip:
- Click Code Button > Download ZIP to download the zip file from this repository.
2. Create Project Workspace:
- Create a "Workspace" folder on your C:\ or D:\ drive.
- Inside the Workspace folder, create a subfolder for your project.
- Example: C:\Workspace\YOUR_PROJECT_NAME
- Note: This step links your local Workspace folder with the container's Workspace folder.
3. Unzip the Repository:
- Unzip the downloaded zip file into your project folder.
- Your project folder should now have a structure like this:
4. Install Dev Containers Extension:
- Launch Visual Studio Code (VSC) and install the Dev Containers extension.
5. Open Your Project in VSC:
- Open your project folder by clicking File > Open Folder and navigate to your project folder.
6. Reopen Container: - A popup saying "Reopen" should appear in the bottom right corner. If not, follow these steps: - Press F1. - Type "Dev Container: Reopen Container".
7. Container Setup: BACKEND Container
- If it prompt the screen below to complain "Worksapce doesn't exist", click "Open Workspace"
- Next it will prompt to select either FRONTEND or BACKEND (Let's select BACKEND)
- VSC will reopen the folder to BACKEND folder, download, and install the necessary container files. This may take 10-15 minutes depending on your internet speed.
8. Container Setup: FRONTEND Container
- Open a New Window from VSC
To create another Frontend Container, we will be repeating Step 5 and Step 6 in Step 9 and 10
9. Open Your Project in VSC:
- Open your project folder by clicking File > Open Folder and navigate to your project folder.
10. Reopen Container: - A popup saying "Reopen" should appear in the bottom right corner. If not, follow these steps: - Press F1. - Type "Dev Container: Reopen Container".
11. Container Setup: FRONTEND Container
- If it prompt the screen below to complain "Worksapce doesn't exist", click "Open Workspace"
- Next it will prompt to select either FRONTEND or BACKEND (Let's select FRONTEND)
- VSC will reopen the folder to FRONTEND folder, download, and install the necessary container files. This may take 10-15 minutes depending on your internet speed.
