Creating a Web Application using Python Flask with Server Side Rendering

By Simranjit Kamboj

  1. Install Python
    Before we do anything, we have to make sure our computer has Python installed. You can open terminal and type python3or python to check if you have it. If the command is not recognized, you must download and install Python.
  2. Create a project directory
    In the terminal, run the following:
    $ mkdir firstapp and then $ cd firstapp
  3. Set up the virtual environment
    In the directory, run the following command
    $ python3 -m venv firstapp-env
    This will create a directory called firstapp-env.
  4. Activate the virtual environment
    On MacOS or Unix, run $ source firstapp-env/bin/activate
    On Windows, run firstapp-env\Scripts\activate.bat
    Now that the virtual environment is activated, any packages you install will reside within the virtual environment. This allows you to have different versions of packages for different applications without a conflict.
  5. Install Flask
    $ pip install flask
  6. Create a directory called app within the main project
    This will hold the application.
  7. Create the application object
    In the file app/__init__.py, type the following:

The app_routes module does not yet exist. We will create this in the next step.

8. Create the routes in app/app_routes.py

We use the @app.routes decorator in order to associate the function with a URL. Whenever the browser makes a request to /, it will trigger the home() function.

9. Create a file called run.py in the main project directory

In this file, we are importing the application instance that we created within app/__init__.py. This is the file that will execute our application.

10. Running the application

$ export FLASK_APP=run.py followed by $ flask run

Your app should now be running on the local server. The terminal will have the URL. When you go to the URL, you will see Hello, World!.

Amazing! You have the application working and an endpoint displaying some information already.

11. Creating a template
Let’s create our first HTML file. app/templates/main.html

We just created a simple template. Flask uses Jinja2 for templating, so, we can use SSR to send data to the template.

12. Edit the / endpoint
We will edit the home() function, which is accessed by going to the / endpoint.

Here, we are now using the render_template functionality in Flask to do server side rendering. We are referencing the file main.html that we created earlier and sending two things to it, the title and content. In the template, we reference these two using {{title}} and {{content}}. You can name these anything you like, as long as you use them as I just described.

Your app should automatically refresh. Check the title in the browser, it should read Flask App — Home. The app itself will still read Hello, World! but you didn’t hard code that into the template but rather used SSR.

You now have a web application using Flask and Server Side Rendering. I will definitely do some more tutorials on setting up forms, data validation, databases, and more!

Let me know what you guys think and if there is any topic that you’d like me to cover.