DEV Community

Cover image for Deploying cookiecutter-flask for free using pythonanywhere
Kelvin
Kelvin

Posted on

Deploying cookiecutter-flask for free using pythonanywhere

Welcome! You are about to start on a journey about and how to deploy your cookiecutter-flask project for free in pythonanywhere.

Table of Content

In this articles, i won't talk to much about why choose flask framework over other framework. IMHO flask good enough for most project because of lightweight and easy to scale based on our requirements.

Prerequisites

Before jumping to how, you need to make sure you have:

Project

For demonstration purpose i'll be using my own project that generated directly from cookiecutter-flask without any modification, you can check it here.

How

PythonAnywhere makes it easy to create and run Python programs in the cloud. To make it easier to understand we just treat pythonanywhere as another computer or server that we have limited access.

Here are the high level step by step on how to run our flask project in pythonanywhere:

  1. Setup pythonanywhere web application
  2. Zip the project
  3. Upload zip.
  4. Unzip project.
  5. Install dependencies
  6. Edit wsgi file
  7. Virtualenv
  8. Environment variable
  9. Broken styling + Setup node.js
  10. Execute necessary flask command.

Setup pythonanywhere

You need go to pythonanwhere dashboard and create web app

create web app in pythonanywhere

You should seen something like this.

you have no web application

Now you can click add new web app

Add new web app

Select python web framework

Select python web framework

Select python version, any version would be fine i think but for this article i'll just choose python 3.10

Select python version

No specific configuration required here, pythonanwhere will automatically bootstrap the flask project in the default directory.

Flask setup

After that you will be redirected to web application page

web application

Now if you click the generated url you should be able to see 'hello from flask!'

hello from flask

Now we are ready to prepare to upload our code.

Zip project

To make the whole project portable and easier to access in pythonanywhere server it's better to zip the project.

You could do it from cli but i prefer to push all my code into github repository and download the zip from there.

download zip from github

Upload the zip

After we have zip file to upload we can go straight to pythonanywhere dashboard. Go to files, you will see something like this.

files

you can click mysite and upload your zip file from there.

upload zip here

After succesfully uploading your zip you will see your file in the list.

succesfully upload the zip

Unpack the zip

Still in the same screen, you can click open the bash console here button.

After few second you should be able to see the console screen.

bash console

now we can unzip the file using the following shell command

mv cookiecutter-flask-pythonanywhere-main.zip .. 
mv flask_app.py ..
cd ..
rm -rf mysite
unzip cookiecutter-flask-pythonanywhere-main.zip
mv cookiecutter-flask-pythonanywhere-main mysite
mv flask_app.py mysite
Enter fullscreen mode Exit fullscreen mode

the command above basically unzip the project into mysite directory

Unzipped project

Quick tips: ensure your website still up and showing hello from flask!

Installing dependencies

Open bash console again and go to my site

bash console

virtualenv venv
source venv/bin/activate
pip install -r requirements.txt 
Enter fullscreen mode Exit fullscreen mode

Now the installation process should be downloading.

Installing requirements.txt

Edit WSGI

Since now we have the code uploaded and python dependencies installed we can update or wsgi script to connect with our flask entrypoint file instead of the one created by pythonanywhere.

You can go to your web app and click WSGI configuration file

WSGI Configuration file

Now you can comment the last line so it look like this.

#from flask_app import app as application  # noqa
from autoapp import app as application
Enter fullscreen mode Exit fullscreen mode

You can save and reload file.

Edit WSGI configuration file

you can try access the project url, but you will receive error

Something went wrong :-(

first 500 error

Where going to debug it in the next step.

Virtualenv

Go back to web application dashboard

error log dashboard

Click error log.

ModuleNotFoundError

Looks like pythonanywhere unable to locate our installed dependencies that we install before through virtualenv

To fix this we just need to setup virtualenv on our web application.

  • Go to web application and look for virtualenv
  • Enter the path where we install our project dependencies through virtualenv
/home/kelvinswarna/mysite/venv
Enter fullscreen mode Exit fullscreen mode

virtualenv

Now you can try access the project website again and you should see different error.

2023-12-18 03:55:01,806: Error running WSGI application
2023-12-18 03:55:01,814: environs.EnvError: Environment variable "DATABASE_URL" not set
2023-12-18 03:55:01,814:   File "/var/www/kelvinswarna_pythonanywhere_com_wsgi.py", line 16, in <module>
2023-12-18 03:55:01,814:     from autoapp import app as application
2023-12-18 03:55:01,814: 
2023-12-18 03:55:01,815:   File "/home/kelvinswarna/mysite/autoapp.py", line 5, in <module>
2023-12-18 03:55:01,815:     app = create_app()
2023-12-18 03:55:01,815: 
2023-12-18 03:55:01,815:   File "/home/kelvinswarna/mysite/cookiecutterflask/app.py", line 27, in create_app
2023-12-18 03:55:01,815:     app.config.from_object(config_object)
2023-12-18 03:55:01,815: 
2023-12-18 03:55:01,815:   File "/home/kelvinswarna/mysite/venv/lib/python3.10/site-packages/flask/config.py", line 231, in from_object
2023-12-18 03:55:01,815:     obj = import_string(obj)
2023-12-18 03:55:01,816: 
2023-12-18 03:55:01,816:   File "/home/kelvinswarna/mysite/venv/lib/python3.10/site-packages/werkzeug/utils.py", line 595, in import_string
2023-12-18 03:55:01,816:     __import__(import_name)
2023-12-18 03:55:01,816: 
2023-12-18 03:55:01,816:   File "/home/kelvinswarna/mysite/cookiecutterflask/settings.py", line 16, in <module>
2023-12-18 03:55:01,816:     SQLALCHEMY_DATABASE_URI = env.str("DATABASE_URL")
2023-12-18 03:55:01,816: 
2023-12-18 03:55:01,816:   File "/home/kelvinswarna/mysite/venv/lib/python3.10/site-packages/environs/__init__.py", line 116, in method
2023-12-18 03:55:01,816:     raise EnvError('Environment variable "{}" not set'.format(proxied_key or parsed_key))
2023-12-18 03:55:01,816: ***************************************************
2023-12-18 03:55:01,817: If you're seeing an import error and don't know why,
2023-12-18 03:55:01,817: we have a dedicated help page to help you debug: 
2023-12-18 03:55:01,817: https://help.pythonanywhere.com/pages/DebuggingImportError/
2023-12-18 03:55:01,817: ***************************************************
Enter fullscreen mode Exit fullscreen mode

It's related to environment variable, where going to fix it in the next step.

Environment Variable

There are some things we just shouldn’t share with our code. These are often configuration values that depend on the environment such as debugging flags or access tokens for APIs. Environment variables are a good solution and they are easy to consume in most programming languages.

To fix this we need open the bash console again and go to mysite we have environment variable template that we can use

cp .env.example .env
Enter fullscreen mode Exit fullscreen mode

environment variable copied

Now we can try access the project website again and you should able to see the actual website now.

Broken styling

However the ui is not looking good since the styling is broken.

Install Node.js

The cookiecutter-project is running using Flask-Static-Digest so we need node.js and webpack to generate our static asset.

Luckily pythonanywhere provide some quickstart guide if we want to install node to our server

We need open a new bash console and go to our root directory.
Will be something look like this

04:26 ~ $ ls
README.txt  cookiecutter-flask-pythonanywhere-main.zip  mysite
04:26 ~ $ 
Enter fullscreen mode Exit fullscreen mode

now we can paste the command to download and install NVM

git clone --depth 1 https://github.com/creationix/nvm.git
source ~/nvm/nvm.sh
Enter fullscreen mode Exit fullscreen mode

Now our server should have access to nvm and we can install node 18

nvm installed

nvm install 18
Enter fullscreen mode Exit fullscreen mode

install node18 using nvm

Now we can move on to the next step which actually install our npm packages.

Install Npm packages

Open a new bash console and go to mysite

npm install
npm run-script build

Enter fullscreen mode Exit fullscreen mode

Running flask command

Open a new bash console and go to mysite

flask db init
flask db migrate
flask db upgrade
Enter fullscreen mode Exit fullscreen mode

Troubleshoot

Coming Soon!

Top comments (0)