How Publish Flutter Web App on Heroku & GitHub Pages
→ My GitHub profile.
→ My LinkedIn profile.
→ Get the Ufo theme into your VS Code.
Hello there and welcome to my blog. Today’s post is about how to deploy your Flutter Web application on Heroku and GitHub Pages step-by-step. With that knowledge, you can choose one for your own project, or maybe use them both, why not!?
First of all, let’s put some boundaries. If I need to show you how to do EVERYTHING, this tutorial could may boring you.. and me. So, let’s focus on the most important things, so I’m skipping all the boring stuff.
For proceeding with this tutorial you are gonna need:
— A GitHub public repository with Flutter Web application running properly;
— Enable GitHub Pages on your repository;
— Create a Heroku account and connect with your repository.
Let’s keep on going!
We are going to begin with Heroku deploy. The reason is because it’s easier, you’ll see!
With only 4 steps you’ll be done.
#1 — Add the build-pack on Heroku settings
Follow the instructions on https://github.com/diezep/heroku-buildpack-flutter
#2 — Enable Content security policy (Optional)
Just in case…If your app make web requests to some web API, add this after your head tag on your-project/web/index.html:
You can find out more about that here.
#3 — Enable automatic deploy
Follow the instructions here. After that, all you gotta do, it’s push your commit to the selected branch. And wait for the deploy. And then, click on open app.
#4 — Open your app
If everything is OK, you’ll see your application running!
Here it’s mine: https://dailyphrases.herokuapp.com/#/
Now, let’s get to GitHub Pages deploy.
For the following approach, we are gonna use GitHub Actions workflow.
#1 — Create action
Go to Actions on your repository and create a yaml file with the following configuration:
I added some comments to help you to understand the procedures, but if your are familiar with yaml files and GH actions it’s a ordinary script.
#2 — Change the href
As described on your-project/web/index.html:
“If you are serving your web app in a path other than the root, change the href value below to reflect the base path you are serving from. The path provided below has to start and end with a slash “/” in order for it to work correctly. For more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base”
So we are gonna do that on our project so, change your href from <base href=”/”> to <base href=”/your-project-name/”>
#3 — Upload changes
Now, commit your changes and push it to the branch.
#4 — Access the page
If it’s running properly, will be available at https://your-user.github.io/your-project-name/#/after fishing running the action.
Here it’s mine: https://wendreof.github.io/cnpj_company/#/
I hope you had enjoyed it, see you soon on the next post!
Get the complete scripts and give it a star: https://gist.github.com/wendreof/3dfa1c35cd0dcb96c7637bff8435fe02
https://gist.github.com/wendreof/0f7a1af56e8b590d662e9134f3b74c13
Thank you for reading ❤
“Be strong and courageous. Do not be afraid or terrified because of them, or the LORD your God goes with you; he will never leave you nor forsake you. Deuteronomy 31:6”
Errors or suggestions? Leave a comment with your clap!
→ My GitHub profile.
→ My LinkedIn profile.
→ Get the Ufo theme into your VS Code.
