DEV Community

loading...
Cover image for Write Your First Python-Powered Web Page

Write Your First Python-Powered Web Page

michaelpaulkunz profile image MichaelPaulKunz ・5 min read

Mark Wahlbeck from Devslopes thinks beginners shouldn't learn Python. 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

Next you'll need a Python package manager and interpreter. Ubuntu users can install Pip 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 and Mac 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)
Enter fullscreen mode Exit fullscreen mode

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
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
Enter fullscreen mode Exit fullscreen mode

Here are the MacOS and Windows alternatives:

python3 -m venv env (for Mac)
python -m venv env (for Windows)
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

Django

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

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

Enter fullscreen mode Exit fullscreen mode

If you're using Windows, and these commands don't work, try troubleshooting with this link.

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
Enter fullscreen mode Exit fullscreen mode

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

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
Enter fullscreen mode Exit fullscreen mode

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")
Enter fullscreen mode Exit fullscreen mode

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"),
]
Enter fullscreen mode Exit fullscreen mode

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)
]
Enter fullscreen mode Exit fullscreen mode

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

python manage.py runserver
Enter fullscreen mode Exit fullscreen mode

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 and run with it.

Alt Text

Citations:

Installing Python
Installing Pip
Django
For Windows Users
For Mac Users
More Windows Troubleshooting
Cooler and more complex Django App Code-along

Discussion (2)

pic
Editor guide
Collapse
jonrandy profile image
Jon Randy

Where's the part about writing a webserver?

Collapse
michaelpaulkunz profile image
MichaelPaulKunz Author • Edited

Sorry, Jon. It ended up being more about rendering a simple page. I went into this thinking I'd be replacing .js files with .py files and the rest would be pretty much the same (thought I'd need an index.html, etc). Was surprised at how different the process ended up being. I'll edit the title to more accurately reflect the focus of the article.