Flutter Web — Github Actions-Github Pages

onat çipli
Dec 15, 2019 · 5 min read
Image for post
Image for post

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?

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

Image for post
Image for post

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.

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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.

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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.

Image for post
Image for post

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

Image for post
Image for post

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.

Flutter Community

Articles and Stories from the Flutter Community

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store