Hosting Flutter Web , Part 1 — Using Github Pages and Github Actions
Hey readers , welcome back . I have gained a sudden interest on flutter web so I created my portfolio using it . I took some inspiration from dribbble and some awesome portfolios out there , it’s still work in progress have a look and give me suggestions in comments below.
My Portfolio it is hosted on Github Pages , now this is what my article is about “Hosting flutter web” . As developers are always trying out something new and there is always need to check how production variant looks or for testing purposes , there is a need of hosting platform which is inexpensive , convenient enough for developer to setup and host on it , efficient and easy enough for testers and users to use it.
I have two personal recommendations which have good amount of customizing options and are fast , to host your personal projects.
- Github Pages
- Firebase Hosting
This article will be covering Github pages and Github Actions for easy deployment of flutter web and the next article will be about Firebase hosting.
Let’s get started..
To use flutter web run these commands as by default flutter web is not enabled.
flutter channel beta
flutter upgrade
flutter config --enable-webThen flutter create projectname
Your project structure might look like this.
Can you notice web folder, a sub folder which is created indicating this project is flutter web enabled.
Once your project is complete and is ready to deploy , run this
flutter build web
This will create a new folder build\web in your project directory housing all your files like index.html , main.dart.js and assets folder which will be later used for deployment.
All the files in your build\web folder are generated , it contains index.html in which you can add your extra splash screen .
Splash screen is showed during the website loads up .
Now these files when you deploy they form your website , so how to deploy in github pages now?
For github pages to host your website follow these steps:
Initialize this directory
git init
Then add all your files , commit it and push it to remote repo.
git add .
git commit -m "Commit message"
git remote add origin repo_link
git push -u origin master
Now to activate Github Pages for a normal website project which only contains html , css and java script files you can follow this .
Go to github project repo > settings > scroll down > select branch , give Correct branch which contains all your files and Et voila your website is hosted .
But in flutter web that is not the case there are many complications , you have seen project structure in previous image , it is different , it contains various files , dart files , yml files and more . The files needed for web hosting(Files present in build\web folder) are not in root folder and moreover every time the code is updated and flutter web build command is run , new html , css and java script files are generated so to change these files again and again to host , it will be troublesome . Solution for all of this is Github Actions .
Whenever you push a commit to your repo , github actions workflow starts and jobs are done , your website is updated and deployed, sounds amazing right. Now we will begin to setup our workflow.
Lets keep our files required to hosting in a different branch(let’s name it gh-pages) to avoid confusion , to make sure hosting files are in root directory and also to keep it clean .
For this to happen after every commit , we have to push our generated files to gh-pages branch but here it will be double work and here I use DRY Principle and github actions comes to our rescue.
The DRY Principle: Don’t Repeat Yourself DRY stand for “Don’t Repeat Yourself,” a basic principle of software development aimed at reducing repetition of information or work.
Github Actions setup:
First let’s create our personal access token. But what are Personal access tokens?
Personal access tokens function like ordinary OAuth access tokens. They can be used instead of a password for Git over HTTPS, or can be used to authenticate to the API over Basic Authentication.
In Layman’s terms , Personal access tokens are like tickets to the Cinema . Just like anyone with the ticket can go into cinema similarly anyone with your Personal access token can use to access , commit , view your public and private repos.
We will be using access token in our script to create a new branch and pushing our commit and deploying flutter web.
To create personal access token , go to settings > developer settings > Personal access token > generate new token.
Give a note for your reference later to know what this token is being used for. Select repo:status and public_repo . If your repo is private select repo too , then press generate token , now copy this token (It will be shown only once so copy it).
Now to use this token in your script we will first need to create Secrets inside our repository , What are secrets?
Secrets are environment variables that are encrypted and only exposed to selected actions. Anyone with collaborator access to this repository can use these secrets in a workflow
We will be assigning our personal access token to a variable (secret) which later can be used in our github actions script.
To create and set a value to secret go to settings(Repository settings) > Secrets > New Secret
Then set your secret name which you will be using in actions file and paste the personal access token in value field, then press add secret.
I named my secret hosting_secret .
Now let’s write our actions yml file.
Go to actions tab in your repository then select skip and set up a workflow yourself. Now lets write our code.
So what is going on here? This job starts executing on pushing a commit to master branch (Line 3). Also we have defined what job has to be done . Build web , our job name will be shown in our actions tab later as a job (Line 8). We have to declare our secret first (Line 10).
Then we mention the steps and all the commands to create a gh-pages branch and push all files generated after flutter build web — release (Line 19) into that branch , which will be used for deploying .
On line 26 mention your email , on line 27 mention your username and on line 31 mention your repo link .
After pressing start commit then commit new file, on every commit to master , new files will be generated and pushed to gh-pages branch which will be used by gh pages for hosting your website.
If you wish to do any changes to your actions file later you can find it here.
You can see your current running jobs under Actions tab , if there any any error or any checks are not passed it will be shown here.
All the files added in gh-pages are done by github actions under a commit name update. Now everything is setup , your website is deployed using gh-pages branch and on every commit to a master branch , a new job starts to apply your changes into website and to deploy them.
All the source code can be found on my Github , star the Repo and fork it . Link to my portfolio developed using flutter web.
Stay tuned for next part , Hosting flutter web using Firebase :)
I got something wrong? Mention it in the comments. I would love to improve.
If you learnt even a thing or two, clap your hands 👏 as many times as you can to show your support!
