Firebase Hosting — Flutter 💛💙
Well, it’s always fun to create a web app using Flutter. But how will you show your web app to others without hosting it? Let’s see how you can host your flutter web app using Firebase Hosting 🥳
Firebase is one of the most convenient backend tools for Flutter. Flutter + Firebase is actually a fantastic combination because of the services provided and easy integration. Feel free to check out my other articles on Firebase for its other features.
Firebase Hosting allows us to host our web app, not just Flutter Web App, but any website that you have created in a very easy, simple and completely free way! Benefits of using Firebase Hosting:
- Deliver web content fast
With Firebase Hosting, you can deploy a single-page web app, a mobile app landing page, or a progressive web app without all the hassle.
- SSD-backed hosting, around the globe
No matter where a user is, content is delivered fast. Files deployed to Firebase Hosting are cached on SSDs at CDN edge servers around the world.
- Free SSL certificates for custom domains
Firebase Hosting automatically provisions and configures an SSL certificate for each site deployed. Connect a custom domain with painless verification.
- Deploy with one command
Deploying your app from a local directory to the web only takes one command. See deployment history and roll back to a previous version from the Firebase console.
- Preview changes before going live
Channels allow you to preview updates of your site. Allow team members to view progress easily and give feedback, do code reviews, and test.
Now, let’s see how you can host your Flutter Web App using Firebase!
Step 0: Create a Firebase Project
The pre-requisite step is to create a Firebase project by going to Firebase Console and registering your app into it. In this article, we assume that you have already done that 😉
Step 1: Install firebase-tools CLI
The firebase-tools CLI can be installed using
npm . So before moving forward, you have to install npm into your system if you don’t have one already installed. You can install npm by referring to the following:
Or you can download it directly from node.js website!
Once done, you can run the following command to install
npm install -g firebase-tools
Step 2: Initialize your project
The next step is to initialize your project. To do that, you have to log in to firebase from your terminal:
Once logged in, you have to initialize your project!
When you run the above command, you will get an output as follows:
Now, use the arrow keys to reach
Hosting and then click the spacebar when you reach
Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys and finally, click enter!
After that, it will ask to select a project. Feel free to choose your suitable options.
Once the project is created/selected, the CLI will ask,
What do you want to use as your public directory? In this, you can add
build/web because this is the location where our flutter web app build will be available.
Next, CLI asks
Configure as a single-page app (rewrite all urls to /index.html)? feel free to enter
Next, CLI asks
Set up automatic builds and deploys with GitHub? (y/N) , feel free to choose your suitable answer.
And that’s it. Firebase Hosting Initialization is completed 🥳
Step 3: Build your Flutter Web App
The next step is to build your Flutter Web app. You just need to run
flutter build web and the web app will be built and stored in
Step 4: Deploy your web app
To deploy the web app that we created in Step 3, you just need to run
firebase deploy !
And that’s it. You have deployed your web app to firebase hosting now 🥳
Don’t stop, until you are breathing!💙
- Abhishek Doshi