README.md

Debugging a Flask App with WSL in VS Code

Prerequisites

You'll need the following tools installed on your local machine:

1. A machine with Windows 10. Alternatively, you can create a Windows 10 Virtual Machine on Azure.
2. The Windows Subsystem for Linux (WSL).
3. Visual Studio Code
4. The VS Code Remote - WSL Extension for VS Code
5. The Python extension for VS Code
6. Ubuntu 18.04 for WSL from the Microsoft Store

Open VS Code from WSL terminal

1. Open a WSL terminal window (from the start menu or by typing wsl from a Windows terminal).
2. Navigate (cd command) to a folder where you can clone a project in.
3. Clone this repo by typing: git clone https://github.com/luabud/TheCatSaidNo.git
4. Navigate to the folder (cd TheCatSaidNo)
5. Type code . to open this folder in VS Code
6. Open the app.py file to activate the Python extension

Install the dependencies

1. Open the terminal in VS Code (Ctrl + `)

2. Install python3-venv by typing:

   sudo apt-get install python3-venv

3. Create a virtual environment by typing:

   python3 -m venv env

4. If a notification prompt is displayed asking if you want to select this newly created environment, click on "Yes". Otherwise, click on the Python information displayed on the status bar, located on bottom left of the screen

5. Create a new terminal to activate the virtual environment (Ctrl + Shift + `)

6. Install the dependencies:

   python -m pip install -r requirements.txt

Run the Flask App in VS Code

1. Press F5 to start a debug session, and select "Flask" from the configuration options.
2. Ctrl + Click on the link that is displayed on the terminal to access the application.
3. Open the Debug Console in VS Code (next to the Terminal) and enter:

   import sys
   print(sys.platform)
   

Configure and run the application tests

1. Open the command palette (Ctrl + Shift + P or Command + Shift + P if you're on macOS)
2. Run the "Python: Configure Tests" command
3. Select "pytest" and then "." (root directory)
4. Click on the test beaker icon on the activity bar, on the left side.
5. Click on the "Run All Tests" icon on the top left.