Flutter Web — Github Actions-Github Pages

Today We will publish and build our flutter application to the web with Github Actions and It will be hosted by the gh-pages.

Github just releases another feature called Actions. Actions help us to create CI&CD integrations with our repositories and that's amazing. On the other hand, Flutter Team just announced that building web applications on beta in Flutter Interact.

Little secret: Also they anounce build desktop applications with flutter, it is on alpha for now and works on MacOs 🤩

Flutter Web — Let's Get Started !!! !! !

First thing first, To create a flutter web application we need to be on beta or master or dev channel so how can I enable flutter web?

flutter channel beta
$ flutter upgrade
$ flutter config --enable-web

after enabling web, We can create a new project which comes with web support flutter create my_new_project or we can add web support to an existing project with flutter create . (in your project root).

Creating flutter project : flutter create flutter_web

Now we have a flutter project that can run on the web. To publish or host it with gh-pages, we need to open a repository

git init
git add --all
git commit -m "first commit"
git remote add origin https://github.com/onatcipli/flutter_web.git
git push -u origin master

now we push the initial state of our flutter project to master.

Gh-Pages — Project Site

Hosted directly from your GitHub repository. How can I enable gh-pages for project sites?

We just need to flutter build files on origin/gh-pages branch then GitHub will host that files as a website in URL: username.github.io/repository_name

Github Actions

We will create an action to build and publish our flutter web project but we need an access token to commit from machines that will run our actions.

select repo:status and public_repo section to commit public repositories.

If your repository is private you need to select private sections as well.

After token created copy that and keep somewhere because you couldn't see it again, we need it a few moments later…

Secrets

Make the name ‘commit_secret’ cause that will match inside action file, add your access token key to value part

Now In our secrets, we have an access token key and we can reach this token with its name brilliant!!! We will use it in our flutter_build_publis_web.yml to be able to commit our gh-pages branch, why we need to commit the gh-pages branch? To GitHub host our files(flutter build web outputs) which is a web application.

Let's get into the fun part which is creating flutter_build_publish_web.yml

After clicking Set up a workflow yourself, We will see this:

We need to a little bit as following you can copy and paste it but You need to change some values.

First, change user.email (line 26) and user.name (line 27) as I commented on the following gist git config --global user.email your_email
git config --global user.name your_name

Second, change with your remote (line 30)

git remote add origin https://${{secrets.commit_secret}}@github.com/your_username/repository_name.git

After making these changes we are ready to go!! When clicking the start commit and commit we just push that commit to master. Master will have a new commit pushed and that should trigger our Github Action.

We configure it in our action. We can see the running or finished actions from the Actions tab.

And When we click the action name we can see the details about it

after action completed we can launch the hosted repository URL which is onatcipli.github.io/flutter_web

the pattern is like : username.github.io/repository_name

Now we build our CI&CD with GitHub Actions in every push on master the action will be triggered again.

Let's change the AppBar title and try it will it work.

Commit and push to the master, it takes 2min 24 seconds

And the AppBar changed!

I also create my portfolio website with flutter check this out(onatcipli.github.io) it is not finished yet but uses the GitHub Actions and hosted by GitHub Pages as well.

the repository source: https://github.com/onatcipli/flutter_web
hosted web application of that repository: https://onatcipli.github.io/flutter_web

You can reach and follow me on twitter @CipliOnat or Linkedin.

Flutter Community