Lecture: Setting up your Development Environment

Preparing your Environment

PC Requirements

If you are taking my video course, the same laptop that you use for video conferencing should be more than sufficient for development.

Installation & Configuration

We will be installing and using the following major software packages:

• Python and related packages:
  • django
  • python-markdown
  • ...and other supporting packages
• Visual Studio Code and selected extensions
• Docker
• Windows-specific
  • Windows Subsystem for Linux (WSL2)
• Mac-specific
  • Homebrew

Furthermore, we will be running linux-like commands from the command-line. In windows, we will be doing this through Windows Subsystem for Linux, an interface for running a linux virtual machine from the command line.

If you are using a Mac, I am happy to support you, even though I am not as familiar or comfortable with

Installing

from the Windows App Store

You can open up the Windows App Store and search for Ubuntu. This will download and install the Ubuntu image for Windows subsystem for Linux automatically.

PowerShell

If you prefer to install Ubuntu from the command line, you can use PowerShell to do it.

1. open powershell: windows+x then a. Click yes to run in administrator mode.

2. type

   wsl --install -d ubuntu
   

   

3. Restart your computer once installed. It will continue running some install tasks after restart. For example, Ubuntu will be downloaded and configured after the restart

4. Follow the prompt to create a username and password.

   These do not need to match your windows password, but you do need to write them down

You should find ubuntu in your start menu:

Install Docker

Windows

Since we have installed Ubuntu in Windows subsystem for Linux, we will also be installing Docker engine within this environment. There is Docker desktop for Windows and there is Docker Engine for Linux. Docker Engine is lighter weight and command-line only, which is fine for our purposes. Follow the Linux directions below after opening Ubuntu on your Windows machine.

Linux

From here

1. Install and test

   sudo apt remove docker* podman-docker containerd runc
   
   sudo apt update
   sudo apt install -y ca-certificates curl
   sudo install -m 0755 -d /etc/apt/keyrings
   sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc
   sudo chmod a+r /etc/apt/keyrings/docker.asc
   
   sudo tee /etc/apt/sources.list.d/docker.sources <<EOF
   Types: deb
   URIs: https://download.docker.com/linux/ubuntu
   Suites: $(. /etc/os-release && \
   echo "${UBUNTU_CODENAME:-$VERSION_CODENAME}")
   Components: stable
   Architectures: $(dpkg --print-architecture)
   Signed-By: /etc/apt/keyrings/docker.asc
   EOF
   
   sudo apt update
   sudo apt install -y docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
   
   sudo service docker start
   sudo docker run hello-world
   

2. Add current user to docker group

   sudo usermod -aG docker $USER
   

3. Restart or logout/login. This will apply your group changes

Mac

Follow these instructions:

https://docs.docker.com/desktop/setup/install/mac-install/

Insall Python and related packages

Windows Instructions

Python itself will be installed alongside your Ubuntu installation in WSL. Follow the instructions in the following steps to install any additional required packages specific to django

Linux Instructions

Ubuntu comes with Python installed already. In the Django project set up you will be instructed to add extra packages using the concept of an environment, But you don't need to install Python explicitly

Mac Instructions

While Mac comes with Python ships by default, the system version is probably out of date. You can install a newer version of Python in your user space using HomeBrew:

• https://www.geeksforgeeks.org/python/how-to-install-python-on-mac/

Install VS code

go to https://code.visualstudio.com/download?_exp_download=fb315fc982 and install vscode. Follow the instructions to accept all defaults. You do not need to sign in or use github copilot.

Other Prerequisites

Linux / WSL

need to install mariadb backend lib if you're using mariadb (or any python bindings to mariadb) locally

sudo apt install libmariadb-dev \
    build-essential \
    python3-dev \
    pkg-config \
    git \
    python3-pip \
    python3-venv

WSL Only

If you're using WSL on Windows, you'll also need to install some specific packages to make it work better with the Windows host and VSCode:

sudo apt-get install \
    wget \
    ca-certificates

Configure git

You will need to configure get before your first commit. This is so that your code changes are tied to your name and email. Git will not check or confirm your name or email address so you can use any email you'd like. Just make sure your collaborators will be able to know who you are.

git config --global user.email "yourname@yourdomain.com"
git config --global user.name "Your Name"

for example:

git config --global user.email "danaukes@danaukes.com"
git config --global user.name "Dan Aukes"

Prepping your Project Structure

A project should be the name for the collection of "apps" that will be running in your project. If a project is a website that encompasses many different functionalities (blog, payment portal, chat, photo site, etc), then each function could be considered an app within the project.

Create a new git repository

One of the unsung heros of this process is git, the repository management tool that allows you to track version-controlled files.

Create a new repository and move into this new folder

mkdir django_homepage
cd django_homepage

Now let's say you want to store your repository on github. We won't cover it in this book, but you will need to go to github and create your first repository. Copy the link to it. It should look like this:

https://github.com/<your-user-name>/<your-repository-name>.git

or

ssh+git://git@github.com:<your-user-name>/<your-repository-name>.git

initialize your repository by running the following commands

git init
git remote add origin  <paste the url from above here>

or open the repository in vscode by typing ctrl+shift+g and in the left explorer window, selecting "create a new repository", and adding the url copied above. Follow the directions to initialize and sync your repository for the first time.

Change back to the explorer window in VSCode (ctrl+shift+e). Create a new text file called README.md and paste in the following:

## Markdown-enabled Django Blog

### V1
Basic Functionality

Create a second textfile called .gitignore (make sure you include the period at the front of the filename)

**/__pycache__/*
**/migrations/*
.venv/*
*.env
homepage/db.sqlite3
docker/db/mysql/*
collected_files/*

Next, create a new file called my_env.env and leave it blank for now.

Create a third and final textfile called requirements.txt and paste in the following:

django
pytz
pygments
pymdown-extensions
mysqlclient
gunicorn
dotenv
markdown
python-frontmatter
danjangomdx>=0.0.7
markdown-mermaid

Your new basic file structure should look like this:

django_homepage/
|-- README.md
|-- my_env.env
|-- .gitignore
`-- requirements.txt

create your first commit by running the following commands (and following any directions for using git you may get back)

git add README.md .gitignore requirements.txt
git commit -m "my first commit"
git push

Or use VSCode

Note that my_env.env, since it matches a file-matching string in .gitignore, will not be added to your git repository and will thus only be available locally on your computer. This is a good thing, which we will discuss later, in the part on deployment.

Set up VSCode

You can install all the extensions this in a single cut-paste operation from Windows Powershell.

1. Type win+x then i.

2. Once powershell opens, paste in the following:

   $extensions = @("bierner.markdown-yaml-preamble", "davidanson.vscode-markdownlint", "donjayamanne.githistory", "mhutchie.git-graph", "ms-python.black-formatter", "ms-python.debugpy", "ms-python.pylint", "ms-python.python", "ms-python.vscode-pylance", "ms-python.vscode-python-envs", "pkief.markdown-checkbox", "takumii.markdowntable", "yzhang.markdown-all-in-one","ms-vscode-remote.remote-wsl")
   foreach ($extension in $extensions) {
       Invoke-Expression "code --install-extension $extension"
   }
   

1. Next open vscode and type ctrl + shift + p to open the command bar and type wsl.
2. Select "Connect to WSL". This will allow you to run VSCode in Windows but access the files and the system running in your Ubuntu WSL.

3. Add a new folder to your workspace

   Add the folder you created above to your VSCode Workspace. In the top menu, select "File"-->"Add folder to workspace..." and type or select /home/<your-user-name>/django_homepage, the folder you created in the git initialization step.

4. Right click on one of the files, such as read me and select "open in integrated terminal". This will open up a terminal inside VSCode (at the bottom). Follow the next instructions for installing the same VSCode extensions you installed on the windows side in linux as well.

Linux One-Liner

If you are working directly in Ubuntu or coming from the windows step above, you need to install some VSCode extensions. From a bash terminal, you can install them using:

cat << EOF | xargs -I {} code --install-extension {}
bierner.markdown-yaml-preamble
davidanson.vscode-markdownlint
donjayamanne.githistory
mhutchie.git-graph
ms-python.black-formatter
ms-python.debugpy
ms-python.pylint
ms-python.python
ms-python.vscode-pylance
ms-python.vscode-python-envs
pkief.markdown-checkbox
takumii.markdowntable
yzhang.markdown-all-in-one
EOF

Creating a local python environment

It's a really smart idea to create a unique python environment for each major coding project, because you may need finer-grained control over which packages are installed than the choice pre-selected for you by you operating system.

If using VSCode, it is trivial to create a new python environment. Press ctrl+shift+p and type "python create". From the drop down list that shows up, select "Python: Create Environment". You will be led through a series of selections:

1. select venv
2. If you have more than one top-level folder open in your workspace, you will be asked which project you would like to install the virtual environment in. Select the name of your project folder, if applicable
3. You may have more than on Python 3.XX.Y 64-bit /usr/bin/python3 -
4. Accept the default name of the folder to install into as .venv
5. Accept "yes" to install project dependencies
6. Check the box next to "requirements.txt"

Otherwise, from a terminal in your project folder (~/django_homepage) you can install the environment yourself. From the top of your project directory:

cd to/the/path/of/django_homepage
python3 -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt

Creating a VSCode Debug Environment