Learn how to Deploy a Panel Visualization Dashboard to GitHub Pages | by Sophia Yang | Oct, 2022

The quickest solution to deploy Python knowledge apps

By Marc Skov Madsen and Sophia Yang

Python instruments make it straightforward to construct visualization dashboards, however sharing them utilizing a Python server within the cloud could be troublesome and costly. What if it had been as straightforward as pushing your file out to GitHub pages, with no operating server wanted? Now it’s! Because of the HoloViz crew, particularly Philipp Rudiger, with the brand new Panel 0.14 launch, you possibly can run a Panel knowledge app solely in your browser, no server wanted!

That is now the quickest solution to deploy apps in Python. The apps are very performant when loaded as a result of there isn’t any latency for communication between server and consumer.

Working your dashboard in WebAssembly (by way of Pyodide and PyScript) is the way forward for dataviz in Python.

On this article, we’ll present you how one can deploy a Panel app simply on Github pages and share your app with the world!

Panel is the dashboarding library within the open-source HoloViz ecosystem, which incorporates eight libraries: Panel, hvPlot, HoloViews, GeoViews, Datashader, Lumen, Param, and Colorcet, and was developed by Philipp Rudiger, Jim Bednar, and a group of contributors. Take a look at our earlier weblog submit on the three predominant methods to construct a Panel dashboard to study extra.

• Step 0: Arrange the atmosphere

You have to to put in the newest model of Panel:

conda set up panel hvplot -c pyviz

Test to verify your Panel is at the least 0.14.0:

conda checklist panel

• Step 1: Convert a Panel app to WebAssemly

In case you have a Panel software file app.py, you possibly can convert your present Panel software to WebAssembly with one line of code:

panel convert app.py --to pyodide-worker --out docs/app

Step 1 will write your code into an HTML file and a JS file. pyodide-worker is specified to generate these two recordsdata utilizing Pyodide operating in a separate thread to extend efficiency. Each recordsdata shall be below the docs/ folder. The underlying know-how is WebAssemply, Pyodide, and PyScript. Take a look at the Panel WebAsembly documentation, pyscript.internet, and our earlier weblog submit on PyScript to study extra.

• Step 2: Add recordsdata to GitHub

git add docs/*git commitgit push

• Step 3: Arrange GitHub Pages

After you add the created recordsdata to GitHub, you possibly can configure GitHub Pages in GitHub Settings — Pages — Construct a deployment, from predominant /docs.

Code: https://github.com/awesome-panel/examples/blob/predominant/src/hello-world/app.py

GitHub pages: https://awesome-panel.github.io/examples/hello-world/app.html

On this first hey world instance, we have now a easy Panel app file app.py utilizing a Panel template and displaying a sentence.

Give it a strive your self:

• Fork this repository: https://github.com/awesome-panel/examples
• Git clone your forked repository
• Arrange your Conda atmosphere and set up the newest Panel by way of conda set up panel hvplot -v pyviz
• You may panel convert for instance the hello-world software to WebAssembly by way of

panel convert src/hello-world/app.py — to pyodide-worker — out docs/hello-world

• The panel convert command above created two recordsdata within the docs/hello-world folder: app.html and app.js. Add each of those two recordsdata to GitHub (following step 2 above) and arrange GitHub pages with the primary department and /docs folder (see step 3 above). After a couple of minutes, you will note this app displaying up on the Github web page (you’ll get a brand new Github web page hyperlink from your personal forked repo).

Non-obligatory steps:

• To serve a Panel app regionally, you possibly can serve for instance the hello-world software in your Panel server by way of panel serve src/hello-world/app.py -autoload. Will probably be out there at http://localhost:5006/app.
• Within the panel convert step, If you wish to keep away from repeating the massive obtain over and over, you possibly can even convert to a progressive internet app that may be put in in your laptop computer! It is so simple as including the — pwa and — title flags.
• To ​​serve a WebAssembly app regionally:

python3 -m http.server

The app is now out there at http://localhost:8000/docs/hello-world/app.html

Code: https://github.com/sophiamyang/hvplot_interactive

GitHub pages:

https://sophiamyang.github.io/hvplot_interactive/hvplot_interactive/hvplot_interactive

Beforehand, we posted an in depth weblog submit and a video tutorial on the best solution to create an interactive dashboard in Python. With comparable steps, we are able to convert this app to WebAssembly and deploy it on Github pages.

Observe {that a} Panel app file can both be a .py file or a .ipynb pocket book file. On this instance, our Panel app file is hvplot_interactive.ipynb.

To deploy this app to Github pages:

• We use panel convert to transform this app to WebAssembly

panel convert hvplot_interactive.ipynb — to pyodide-worker — out docs/hvplot_interactive

• We then add created recordsdata to Github following step 2 in the beginning of this text.
• Lastly, we observe step 3 to arrange GitHub pages.

Then we are able to discover our app on Github pages.

Code: https://github.com/awesome-panel/examples/blob/predominant/src/streaming-indicators/app.py

Github web page: https://awesome-panel.github.io/examples/streaming-indicators/app.html

With the identical steps, we are able to even deploy a real-time streaming dashboard on GitHub pages!

Hope you discover this text useful! In case you have questions or need to connect with different HoloViz customers try https://discourse.holoviz.org/.

Thanks Jim Bednar and Phillipp Rudiger on your steerage and suggestions!

. . .

By Marc Skov Madsen and Sophia Yang on October 6, 2022.

Sophia Yang is a Senior Knowledge Scientist at Anaconda. Join with me on LinkedIn, Twitter, and YouTube, and be part of the DS/ML E book Membership ❤️