& HTML

Let’s say you want to build a Heroku web app with multiple different pages – perhaps you have a few different visualizations you want people to be able to interact with and it doesn’t really all fit nicely on a single page. But when you build a normal multi-page app in Dash or what have you, you’ll likely find that you’re using a lot more memory than you really need to, and that the whole interface is maybe not quite as beautiful as you’d like.
So this article will help you solve two related problems. First, Heroku free tier accounts have some pretty real limits on memory and slug size that can prevent your app from doing too much all at once. Second, styling Apps using Python code in Dash or Flask can be a bit of a pain. After all, these tools have to simultaneously do the actual work of the app and look good. They tend to focus on the first of these tasks and make the second a good deal more tricky or messy.
The solution I’ll be walking us through is to host multiple separate Heroku apps (don’t worry, this doesn’t cost you anything extra) and make them accessible on several connected webpages using HTML. This enables us to cut back memory and slug size requirements since we can split these up between our different apps. It also means that we can use all the tools of HTML and CSS to style our app smoothly and easily. To see this solution in action, you can check out my implementation of it at philosophydata.com.
To follow along, you’ll need (1) a functioning Heroku app, (2) a willingness to learn some super-basic HTML, and (3) a Github account.
The process has three core steps:
- Create your website
- Display your app in your website
- Host your website
So without further ado, let’s get started!
1. CREATE YOUR WEBSITE
This is probably the scariest step. You just built a whole app, do you really need to build a website as well? You may not even know any HTML or CSS – this is gonna be a nightmare!
Fear not, my friend. It will take you a little more time, but it is far easier than trying to style your app in Dash, it gives you a chance to learn a new skill, and it will get you a lot more polished results.
The key to this is to find an existing HTML template that you like and simply adapt it to your needs. A whole library of great templates can be found at templated.co.

Once you’ve found one you like, just download the folder with the template. If you open this, you’ll find some HTML pages, an assets folder holding the relevant CSS and Javascript (everything is already styled and optimized for mobile, no need to stress), and a folder for images and the like.
At this point you just need to fill in the blanks with the info you like. Open the index.html file and change the titles to the ones you prefer, and give new labels to the tabs.

Ok so now you’ve modified the titles and the tabs. To change the landing page image, you will need to go into the style.css file (also sometimes called main.css) and find where it refers to the current banner image. Replace that with your chosen image and you should be good to go.

Here’s the results of 5 minutes work changing some words in the code:

You may want to relabel some of the html files with more descriptive titles as well, and in general just explore and add new pages, mess with images, that kind of thing. To see changes as you go, open your HTML file in your browser and refresh the page. There’s a lot of trial and error, but design is fun!
I leave the experimentation to you, but if you hit in any snags, feel free to reach out. Now let’s get to the good stuff: setting up your app in a webpage.
2. DISPLAYING YOUR APP VIA HTML
If you’ve got your app hosted on Heroku, then you’ve got a link to it as well. From here it is a simple matter to just display the results of that app as a kind of page-within-a-page via HTML.
Here’s how the HTML will look:
<iframe src="YOUR HEROKU URL", width=100%, height=500></iframe>
You can of course adjust the width and height as you see fit. Check here for a deeper dive on the iframe.
The result will be something like this:

Note that your Heroku app itself doesn’t need really any styling at all. But it will still look pretty clean and sharp, because CSS, a language designed for styling, is doing all the work.
Another cool trick at this point is to display the same app multiple times, arranged in columns or rows. This would mean that a relatively simple app can be used multiple times on a single page, enabling comparisons between outputs.
Here’s an example. First the HTML:
# adjusting the width makes these display as three columns, with some space between them
<iframe src="https://w2v-data.herokuapp.com/", width=300, height=450, scrolling='no'></iframe>
<iframe src="https://w2v-data.herokuapp.com/", width=300, height=450, scrolling='no'></iframe>
<iframe src="https://w2v-data.herokuapp.com/", width=300, height=450, scrolling='no'></iframe>
And then the result:

Now that you have this tool in your toolbox, you can use it on as many tabs as you like. This shouldn’t tax your app’s memory because each app is hosted on a separate dyno, where a regular multi-page app would have to hold all the apps on a single dyno. My implementation was able to host 4 different apps, sometimes tripled on a single webpage, while never breaking 50% of Heroku’s memory limit. With the usual multi-page method, I struggled to get more than one app to load at all.
Now we’ve got a beautiful website. Let’s see how we can make this available to the world.
3. HOST YOUR SITE
There are any number of hosting services, but one easy one is Github Pages. Every Github account comes with the ability to host one webpage for free.
To set this up, first make a repo named .github.io. Then use the following command in the terminal:
git clone https://github.com/username/username.github.io
Now you have your website repo, and you can just copy over all the files you have been working with, add them, and commit the changes.
Github will see that you created a repo formatted as .github.io and will automatically look for an index.html file to host as a website. This is a lot like how Github lets you set up a readme for your page by creating a repo with your own username.
Once you’ve got the repo set up, you’re essentially done! Nice work! If you wanted to add one last layer of polish, you could set up a custom domain name for your site so that the URL doesn’t point to a github.io name. This is pretty simple to do and, once you buy the domain name you want, you can set it up by following the steps here.
Now you have a beautiful multi-page app with excellent styling and low memory usage. Wonderful!
Let me know if this was helpful or if you run into any snags, I’d be happy to help. For how my own Github site is set up, check the repo here.