loading...
Cover image for Adminator Flask Dashboard - How to push LIVE a simple admin panel with Heroku

Adminator Flask Dashboard - How to push LIVE a simple admin panel with Heroku

sm0ke profile image Sm0ke Updated on ・4 min read

Hello Coders,

This article demonstrates how to push LIVE a production-ready Flask dashboard using the Heroku platform and a few simple configuration scripts.


In case you want to start faster your next admin dashboard project check out this index with Open Source Admin Dashboards already coded with authentication, database, and deploy scripts - Provided by AppSeed.


The final product Adminator Flask Dashboard is an open-source product generated by AppSeed platform in Flask using the free Adminator UI Kit.

Adminator Flask Dashboard - Open-Source Admin Panel coded in Flask.


In a rush?

Let's see something on the screen with a few actions:

  1. Create a free account on Heroku
  2. Open a terminal window and clone the sample project:
$ git clone https://github.com/app-generator/flask-dashboard-adminator.git
$ cd flask-dashboard-adminator

Authenticate into Heroku platform using the terminal

$ heroku login
heroku: Press any key to open up the browser to login or q to exit:
Opening browser to https://cli-auth.heroku.com/auth/cli/browser/0d71eacf-151a-462d-9ba6-9c9502b9e3dc
Logging in... done
Logged in as sm0ke@something.com 

Push the project into Heroku platform

$ heroku create
Creating app... -
Creating app... done, ⬢ morning-retreat-24780
https://morning-retreat-24780.herokuapp.com/ | https://git.heroku.com/morning-retreat-24780.git

The app is created using a random name morning-retreat-24780 and should be visible on the Heroku dashboard. If you want a particular name, just execute the create command with a third argument:

$ heroku create predator-vs-rocky

The last step - Trigger the build and Deploy the app

$ git push heroku master
Counting objects: 138, done.
Delta compression using up to 4 threads.
...
... boring messages
... more boring messages
...
... .. <('_')> .. <---- This is my hacky avatar and has nothing to do with anything
...
remote:        https://morning-retreat-24780.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/morning-retreat-24780.git
 * [new branch]      master -> master

At this point, the app should be successfully deployed and we can access it from the terminal by typing heroku open or by visiting the Heroku dashboard and click on Open App button.

Flask Dashboard Adminator - Charts Page.

That was easy right?


More automation

Heroku let you connect the app to the real Git account and trigger automatic builds when a new commit occurred.

Connect the app to the Github repo

Heroku - Link Flask Dashboard with Deployed App.

Enable automatic deploy

Heroku - Enable Automatic deploy


The relevant files:

To have a successful deployment, Heroku expects some files to be present in the project before we execute git push heroku master

  • runtime.txt - optional file that specify the python verison to be used
  • Procfile - trigger the deployment via Gunicorn. The file contains only one line:
web: gunicorn run:app --log-file=- 

The argument to the Gunicorn command, run:app is the WSGI app, constructed by the run.py file:

# Contents of run.py
from app import app, db

if __name__ == "__main__":
    app.run()

In case you find this post useful and want to play with more flask dashboards, already provisioned with deployment scripts for Heroku, Docker, Gunincorn, and Waitress, feel free to access the links:

The full-list with open-source admin dashboards is published on Github.


Links and Resources

A short-list with resources that help the audience to accommodate faster with the topics presented here.

Flask Framework

Flask Framework is a lightweight WSGI web application framework. It is designed to make getting started quick and easy, with the ability to scale up to complex applications. It began as a simple wrapper around Werkzeug and Jinja and has become one of the most popular Python web application frameworks.

Heroku

Heroku is a cloud platform as a service supporting several programming languages. One of the first cloud platforms, Heroku has been in development since June 2007, when it supported only the Ruby programming language, but now supports Java, Node.js, Scala, Clojure, Python, PHP, and Go.

AppSeed

AppSeed, the provider of this free product, is a platform that uses automation tools and boilerplate code to provide UI-Ready web apps coded in various patterns and programming languages: Admin Dashboards, Static Sites built with 11ty and Panini SSG, JAMstack starters.

Adminator

Adminator is a responsive Bootstrap 4 Admin Template crafted by ColorLib. It provides you with a collection of ready to use code snippets and utilities, custom pages, a collection of applications and some useful widgets.


Thank you for reading! Let me know your thoughts in the comments.

Posted on by:

sm0ke profile

Sm0ke

@sm0ke

#Automation, my favorite programming language

Discussion

markdown guide