Python Development in VSCode Using Devcontainer

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 clone git@github.com:jdevto/python-flask-web-app.git
cd python-flask-web-app

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:

git branch dev
git checkout dev

• Open the Terminal:

  • Close and reopen the terminal in the same VSCode window.
  • You should see a prompt like this:

    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.
  

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:

root ➜ /workspaces/python-flask-web-app (main) $

• You should see an output like:

  python --version

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 3.12.7

• Expected output:

  python hello/main.py

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:

  Hello, Devcontainer!

• Update the LICENSE file as desired

7. Flask Web App Development

• Update README.md file with the following contents:

  rm -rf hello

• Create the Project Directory

  • Create a folder to hold your project.

    # 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.
  

• Set Up a Virtual Environment

  • Set up a Python virtual environment to manage dependencies.

  mkdir flask-web-app
  cd flask-web-app
  

• Install Flask

  • Install Flask in the virtual environment.

  python -m venv venv
  source venv/bin/activate
  

  • Create a requirements.txt file to track dependencies.

  pip install flask
  

• Create the App

  • Create app.py file.

  git clone git@github.com:jdevto/python-flask-web-app.git
  cd python-flask-web-app
  

  • Update app.py file with the following contents:

  git branch dev
  git checkout dev
  

• Run the App

  • Run the app to validate the setup.

    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.
  

  • You should see something like this:

  root ➜ /workspaces/python-flask-web-app (main) $
  

  • Open http://127.0.0.1:5000 in 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:
  

    python --version
  

  Python 3.12.7

• Update base.html file with the following contents:
  

    python hello/main.py
  

• Run the Flask App Again
  Run the app again to test the updated version.
  

    Hello, Devcontainer!
  

• Open a browser and navigate to http://127.0.0.1:5000.

• You should see something like this:
  

    rm -rf hello
  

  • 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

  # 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.

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".

The above is the detailed content of Python Development in VSCode Using Devcontainer. For more information, please follow other related articles on the PHP Chinese website!