Python Development in VSCode Using Devcontainer
In this guide, we'll walk you through the steps to set up and use the devcontainer-python-template for Python development in a Docker-based development environment using Visual Studio Code (VSCode). This template allows you to get up and running quickly with a Python project inside a devcontainer.
Instead of cloning the repository directly, you'll create your own repository based on the template, so you can push your changes back to your own repository.
1. Create a New Repository from the Template
- Go to the devcontainer-python-template repository: https://github.com/jdevto/devcontainer-python-template.
- Click on the Use this template button, located near the top-right of the repository page.
- Select Create a new repository.
- Fill out the repository details:
- Repository Name: Choose a name for your new project, e.g., python-flask-web-app.
- Description: Optionally, add a description of your repository.
- Visibility: Choose whether your repository will be Public or Private.
- Owner: (Optional) If you're creating the repository under an organization, choose the appropriate owner (your account or an organization).
- Click Create repository from template.
This will create a new repository on your GitHub account, initialized with the contents of the devcontainer-python-template.
2. Clone Your New Repository Locally
- Now that you've created a new repository, open VSCode.
- Clone your newly created repository to your local machine:
git clone git@github.com:jdevto/python-flask-web-app.git
cd python-flask-web-app
It's always a best practice to create a branch and work from it.
git branch dev
git checkout dev
3. Open the Repository in VSCode and Start the Devcontainer
- Open the Repository in VSCode:
- After cloning your repository, open it in Visual Studio Code.
- In the VSCode menu, go to the Activity Bar and click Remote Explorer.
- Select Reopen in Container. This will build and launch the development container (devcontainer) defined in the .devcontainer folder.
- What Happens During Setup: VSCode will automatically:
- Build the Docker container as specified in the devcontainer.json configuration file.
- Install any dependencies (e.g., Python packages) listed in requirements.txt or other project files.
- Open the project within a clean, isolated development environment inside the container.
- Output on Successful Setup: If the .devcontainer setup is successful, you should see output similar to the following:
Running the postCreateCommand from devcontainer.json...
[7382 ms] Start: Run in container: /bin/sh -c .devcontainer/scripts/postCreate.sh
Linux 726a838654fd 6.8.0-49-generic #49~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Wed Nov 6 17:42:15 UTC 2 x86_64 GNU/Linux
Done. Press any key to close the terminal.
-
Open the Terminal:
- Close and reopen the terminal in the same VSCode window.
- You should see a prompt like this:
root ➜ /workspaces/python-flask-web-app (main) $
4. Validate Python Is Working
Before proceeding, ensure Python is working correctly inside the devcontainer:
- Open the integrated terminal in VSCode.
- Run the following command to check the Python version:
python --version
- You should see an output like:
Python 3.12.7
5. Run the Test Python Script
The template includes a simple test script located at hello/main.py. Run this script to validate the setup and ensure Python is executing correctly:
- In the terminal, run the test script:
python hello/main.py
- Expected output:
Hello, Devcontainer!
6. Cleanup
Once you confirm Python is working and the test script runs successfully:
- Remove the Test Script: If you no longer need the test script, delete the hello directory:
rm -rf hello
- Update the LICENSE file as desired
7. Flask Web App Development
- Update README.md file with the following contents:
# python-flask-web-app
A simple demo showcasing a Python Flask web application running in a VSCode development container. This setup is designed to provide an isolated, portable, and consistent environment for Python development.
-
Create the Project Directory
- Create a folder to hold your project.
mkdir flask-web-app cd flask-web-app -
Set Up a Virtual Environment
- Set up a Python virtual environment to manage dependencies.
python -m venv venv source venv/bin/activate -
Install Flask
- Install Flask in the virtual environment.
pip install flask- Create a requirements.txt file to track dependencies.
pip freeze > requirements.txt -
Create the App
- Create app.py file.
touch app.py- Update app.py file with the following contents:
from flask import Flask, render_template app = Flask(__name__) @app.route('/') def hello(): return render_template('base.html', content="Hello, Flask!") if __name__ == '__main__': app.run(debug=True) -
Run the App
- Run the app to validate the setup.
python app.py- You should see something like this:
(venv) root ➜ /workspaces/python-flask-web-app/flask-web-app (main) $ python app.py * Serving Flask app 'app' * Debug mode: on WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead. * Running on http://127.0.0.1:5000 Press CTRL+C to quit * Restarting with stat * Debugger is active! * Debugger PIN: 401-040-302- Open
http://127.0.0.1:5000in your browser. You should see "Hello, World!".
Expand the Project Structure
As the app evolves, add a directory structure that supports templates, static files, and tests.
-
Create the following structure:
flask-web-app/ ├── app.py ├── requirements.txt ├── templates/ │ └── base.html └── README.md
```bash
mkdir templates
touch templates/base.html
```
-
Update base.html file with the following contents:
<!DOCTYPE html> <html> <head> <title>Flask Web App</title> </head> <body> <h1>Welcome to Flask Web App</h1> <p>{{ content }}</p> </body> </html> -
Run the Flask App Again
Run the app again to test the updated version.
python app.py Open a browser and navigate to
http://127.0.0.1:5000.-
You should see something like this:
Welcome to Flask Web App Hello, Flask!- Environment Cleanup When you're done testing and running the Flask app:
-
Stop the Flask Server
- Press Ctrl + C in the terminal where the Flask app is running. This will terminate the server process.
-
Exit out of the Development Environment
- In VSCode, press Ctrl+Shift+P (or Cmd+Shift+P on macOS) to open the Command Palette.
- Type Reopen Folder in SSH and select the option. This ensures that you're out of the development container and back to your local environment, enabling seamless workflow integration for any additional tasks outside the container.
8. Push the branch to GitHub
- Execute
git add --all
git commit -m "feat: update Flask web app" \
-m "Refactor app and add hello flask route"
git push origin dev
9. Create a Pull Request (PR)
Navigate to Your Repository on GitHub
- Visit your repository on GitHub.
Go to the "Pull Requests" Tab
- Click on the "Pull Requests" tab at the top of the repository page.
Create a New Pull Request
- Click the "New Pull Request" button.
Select Branches for the PR
- Base branch: Choose the branch you want to merge into (e.g., main or production).
- Compare branch: Select the branch you just pushed (e.g., dev).
Open Pull Request Creation
- Click "Create pull request".
Review the Changes
- Review the list of commits and files changed to ensure everything looks correct.
Add a Title and Description
Provide a concise and descriptive title (e.g., feat: update template dev).
Add a description with any necessary details (e.g., reasons for changes, references to issues, etc.).
Finalize the Pull Request
- Click "Create pull request" again to confirm.
Review and Approve the PR
- Self-review your changes or request reviews from teammates.
Merge the Pull Request
- Once everything looks good, navigate to the PR and click "Merge Pull Request".
- Confirm the merge by clicking "Confirm merge".
Here is a repository I created by following the steps in this article:
Top comments (0)