How to Host your Flutter Web app on GitHub Pages?

Flutter Web has been stable for a while now, and now people are building several web applications using Flutter Web. However, not everyone has the privilege to host their website to a paid server. There might be other reasons why you must be looking to host your Flutter web app onto GitHub Pages :

• Just to test the performance of Flutter on Web
• Publish your Flutter projects just for Showcase or as a Portfolio Item
• Checking your Flutter Web Application on Free hosting before actually hosting to a Real website.

For these reasons and many other, GitHub and Firebase offer an solution. But today we will discuss how to host your Flutter Application onto GitHub Pages.

Pre-Requisites

1. An working GitHub Account and Git.
2. A working Flutter application (You can use the default counter application and delete it later).

Getting Started

1. Create a GitHub Repository (one time)

Open GitHub and login to your account and click on create new repository. Create a repository with the following name:

{yourGithubName}.github.io

Ensure to uncheck add README and click on create repository. An empty repository will be created for you.

2. Getting Flutter Application Ready

Try to run your Flutter application on Web and check if it works as expected. If you don’t get an option to run on Chrome, it means your Web support is disabled. Firstly check if you are on a stable release which supports web or simply upgrade to latest Flutter SDK version like this:

flutter upgrade

Then to enable support for Web simply run the following command:

flutter config --enable-web

Now restart your editor and you will see an option to run on Chrome, which means we are good to build for web now. To build for Web simply run the following command:

flutter build web

Before this I suggest you to use flutter clean so that the build directory is cleared and only the web build exists there.

After the command completes executing you fill find a folder by the name web under \build\

The files under build\web\ will be uploaded to GitHub.

Host Flutter Web App on GitHub Pages

Now that we have our build under build\web\ we can upload it to GitHub and view our Flutter Web Application. If you want to host multiple pages on your GitHub Account check the next section.

To upload your build files you can either use Git or simply drag and drop the files under build\web into your repository.

If you are using Git, I would suggest you to create an empty folder in your Computer where you would keep the build files of the application. It is not recommended to use Git directly on the build\web\ as the folder gets deleted when flutter clean is used.

In your empty folder run the following commands:

git init
git remote add origin https://github.com/{yourusername}/{yourusername}.github.io
git pull origin

Then paste all the files under build\web\ and run the following commands:

git add .
git commit -m "Initial Commit"
git push -u origin main

Now your build files have been uploaded to GitHub and your web page is hosted in GitHub Pages, to checkout your page simply go to the link:

{yourusername}.github.io

My GitHub Page, link looks like this amannegi.github.io.

Host Multiple Flutter Web Projects onto GitHub Pages

If you want to deploy multiple Flutter Web Projects, we need to follow one more step. Let’s say you have app A and app B, which you want to upload on GitHub pages. Note that your base GitHub Pages URL is:

{yourusername}.github.io

What we want is that we can access the app A like this:

{yourusername}.github.io/A

And similarly for app B:

{yourusername}.github.io/B

To do this we will simply create two folders in the repository and insert the outputs from the builds respectively. However before copying the builds just ensure to change this one thing in the index.html present under \build\web\index.html .

<base href="/A/">

// Similarly for app B

<base href="/B/">

Like this:

One of my sample project uploaded on GitHub Pages, at custom file location named copyable is:

You can check it’s index.html for reference here.

Conclusion

It is commonly advisable to keep your home page in the main directory and the other projects under their respective folders. You can check my GitHub Pages profile to get an idea. All my available links under GitHub pages are:

• amannegi.github.io –> My Portfolio website
• amannegi.github.io/copyable –> A Sample project I am working on

All the files with blue arrow are the build files of my Portfolio Web Application, while the Copyable Folder contains another application hosted on GitHub Pages.

Now, I hope you can easily upload your projects to GitHub Pages, looking forward to what great applications you host using GitHub pages. If you are new to Flutter, check my post on how to install flutter on windows?

Following you must check these posts:

• Testing in Flutter
• Null Safety in Dart, Flutter Essentials
• GetX in Flutter
• Streams in Flutter, Simplified
• App Lifecycle in Flutter