Write Your First Python-Powered Web Page
Tags: python, django, devops, beginners
Published: 2021-04-19 05:22:10

Mark Wahlbeck from Devslopes thinks [beginners shouldn't learn Python](https://www.youtube.com/watch?v=sO1ctUNQ1k8&t=2s&ab_channel=Devslopes). I don't know if he's right or not, but I do want to stress that this tutorial is for people who already have some experience with JavaScript, have built a server with Node and Express, and want to try something new. If nothing else, building your site with Python and Django might cement your understanding of how your Node server is working. And if you get comfortable with Python, it can be a good catch-all language for automating your daily tasks, even if it never gets you hired as a junior developer.  

###Setting Up Your Dev Environment

Because this tutorial is for JavaScript coders, we'll be working in VS Code instead of PyCharm. I'm working in Ubuntu 18.04, so ideally this is for other Linux users, but I will include alternative commands for Mac and Windows where possible. 

The first thing you'll need to do is fire up VS Code. I created a directory named "python" to work in. Install the Python extension for VS Code. 
 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lkpzoocfnji8i5zw23wh.png)

Next you'll need a Python package manager and interpreter. Ubuntu users can [install Pip](https://linuxize.com/post/how-to-install-pip-on-ubuntu-18.04/) with the commands `sudo apt update` followed by `sudo apt install python3-pip` in the terminal. Enter `pip3 --version` to confirm you did it right. You'll get back something like this: `pip 9.0.1 from /usr/lib/python3/dist-packages (python 3.6)`. [Windows](
https://docs.python.org/3.9/using/windows.html) and [Mac](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line) users can follow the respective links for instructions on installing package managers. 

Linux users should have Python3 as a default Python interpreter. If you're not sure if you have it, or if you'd like to change it, you can press `ctrl+shft+P` and type "Python: Select Interpreter" into the search box. Click the one you want. I'm using Python 3.6.9. If you have an interpreter set up, you should have a ".vscode" folder in your project folder with a "settings.json" file. If your interpreter is set up properly, the json file will have a "python.pythonPath" key. Its value is the file path to your interpreter.

###Testing Python

In your root directory, create a folder called "test.py" (`touch test.py` for Linux users), and enter the following two lines: 

```
msg = "Its Alive"
print(msg)
```
Save the file, and run it by pressing the play button at the top-right of your VS Code window. You've probably never used this thing if you're used to writing JavaScript, so here's a picture with the button highlighted.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/si5qt046qjoq7h94cd19.png)
Pressing it should have the same effect as running `node [somefile].js`. If you see the text "Its Alive" in your terminal, you are officially coding in Python. 

###Virtual Environment

Before we install Django, we're going to create a virtual envrironment. I'm running Linux, so I'll run the following two commands in my terminal:

```
sudo apt-get install python3-venv
python3 -m venv env
```
Here are the MacOS and Windows alternatives:
```
python3 -m venv env (for Mac)
python -m venv env (for Windows)
```

Say yes to all the prompts. Your project folder should now contain an "env" directory with some folders in it ("bin", "include", "lib", ect). It should sort of look like your standard JavaScript / Node project. You're going to redirect your Python interpreter to this folder. So once again press `ctrl+shft+P` and search for "Python: Select Interpreter". You should see a new option with ('env') at the end. Click it, and it should update your "settings.json" file to direct to the new file path ("env/bin/python" on my end). 

Press `ctr+shift+P` again, and this time type "Terminal: Create New Integrated Terminal" into the search bar. Click the result, and your terminal window should display a command line starting with "(env)". This is your integrated terminal window, where we'll install Django. If at any point you close your project and come back, your terminal will not default to the integrated terminal window. The following commands will bring you back into your integrated terminal window:

```
source env/bin/activate (Linux or Mac)
env\Scripts\Activate.ps1 (Windows)
```


###Django

In your integrated terminal window, enter the following two commands:

```
python -m pip install --upgrade pip
python -m pip install django

``` 
If you're using Windows, and these commands don't work, try troubleshooting with [this link](https://docs.djangoproject.com/en/3.2/howto/windows/).

When the installation is complete, you're ready to make a Django app. You'll start your project by running the following command in your integrated terminal: 

```django-admin startproject web_project .```

This will create a new folder called web_project in your parent directory as well as a few utility files. Next, create your database and start your server:

```
python manage.py migrate
python manage.py runserver
```

Your terminal will give you a link to http://127.0.0.1:8000/ and you'll see the following default message on your page:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6mvg28l891560oo64hdt.png)

Next step is to replace the default success screen with some personalized content, which we'll do with the startapp command:
```
python manage.py startapp myfirstpython
```

This will create a "myfirstpython" folder with a "views.py" file. Replace the contents of "views.py" with the following code and save:

```
from django.http import HttpResponse

def home(request):
    return HttpResponse("Boilerplate Django App")
```
Now, in your "myfirstpython" folder, create a file called ursl.py with the following code:

```
from django.urls import path
from hello import views

urlpatterns = [
    path("", views.home, name="home"),
]
```

Your web_project folder also contains a urls.py file. Replace its code with this:

```
from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path("", include("myfirstpython.urls")),
    path('admin/', admin.site.urls)
]
```

Save and re-run the command to start your server in your integrated terminal:

```
python manage.py runserver
```

Following the link to http://127.0.0.1:8000/ should bring up a plain white page with the text "Boilerplate Django App." And there you have it. Your first webpage without any JavaScript. It's not much, but if you study Python, and follow some of the links below, you can make a fully interactive page with Django. Feel free to [fork this boilerplate](https://github.com/MichaelPaulKunz/pythondjangobiolerplate) and run with it. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/glvb5zy0y1gxqd9wjbuo.png)

###Citations:
[Installing Python](https://code.visualstudio.com/docs/python/python-tutorial)
[Installing Pip](https://linuxize.com/post/how-to-install-pip-on-ubuntu-18.04/)
[Django](https://code.visualstudio.com/docs/python/tutorial-django)
[For Windows Users](https://docs.python.org/3.9/using/windows.html)
[For Mac Users](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line)
[More Windows Troubleshooting]
(https://docs.djangoproject.com/en/3.2/howto/windows/)
[Cooler and more complex Django App Code-along](https://www.youtube.com/watch?v=UmljXZIypDc&t=237s&ab_channel=CoreySchafer)