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.
In a rush?
Let's see something on the screen with a few actions:
$ 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 firstname.lastname@example.org
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.
That was easy right?
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
Enable automatic deploy
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()
- Flask Dashboard Black - UI-ready Admin panel - LIVE Demo
- Flask Admin Panel Argon - LIVE Demo - MIT License
The full-list with open-source admin dashboards is published on Github.
A short-list with resources that help the audience to accommodate faster with the topics presented here.
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 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, 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 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.