Ctrl+K

Uploading your dashboard to PythonAnywhere

Uploading your dashboard to PythonAnywhere#

Structure your app directory#

Here is an example of how I structured my directory on my local computer for a zillow dashboard example.

zillow app folder
|-- zillow.py
|-- assets
|   |-- favicon.ico
|   |-- data
|   |   |-- zillow_data.csv

Structuring your app directories in a similar way will help you avoid referencing issues.

Create account#

  1. Create a free account at https://www.pythonanywhere.com

    • With a free account, you can host one dashboard. Paid accounts are obviously available if you want to do more.

    • With a free account, you are limited to 100 seconds of CPU time.

    • With a free account, your web app will be located at your_username.pythonanywhere.com.

  2. After creating an account and logging in, you will be in the PythonAnywhere dashboard.

Create virtual environment#

  1. Create a new virtual environment.

    • We will use mkvirtualenv to create the environment. I will name this environment dashboards.

      mkvirtualenv dashboards --python=/usr/bin/python3.9

    • Once the environment has been created, it should be activated automatically, and you should see (dashboards) at the start of the line.

    • If you come back to this later to make some changes, you can activate a particular environment to work on it using workon dashboards. You can then deactivate the environment by using the deactivate command.

    • With the dashboard activated, we need to add the necessary packages.

      pip install pandas plotly dash dash-bootstrap-components

      • If you are using other packages include those here as well.

    • If you ever want to see a list of your virtual environments, simply use the command lsvirtualenv.

    • If you ever want to remove one of the environments, deactivate it and then rmvirtualenv dashboards.

  2. This virtual environment can be used for multiple dashboards.

  3. Now go back to the main dashboard.

Create the web app#

  1. Click on Web in the top right and then Add a new web app.

  2. Enter your app’s domain. With a free account, it will just be your_username.pythonanywhere.com

  3. When prompted to select a python web framework, select Flask.

  4. When prompted to select a python version, select the version you used to create your dashboard.

  5. Specify the path for your files (e.g., /home/VanAlfen/zillow-app/zillow.py). You get to choose the directory and the file name, but do not change the /home/username/.

  6. Click Next and you should be taken to the settings page for your web app.

  7. In the Code section of the page, click the WSGI configuration file.

  8. At the end you will see something like:

    from zillow import app as application

    In this case, zillow is referring to our file zillow.py. Change it to:

    from zillow import app
application = app.server

  9. Save these changes and go back to your web app settings.

  10. In the Virtualenv section, enter the path to your virtual environment. It will probably look something like this: /home/VanAlfen/.virtualenvs/dashboards

  11. Though not required, I would recommend enabling Force HTTPS in the Security section.

  12. In the Code section, go to the source code directory.

  13. Create the necessary directories and upload external files such as your data. The folder structure should look like the structure at the beginning of this guide.

  14. Now go back and click on your main code file — zillow.py — to edit it.

  15. Replace the contents of this file with your app’s code.

  16. Make sure the following adjustments to your code have been made.

    • Remove the debug=True from app.run_server() at the end.

    • If you reference external files (e.g., data, favicon):

      • Make sure you’ve included __name__ as the first argument in your app’s instantiation. For example:

        app = Dash( __name__, external_stylesheets=[dbc.themes.SANDSTONE] )

      • Update the paths to the external files. For example, the line of code specifying my path to the zillow data would be:

        zillow_data_raw = pd.read_csv('./zillow-app/assets/data/zillow_data.csv')

  17. Save the file and go back to your web app settings.

  18. Now at the top, click to reload your app. Your app should now be visible at your url.

  19. If there are errors, you can find them in the Error log on the settings page in the Log files section.

Helpful resources#

Contents