Compiling And Deploying Your Flutter Web App to GitHub Pages

Simple step to deploy your flutter web app to free host using GitHub Pages and setup your own domain

src: The Garden of Words (https://hipwallpaper.com/the-garden-of-words-wallpapers/)

Introduction

Almost a year ago, Flutter launch support for build web application. Flutter provide a portable toolkit for building beautiful experiences wherever you might want to paint pixels on the screen. Given the pervasiveness of the web, it’s a natural place to experiment with Flutter, but its characteristics are different from a mobile platform like Android and iOS. Now Flutter Web reach beta phase and can be tried from Flutter’s beta channel. Lot of bugs already fix, until now big update that Flutter Web bring is improvement for their scroll function. Previously scrolling in Flutter Web is acting like mobile application behaviour, so you can’t scroll it with mouse’s scroll and you have to drag it like mobile-app behaviour. If you ever tried Flutter for develop mobile app and never entering web front-end world, you must be happy with this. Please try it and check this article.

Compiling Flutter Web App

Before deploying, you need to compile your Flutter Web App, why? Because it need to compiled as JavaScript first since we can’t deploy it as dart code. What you need is just type :

flutter build web

After that, compile process may need take a second and it will generate new web artifact inside build folder. It may look like this :

Compiled Flutter Web App

Deployment to GitHub Pages

GitHub Pages are public webpages hosted and easily published through GitHub. You can then modify your GitHub Pages’ content remotely via the web or locally on your computer and just commit it to your repository. It means that GitHub pages is free because you only need to create a public repository as host of your web app with compensation you need to use your_username.github.io as your domain except you use your own domain. So, let’s get started :

• Go to your GitHub account and create new repository named your_username.github.io, your_username is your GitHub username. Don’t forget to set your repository as public repository. Please note that this is mandatory part for GitHub Pages to be work, if it not same or not public repository it won’t work.

Create new repository, my GitHub pages is already used

• Next step is deployment, you need to commit all of your compiled Flutter Web App to that repository. Just commit and push it, then GitHub pages will build it for you. After you receive an email, you can access your deployed Flutter Web App by accessing :

http(s)://your_usename.github.io/

• The best part of using GitHub Pages is you can deploy as many as you can even with different programming language. Why? Because what we deploy is just push the whole app into root of your GitHub Pages. I use my own GitHub Pages for example :

# Root : Using Flutter Web
https://pahlevikun.github.io/
# /v1 : Using PHP Native
https://pahlevikun.github.io/v1/

• If you want to do that, you can simply create a folder in your repository, and GitHub will detect it automatically like image below :

Create new path for another Web App

That’s all! Congrats for your GitHub Pages deployment! Next step is optional if you want to use your own domain

Setup Domain for GitHub Pages

Yes, GitHub Pages support custom domain, it means that you can use your own domain here. First step is you need to buy domain from any provider. For me, I buy it from local provider in Indonesia.

• First step, you need to go to your GitHub Pages’ settings, try to find Github Pages sub settings and simply put your domain here.

Custom domain (pahlevikun.id)

• After that, what you need is setup CNAME in your repository. Simply put your domain inside CNAME then commit & push to your root repository

Setup CNAME

• Final step is to setup your GitHub Pages IP in your domain provider. This setup may different between domain provider. But the general way is you need to Navigate to your DNS provider and create either an ALIAS, ANAME, or A record. To create an ALIAS or ANAME record, point your apex domain to the default domain for your site. For more information about the default domain for your site. To create an A record, point your apex domain to the IP addresses for GitHub Pages.

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

• Official References: For most up to date IP Addresses, use GitHub’s official documentation and for setting up CNAME use this documentation.

That’s all from me, feel free to read and comment. I hope this article help your curious about Flutter development. If you interest in flutter, you can read my article here in my medium. See you!

Bridging Between Dart and Native Code with Flutter Channel for Communicate Each Other