Flutter web hosting using Firebase and Netlify

Here’s the topic for today.

“How did I host a flutter web project?”

You can check out the Github repo here. Let’s get started right away.

Flutter basic setup

The first thing you are going to do is to make sure that you have flutter installed in your system. By 2020 September, the flutter web requires the beta version activated. For more info and the latest updates, check out this page here.
But I know that I’m a lazy sloth. Here are the setups.

flutter channel beta
flutter upgrade
flutter config — enable-web

Now, let’s create a project.

flutter create <PROJECT_NAME>

I just named as flutter_study_web. Let’s open the created project from VSCode.
Under explorer, do you see the web folder? Okay, then you are on the right track.

When the basic creation is done, there’s a web folder on the parent root of the project.

Let’s run this to see if it’s working.

flutter run -d chrome

If you see the following, the basic setup is completed.

The default project is a simple counter

Now let’s start hosting. We may look at 2 ways of hosting this project, Firebase, and Netlify.

Firebase setup

First, we need firebase CLI tool. If you have never installed this, please do so by following the steps here.
Also, make sure to log in using the command in the terminal.

firebase login

You have to make a new project. If you already have one, feel free to skip this part. The project creation can be done using firebase CLI but I prefer to do in the web. Why? because I’m a lazy sloth.
Let’s go to firebase console and create a project.

Click on add project to create a project.

For this demo, I just named it as FlutterStudyWeb. There’s nothing much to talk about. the steps are all straight forward and easy enough to understand.
I’m sure that the future me can handle this part.
Once you’ve done, you’ll see something like,

Good! Then go back to the project folder and initialize firebase.

firebase init

If Firebase CLI has been installed correctly, you may see something like,

A warm welcome message from firebase init

Using the space bar, select Hosting, and hit enter to go to the next.
Then it shows a list of options whether you want to use an existing project or create a new one.
Since we already created a new project, let’s select Use an existing project.

Then it shows the list of projects that you have on your account.
Obviously we’ll select what we’ve created just now.

Then it’s asking to set up the deploy directory.
We could actually set up now but let’s just leave it as it is for now. (public)
I want to show the future me how to change the directory.

Then it’s asking to configure as a single-page-app. Let’s type N then go to next. Then it’s done!

To change the deploy directory, search for firebase.json in the parent directory, and change public to build/web.

“public”: “build/web”

Done. Really done!

Firebase hosting

Before hosting the project, we must build the project.

flutter build web

Then it creates/updates the web folder located in the build folder. (Not in the parent folder)
Then, to deploy,

firebase deploy

Then it starts uploading the project.

It provides an URL when it’s done.

Now you may check the URL and see if it works.
Simple, right?

Netlify Hosting

Of course, you need to signup for Netlify. Once you log in, it looks something like,

You see there it says “Drag and drop your site folder here”?
We can simply drag and drop the build/web folder in there.
Again, it’s NOT the web folder in the parent level. It’s build/web.

Then Netlify takes care of the rest.
Simple, right?

Firebase hosting vs Netlify hosting

They are both super easy to set up and maintain. However, for firebase, I find that it sometimes takes time to see the latest update. Usually, it takes an effect within 5 minutes but some other times, it takes half an hour or more.
It’s maybe not the issue with the firebase but could be an issue from the browser. The reason behind is because it sometimes works right away when I clear the browser data. Please note that it’s tested only in Chrome and Safari in OSX, iOS, and Android environments.

In real-life situations, this actually is a big issue. Imagine that you have updated the project but your client never sees the update.

Netlify, on the other hand, never had an issue so far. When it’s updated, I see the updated version throughout all browsers.

I’ll leave the choice to you. You actually can try both and decide.

To read this article in Korean, please click here.