[Django3] Display a web page in Django3 + WSL + Python virtual environment

At Udemy [Thorough commentary! ] Master the basics of Django and create 3 apps! was attended. Focusing on the contents, we will summarize the process from building the Ubuntu environment using WSL to displaying the Web page.

Environment construction: Windows Subsystem for Linux (WSL)

Create an environment to run Django immediately without thinking about difficult things, and display a web page.

In this article, I will create an environment for Ubuntu, which is a Linux distribution, on a Windows 10 PC. Linux is an OS that supports many languages, and because there are many free libraries, it is often used in the field of development.

Ubuntu basic settings

First, enable it so that you can use WSL on Windows. for that reason ** Control Panel ** → ** Programs ** → ** Programs and Features ** → ** Enable or Disable Windows Features ** → ** Check "Windows Subsystem for Linux" and click "OK" ** → ** Restart your PC ** Follow the procedure.

After rebooting, install ubuntu.

Ubuntu 20.04 LTS was used.

Start when the installation is complete.

Then, new registration of UNIX username and password is required, so fill in each one. When the process is finished, the command line will be displayed and Ubuntu will be ready for use.

As an initial setting, execute the following commands respectively to update and upgrade Ubuntu. By the way, update is always executed when a repository is added or deleted, and upgrade is also used for normal package updates [^ 1]. Also, sudo temporarily has root (administrator) privileges, allowing changes to the entire system.

$ sudo apt update
[sudo] password for sota_morita:
Hit:1 http://archive.ubuntu.com/ubuntu focal InRelease
Get:2 http://security.ubuntu.com/ubuntu focal-security InRelease [109 kB]
...

$ sudo apt upgrade
[sudo] password for sota_morita:
Reading package lists... Done
Building dependency tree
...

The upgrade takes a little longer, so wait while suppressing the desire to get Django up and running quickly.

Once the upgrade is complete, close WSL and restart. It is easy to understand that it is arbitrarily translated into Japanese [^ 2], but the explanation here is omitted.

Visual Studio Code settings

Now that you have the basic settings for Ubuntu, it's time to set up the editor. Here, Visual Studio Code is used. Installing Visual Studio Code is not difficult. Here, we will proceed on the assumption that the default settings are used.

Since Linux cannot be used by default in Visual Studio Code, an extension called "Remote --WSL" is installed.

After the installation is complete, restart Visual Studio Code.

After restarting, proceed with ** Green "Open a Remote Window" displayed at the bottom left ** → ** Remote-WSL: New Window using Distr ... ** → ** Ubuntu-20.04 ** , A new window opens. You can now use Ubuntu with Visual Studio Code.

If you open a terminal with ** Terminal ** → ** New Terminal ** in the top bar, the Ubuntu command line will appear. After that, the setting will proceed further from here.

Of course, you can do the same with the Ubuntu 20.04 LS terminal.

Python installation

I wondered if I should install only python3-venv to create a virtual environment [^ 3], but it didn't work, so I installed Python first. I wanted to match the lecture with the Python version, so I installed Python from pyenv.

This installation method

Talk about installing pyenv on ubuntu 20.04 / 18.04 [Updated on November 23, 2020] [^ 4]

See here because I referred to. After installing Python, I ran the following to see if it was installed correctly.

$ pyenv global 3.8.5

$ python --version
Python 3.8.5

Building a virtual environment

Here, create a directory called test under home/(username)/and create a virtual environment in this directory. After moving to test, execute the following command. django3_general is the name of the virtual environment created this time and can be set arbitrarily.

$ python3 -m venv django3_general

After processing, if you look at the contents of test with the ls command, you can see that a new django3_general has been created.

$ ls
django3_general

Django installation (in virtual environment)

I'm going to install Django in a virtual environment.

First, execute the following command in test to launch the virtual environment (here django3_general).

$ source django3_general/bin/activete

Then (django3_general) is displayed at the beginning of the command line. Install Django in this state.

$ pip install django
Collecting django
  Downloading Django-3.1.5-py3-none-any.whl (7.8 MB)
     |████████████████████████████████| 7.8 MB 5.3 MB/s
...

$ pip list
Package    Version
---------- -------
asgiref    3.3.1
Django     3.1.5
pip        20.3.3
pytz       2020.5
setuptools 47.1.0
sqlparse   0.4.1

Django has been successfully installed.

Start a Django project

Now that you're ready, start your Django project in your virtual environment. To create a new project, start the virtual environment and execute the following command. Here, the project name is test_project, but you can change it as you like.

$ django-admin startproject test_project

This will create a new directory called test_project under the current directory. If you move to test_project with cd and check the contents with ls, you will find a Python file called manage.py and a directory called test_project as shown below. (A further test_project is created in the test_project.)

$ cd test_project
$ ls
manage.py  test_project

You can use this manage.py to start the server as follows.

$ python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...
...
(abridgement)
...
Django version 3.1.5, using settings 'test_project.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

If you Ctrl + click the link http://127.0.0.1:8000/ described in the result, the following screen will appear in your web browser.

In other words, the server that started up receives the request from the Web browser (Chrome, etc.), and Django responds to it. By advancing the program from this state, various Web applications can be developed.

In this article, we focused on environment construction, but in the lecture, Django and virtual environments were explained in an easy-to-understand manner using figures and concrete examples so that you can easily get an image. Also, since the main part of the lecture is application development using Django rather than environment construction, we recommend that you take this course if you want to make a web application with Django.

[Thorough commentary! ] Master the basics of Django and create 3 apps!

[^ 1]: apt command cheat sheet [^ 2]: Japaneseize WSL Ubuntu environment