Host Flutter Web on Github Pages using Github Actions #FREE
Let’s use Github Actions to build and host our Flutter web application on gh-pages.
Flutter web
The web itself is a flexible platform, but Flutter is ideal for building web applications like PWAs or SPAs and bringing your existing mobile app to the web.
Github Actions makes it easy to automate all your software workflows, now with world-class CI/CD. Build, test, and deploy your code right from GitHub. Make code reviews, branch management, and issue triaging work the way you want.
GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process and publishes a website.
Q: How can I enable gh-pages for project sites?
A: We just need to flutter build files on origin/gh-pages branch then GitHub will host those files as a website in URL: username.github.io/repository_name
Note : You can create a GitHub Pages site in a new or existing repository.
Let’s get started :)
Step 1: Create a new Flutter project
Run the below command and pass the name of the project
flutter create project_aj
Let’s launch the app in the browser by opening the root folder in your preferred IDE.
It works :)
Step 2: Set up GitHub Repository
If you don’t already have a Github account, establish one first. Then, follow the instructions below in the upper right corner of your screen to create a new repository.
Enter the repo name and click on Create Repository
According to your configuration, you should see something like this.
Step 3: Add Flutter project to GitHub repo
Run the command listed below in the project root directory and refresh the repo page on Github.
git init
git add .
git commit -m "initial commit"
git branch -M master
git remote add origin https://github.com/{{YOUR_PROJECT_URL}}.git
git push -u origin master
Step 4: Set up GitHub Action
Open your IDE, and create a yaml file host_on_gitHub_pages.yml in the root directory .github/workflows/host_on_gitHub_pages.yml
And add below to the file
This will build a github action that will run after each PR or commit to the master branch like below to deploy the app to Github pages 🚀.
To avoid the below issues
Observe line 51
flutter build web --base-href=/project_aj/and change the value of --base-href according to your project path. For detail check the issue.
Step 4: Set up Github Pages
Go to the Settings tab on the Github page. Select the source to Deploy from a branch and branch as gh-pages and hit save.
Note: If you can’t see the gh-pages branch, wait for few mintues and refresh page.
Next, under the Actions tab, click on pages-build-deployment, and under workflow runs select the latest one i.e step3 in the below image.
When the files are deployed, you see something similar to what is seen below.
As soon as the action is finished, we can launch the hosted repository at https://ProjectAJ14.github.io/project_aj/
HostURL: https://username.github.io/repository_name
Now that we’ve built our CI&CD with GitHub Actions, every push to master will cause the action to be triggered once more.
Let’s just quickly change the theme and some titles in our main.dart .
Commit the changes and push.
That should trigger our first workflow i.e “Host on GitHub Pages” which is going to build the app and update the gh-pages branch.
After workflow Host on GitHub Pages is done the last workflow will be triggered i.e pages build and deployment which would deploy all files from the gh-pages branch to Github pages.
Let’s just hit refresh :)
You can also create your own github site with an address https://USER_NAME.github.io/ . I have started working on my own site with flutter web. Although it is not yet complete, it makes use of GitHub Actions and is hosted on GitHub Pages.
Check it out https://ProjectAJ14.github.io
