Hosting your Flutter Web with Firebase…..

Flutter is an open-source UI software development kit created by Google. Launched in 2017, it serves as a framework to develop cross-platform applications for Android, IOS, Linux, macOS, and Windows from a single codebase. Flutter is not a programming language but rather a framework on which a programming language is written. Flutter is compiled with and on the Dart Programming Langauge.

Firebase, on the other hand, is a Backend-as-a-Service (BaaS) app development platform that provides hosted backend services such as a real-time database, cloud storage, authentication, crash reporting, machine learning, remote configuration, and hosting for your static files. In other words, firebase serves as a back-end for your application whether mobile or web.

COOL STUFF ABOUT FIREBASE

• Firebase is a real-time database that allows developers to store and sync data in real time across all connected devices. It is a no-SQL database which makes it easier to use.
• It provides a robust authentication system that makes things like sign-in methods; email/password, and Google, and Facebook integrations easier.
• It provides cloud storage which is known as a Firestore Cloud Storage that stores your data in a cloud.
• It can help host your web applications and create custom domains, SSL, and automatic scaling.
• The Firebase crash reporting feature allows developers to track and analyze app crashes in real time, helping them to quickly identify and fix issues
• Firebase includes powerful analytics tools that help developers track user engagement, retention, and monetization.

Let’s get right to business….

I will be breaking this into two sections to aid understanding and to make it easier for you to practice.

The First section — Building a Flutter Web Application;

• We will be building a Flutter Web Application.
• Running it on our chrome browser.
• Conducting a local test to observe how it fits on our local devices by using the system’s address

The Second section — Hosting with Firebase

• Running a CI/CD pipeline for the codes with Firebase.
• Building a custom domain for the web application.

Addendum — Problems I encountered while building my portfolio website.

Having said this, Let’s go!

BUILDING A FLUTTER WEB APPLICATION

To build a flutter web application, you would have to first create a new flutter project. Type in your terminal

flutter create 'name of app'

In this case, let’s call the name of the app “flutter_website”

flutter create flutter_website

Having created your new flutter project, this should be what you see.

Let’s run our first command and display it on how chrome browser. To do that, type in your terminal

flutter run

or alternatively, you can press F5 to run your code on your web browser.

Having done that, this should be what you should see;

Congratulations, you just built your first flutter web project!!

Now, let’s add some beauty to the UI.

This is a screenshot of my portfolio website built with Flutter.

Let’s run some tests on our site

I recall that when I was done building my beta web app, I had a bit of a challenge when I tried serving the web on different mobile platforms. It totally skipped my mind that I was building a web file completely different from all the mobile applications I had worked with. Although it was pixel-perfect on my laptop as soon as I served it on a mobile phone, I had so many errors.

But before I go further, How was I able to serve my web file on different mobile platforms without hosting to an online server?

I used my system's IP address to ensure that all local devices that were connected to the address were able to view and have access to the web file.

To do that, type;

You would have to follow these steps

1. Make sure your phone and your computer are on the same Wi-Fi network.
2. In your Flutter project directory, run

flutter run -d web-server --web-hostname `[your ip address]`

3. To get your IP address, open your terminal and type

ipconfig (Windows)
ifconfig (Linux)
ipconfig getifaddr en1 (Mac)

4. Open a web browser on your phone and type in your computer’s IP address followed by the port number that the Flutter web app is running on. For example, if your IP address is 192.123.10.1980 and the port number is 8080, you would type http://192.168.10.1980:8080 in your phone's web browser.

With the above steps, you should be able to load your flutter web app on your phone’s browser. You can also perform with this method local beta testing with test users to ensure that all the codes are working as expected.

With this, you are almost good to go…Let’s host with Firebase

There are several ways you can host your website with Firebase but I will be showing you the easiest with the use of your terminal.

To do this, run through the following steps

1. Build the project for the web. To do that, run

flutter build web

2. Install the Firebase command-line interface (CLI) by running the command

npm install -g firebase-tools

3. If you type this command and you get an error ‘unsupported engine’, it means that you might have to install a newer version of Node Js. You can do this by downloading the latest version from the official Node.js website (https://nodejs.org/en/download/) and installing it on your machine.

4. Once the Firebase CLI is installed, run the following command to log in to your Firebase account:

firebase login

After this is done, you would see in your terminal, a redirect link to confirm your firebase account.

5. In your project directory, run the following command to initialize Firebase Hosting:

firebase init hosting

This will prompt you to select your Firebase project and configure your hosting settings. You can either select an existing project or create a new project. Just follow the prompts to set up your hosting configuration.

6. You might have a prompted message if you would want to use a git workflow with your hosted firebase app to create a CI/CD. That is, every time, you make an update to your git file, it automatically syncs with your firebase web app. I won’t be writing on this today.

7. After you’ve completed the initialization, you can deploy your website to Firebase Hosting by running the following command:

firebase deploy --only hosting

8. Or before hosting, you can create a preview channel to allow your beta testers to test your web app before it’s officially released.

firebase hosting:channel:deploy <channel-name>

The channel name will be the name you want to give to your flutter web.

NOTE: The preview channels expire after 7 days by default. You can extend the expiration time by adding the --expires <time> flag to the firebase hosting:channel:deploy command, where <time> is the number of seconds until expiration? For example, to set the expiration time to 30 days, you would use the following command:

firebase hosting:channel:deploy <channel-name> --expires 2592000

9. After deploying your flutter web app to firebase, if you click it and it takes you to the firebase site, you would have to go to the firebase.json file created automatically when you ran the firebase lines in your terminal and change it to the following

{
  "hosting": {
    "public": "build/web",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

This is to set up a default document for your Firebase Hosting configuration.

10. You can finally deploy it by;

firebase deploy

You would be given a URL that ends with “.web.app” or “.firebaseapp.com”

CREATING A CUSTOM DOMAIN

If you are not comfortable with the URL given by firebase(In my case, I was), Firebase allows the free option for you to create your custom domain. To do that, you can follow these steps

• You’ll need to purchase a custom domain name from a domain registrar like Namecheap, GoDaddy, or Google Domains. Make sure you choose a domain name that’s available and that you want to use for your Firebase Hosting site.
• Once you’ve purchased your custom domain, go to your Firebase console and select your project. From there, click on the Hosting option in the left menu.
• Under the “Custom domains” section, click the “Add custom domain” button.
• Enter your custom domain name in the “Domain name” field, and click “Continue”.
• Firebase Hosting will then verify that you own the domain by providing you with a TXT record to add to your domain’s DNS settings. You’ll need to go to your domain registrar’s website and add this TXT record to your DNS settings.
• Once the DNS settings have propagated, Firebase Hosting will verify that you own the domain and you’ll be able to use it to access your Firebase Hosting site.
• Finally, you’ll need to update your domain’s DNS settings to point to Firebase Hosting. Firebase Hosting will provide you with the necessary A and CNAME records to add to your DNS settings. You’ll need to go to your domain registrar’s website and add these records to your DNS settings.

Once you’ve completed these steps, your custom domain should be connected to your Firebase Hosting site and you should be able to access your site using your custom domain. Keep in mind that it may take up to 24–48 hours for DNS changes to fully propagate across the internet.

CREATING A CI/CD PIPELINE WITH FIREBASE FOR YOUR FLUTTER WEB

I thought about the fact that it would be much more beneficial if I write this as a new article to ensure ease and understanding.

So……with these points, you should be able to work with flutter web and host it without using HTML, CSS, JAVASCRIPT, or even BOOTSTRAP.

Here is a demo I worked with while deciding to play around with this

portfolio_website

I hope you had a great time.

My name is Aderibigbe Jesutoni, an aspiring Google Software Engineer