This content originally appeared on DEV Community and was authored by Parth Doshi
I am writing this post to demonstrate how I deployed a Jupyter Notebook as an HTML Web-page. When provided with a problem statement for which I decided to implement the solution in Python, I was exploring different ways to share my Python Script displaying the code snippets with its output when I found out this method.
You can check out the final output here ??
Production Application Test - Project Webpage
Problem Statement ?
We have some customer records in a text file, one customer per line, JSON formatted lines. We want to invite any customer within 100km of our Dublin office for some food and drinks on us. Write a program that will read the full list of customers and output the names and user ids of matching customers (within 100km), sorted by User ID (ascending).
- You must use the first formula from this Wikipedia article to calculate distance. Don't forget, you'll need to convert degrees to radians.
- The GPS coordinates for our Dublin office are 53.339428 and -6.257664.
- You can find the Customer list here.
Implementation ?
- Google Colaboratory ⚗️ to implement the Python Script
- Folium ? to render Maps and Markers for Office and Customer Locations
- URLlib Module ? to fetch and process customer data
- Built-in JSON Package ? to process the data after initial pre-processing
- Pandas ? to work with the processed customer data
- Built-in UnitTest Library ? to implement basic unit-testing
- GitHub Pages ? for hosting the generated Web-page
Deployment ?
Jupyter Notebook to HTML
I used jupyter nbconvert to convert the ipynb script to html
jupyter nbconvert <input-file> --to <output-format>
Supported output formats are HTML, PDF, LaTeX and many more.
Additional Configuration Options can be used to enrich the experience of converting notebooks to other forms. One option which I used was changing the theme of the notebook which is set to Light by default. It can be done using HTMLExporter.theme CLI flag.
Usage Eample:
jupyter nbconvert script.ipynb --to html --HTMLExporter.theme=dark
After generating the HTML file, I made changes to the HTML code like adding a navbar to navigate to sections and changing the background colour jp-Notebook class from Black to Grey20 colour (#333333). I hosted it using GitHub Pages directly from its GitHub Repository.
GitHub Repository ?
This content originally appeared on DEV Community and was authored by Parth Doshi
Parth Doshi | Sciencx (2021-04-18T15:52:27+00:00) Deploying Jupyter Notebook as a Web Page. Retrieved from https://www.scien.cx/2021/04/18/deploying-jupyter-notebook-as-a-web-page/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.