Skip to content

Commit fdbbdc3

Browse files
luabudluabud
authored
Add Dev Containers + VS Codespaces + WSL labs (#30)
* Adding dev container lab * Adding hello world indstructions for VS Codespaces * Add more steps to run Flask app * Add kbd tags to readme * Add other things to try and sample apps * Add more details for codespaces * Add WSL lab * Add WSL lab description to README * Rename folders * Update container lab description * Update container lab * Update labs titles * Update containers lab overview
1 parent 721d8da commit fdbbdc3

File tree

6 files changed

+203
-11
lines changed

6 files changed

+203
-11
lines changed

‎9-visual-studio-code/README.md

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎9-vscode-django-postgres-dev-container/README.md

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
# Developing a Django + PostgreSQL application in a Dev Container
2+
3+
In this lab you use Visual Studio Code remote development features to work on a Django + PostgreSQL application in a dockerized development environment.
4+
5+
6+
## Prerequisites
7+
8+
You'll need the following tools installed on your local machine:
9+
10+
1. [Docker Desktop](https://www.docker.com/products/docker-desktop)
11+
1. [Visual Studio Code](https://code.visualstudio.com/)
12+
1. The [VS Code Remote Extensions](https://aka.ms/vscode-remote)
13+
1. If you are running on windows, set your git line endings to use LF:
14+
```
15+
git config --global core.autocrlf false
16+
```
17+
18+
## Create the dev container workspace
19+
20+
1. On a terminal, clone the sample app and open using Visual Studio Code:
21+
22+
```cmd
23+
git clone https://github.com/Microsoft/python-sample-tweeterapp
24+
cd python-sample-tweeterapp
25+
code-insiders .
26+
```
27+
28+
1. Click the `Reopen in Container` prompt, or press `F1` and select the `Reopen folder in dev container` command.
29+
30+
1. After the workspace terminal loads, open a new terminal using ```Ctrl-Shift-` ``` and type the following to build the React frontend:
31+
32+
```cmd
33+
npm install
34+
npm run dev
35+
```
36+
37+
1. After the container builds, open another terminal using ```Ctrl-Shift-` ``` and type:
38+
39+
```cmd
40+
python manage.py migrate
41+
python manage.py loaddata initial_data
42+
python manage.py runserver
43+
```
44+
45+
1. Open [http://localhost:8000](http://localhost:8000) in the browser to view the app.
46+
1. Create an account and login to the app
47+
48+
## Set up debugging in the container
49+
50+
1. Stop the app in the terminal by pressing `Ctrl-C` (otherwise the port will be taken when you debug)
51+
1. From the `Debug` menu, select `Start Debugging`.
52+
1. Select the `Django` debug configuration from the menu.
53+
1. Open `tweeter/views.py`, set a breakpoint on line 26
54+
1. Refresh the app in the browser to hit the breakpoint
55+
1. Open the debug console `Views > Debug Console`, and type `request.user` into the debug console to inspect the logged in user

‎9-vscodespaces/README.md

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
# Hello World in Visual Studio Codespaces
2+
3+
In this lab you will create a hello world script in Visual Studio Codespaces to experiment with the development experience on the browser.
4+
5+
## Prerequisites
6+
7+
You'll need the following tools installed on your local machine:
8+
9+
1. A [supported browser](https://docs.microsoft.com/en-us/visualstudio/online/resources/troubleshooting#partially-supported-browsers)
10+
1. Azure Credentials.
11+
12+
## Create a Codespace
13+
1. Navigate to https://aka.ms/vscodespaces, click on the "Sign in" button and enter your Azure credentials.
14+
1. Click on the "Create Workspace" button, and add "HelloWorld" to the `Codespace Name` field.
15+
1. Add https://github.com/luabud/hello-vscodespaces to the `Git repository` field. This repo contains a simple Hello World Flask application.
16+
1. Click on the "Create" button. You can leave the other fields with the default values.
17+
18+
## Create a Hello World script
19+
1. Open the Command Palette (<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd>, or <kbd>Command</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> if you're on macOS) and run the `File: New File` command.
20+
1. Name it `hello.py`, and open it on VS Codespaces.
21+
1. Add `print("Hello, VS Codespaces!")` to the file and save it (<kbd>Ctrl</kbd> + <kbd>S</kbd>).
22+
1. Click on the green play button on the top right, next to your file name open on the editor. This will run your hello world script in the terminal.
23+
24+
## Debug the Hello World Flask app
25+
26+
1. Check that VS Codespaces created a virtual environment called `pythonenv3.7` located on the top of the project.
27+
1. Make sure this environment is selected by clicking on the Python environment information on the status bar, localted on the bottom left of the screen.
28+
1. Start a debug session :
29+
30+
- Open the Run/Debug view by clicking on the play + bug icon on the activity bar, on the left side of the screen. Then click on the "Run and Debug" button.
31+
32+
- Or press <kbd>F5</kbd>
33+
1. From the configuration drop-down, select "Flask"
34+
1. You should see the following message on the terminal:
35+
```
36+
* Serving Flask app "app.py"
37+
* Environment: development
38+
* Debug mode: off
39+
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
40+
```
41+
6. Press <kbd>Ctrl</kbd> and click on the link on the terminal to access the application on a new tab.
42+
43+
44+
## Additional things to try
45+
1. **Edit:**
46+
- Open `app.py`
47+
- Try adding some code and check out the language features.
48+
49+
1. **Try out Flask live reloading while debugging:**
50+
51+
- Create a configuration file for the debugger by opening the Run/Debug view and clicking on "create a launch.json file"
52+
- Select Flask from the configuration options
53+
- Delete lines 19 and 20 ("--no-debugger" and "--no-reload")
54+
- Change "FLASK_DEBUG" on line 15 to "1".
55+
- Press <kbd>F5</kbd> to start the debug session using that new configuration
56+
- Open the `app.py` file, make a change and save it.
57+
1. **Add a logpoint**:
58+
59+
- Open `app.py` and right click on the left side of line 5
60+
- Select `Add logpoint...`
61+
- Enter "Executing endpoint" and hit <kbd>Enter</kbd>
62+
- Press F5 to run the Flask app and <kbd>Ctrl</kbd> + Click on the link to open it on a new tab
63+
- Open the Debug Console panel (next to the terminal) and see the logged message.
64+
65+
66+
## Other samples
67+
- [Tweeter App - Python and Django](https://github.com/Microsoft/python-sample-tweeterapp)
68+
- [The Cat Said No - Python and Flask](https://github.com/luabud/TheCatSaidNo)

‎9-vscodespaces/RunFileButton.png

19.9 KB
Loading

‎9-windows-subsystem-for-linux/README.md

Lines changed: 51 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,51 @@
1-
# README
1+
# Debugging a Flask App with WSL in VS Code
2+
3+
## Prerequisites
4+
5+
You'll need the following tools installed on your local machine:
6+
7+
1. A machine with [Windows 10](https://www.microsoft.com/en-us/windows/get-windows-10). Alternatively, you can create a [Windows 10 Virtual Machine on Azure](https://azure.microsoft.com/en-us/pricing/details/virtual-machines/windows/).
8+
1. The Windows Subsystem for Linux [(WSL)](https://docs.microsoft.com/en-us/windows/wsl/install-win10).
9+
1. [Visual Studio Code](https://code.visualstudio.com/)
10+
1. The [VS Code Remote - WSL Extension](https://aka.ms/vscode-wsl) for VS Code
11+
1. The [Python extension](https://marketplace.visualstudio.com/items?itemName=ms-python.python) for VS Code
12+
1. Ubuntu 18.04 for WSL from the [Microsoft Store](https://www.microsoft.com/en-us/p/ubuntu-1804-lts/9n9tngvndl3q?activetab=pivot:overviewtab)
13+
14+
15+
## Open VS Code from WSL terminal
16+
17+
1. Open a WSL terminal window (from the start menu or by typing `wsl` from a Windows terminal).
18+
1. Navigate (`cd` command) to a folder where you can clone a project in.
19+
1. Clone [this repo](https://github.com/luabud/TheCatSaidNo) by typing:
20+
`git clone https://github.com/luabud/TheCatSaidNo.git`
21+
1. Navigate to the folder (`cd TheCatSaidNo`)
22+
1. Type `code .` to open this folder in VS Code
23+
1. Open the `app.py` file to activate the Python extension
24+
25+
## Install the dependencies
26+
1. Open the terminal in VS Code (<kbd>Ctrl</kbd> + <kbd>`</kbd>)
27+
1. Create a virtual environment by typing:
28+
29+
```python3 -m pip venv env```
30+
1. 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
31+
1. Create a new terminal to activate the virtual environment (<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>`</kbd>)
32+
1. Install the dependencies:
33+
34+
``` python -m pip install -r requirements.txt```
35+
36+
## Run the Flask App in VS Code
37+
1. Press <kbd>F5</kbd> to start a debug session, and select "Flask" from the configuration options.
38+
1. <kbd>Ctrl</kbd> + Click on the link that is displayed on the terminal to access the application.
39+
1. Open the Debug Console in VS Code (next to the Terminal) and enter:
40+
```
41+
import sys
42+
print(sys.platform)
43+
```
44+
45+
## Configure and run the application tests
46+
1. Open the command palette (<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> or <kbd>Command</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> if you're on macOS)
47+
1. Run the "Python: Configure Tests" command
48+
1. Select "pytest" and then "." (root directory)
49+
1. Click on the test beaker icon on the activity bar, on the left side.
50+
1. Click on the "Run All Tests" icon on the top left.
51+

‎README.md

Lines changed: 29 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,35 @@ In this lab, you will build a serverless HTTP API with Azure Functions that take
2323

2424
[Go to lab](4-azure-functions-python-vscode/README.md) | Duration: 7 minutes
2525

26+
<!-- VS Code / Luciana -->
27+
# Hello World in Visual Studio Codespaces
28+
Create and work with an environment in Visual Studio Codespaces, all on the browser.
29+
30+
- How to get started with a GitHub repo
31+
- How to create and run a Hello World in Python
32+
- How to run a Flask app
33+
34+
35+
[Go to lab](9-vscodespaces/README.md)
36+
37+
# Developing a Django + PostgreSQL application in a Dev Container
38+
Work in a dev container using Visual Studio Code
39+
40+
- Open existing dev container in VS Code with the Remote - Container extension
41+
- Build a React front-end
42+
- Initialize a PostgreSQL database
43+
- Run a Django app
44+
45+
[Go to lab](9-vscode-django-postgres-dev-container/README.md)
46+
47+
# Debugging a Flask App with WSL in VS Code
48+
Work with a Flask application using WSL in VS Code.
49+
- Run/debug the Flask app
50+
- Configure application tests
51+
- Run application tests
52+
53+
[Go to lab](9-windows-subsystem-for-linux/README.md)
54+
2655

2756
# Azure Web Apps
2857

@@ -44,18 +73,9 @@ In this lab, you will build a serverless HTTP API with Azure Functions that take
4473

4574
[Go to lab](9-containers/README.md)
4675

47-
<!-- VS Code / Luciana -->
48-
# VS Code | Visual Studio Code & Online
49-
50-
...
51-
52-
[Go to lab](9-visual-studio-code/README.md)
5376

54-
# VS Code | Windows Subsystem for Linux (WSL)
5577

56-
...
5778

58-
[Go to lab](9-windows-subsystem-for-linux/README.md)
5979

6080
<!-- Azure AI/ML / Rong -->
6181
# Azure AI/ML | ...

0 commit comments

Comments
 (0)