Deploy Flutterflow Web Projects with Firebase Hosting

‍

‍

Overview

Welcome to our flutterflow tutorial guide on deploying your Flutterflow project on the web using Firebase Hosting. We'll show you the steps and how Firebase Hosting can help. This guide offers a unique way to get your project on the web with Firebase hosting. We'll assist you from start to finish and help to make your project live. By the end of the article, your Flutterflow project will be on web. 

Let's start the journey to get your project online!

‍

Why Choose Firebase Hosting for Flutterflow Projects

Firebase Hosting is a really powerful platform with lots of cool features. It's like a set of tools to help you make a website just how you want it. Services like Cloud Functions, Authentication, Real-time Database, Cloud Firestore, and Cloud Messaging are all included. It's supported by Google, so even if a bunch of people are using your website, it will still be really fast.

The Key difference between Flutterflow web hosting and Firebase web hosting is that while Flutterflow allows only one 'Custom Domain' to your Flutterflow web project whereas Firebase hosting offers the flexibility to include up to 20 domains or subdomains in your web project.

‍

Prerequisites

Before you begin the deployment process, ensure that you should complete all activities mentioned below

• Enable the "Web" option in your Flutterflow Panel. (Settings & Integration -> Platforms)
• Firebase Account: Sign up for a Firebase account and create a new project here.
• Node.js and npm: Install Node.js and npm on your computer from here.
• Firebase CLI: Install firebase tools on your computer from here. After installing Firebase CLI, it's important to verify that it has been installed correctly with the right configurations. To do this, open your command prompt/ terminal and enter the following command. using 'firebase' or 'firebase --version' command. When you run this command, you will receive information related to Firebase or the version of Firebase CLI installed. This confirms that Firebase CLI is successfully installed on your system.

Deploy Flutterflow Project via Flutterflow Panel

Flutterflow web publishing is a tool that helps you to deploy your flutterflow app on a website. It's like taking your app and putting it on the website, so people can use it in a web browser. You can even give your website a domain or sub-domain name to make it easy for others to find and remember. It's a simple way to share your Flutterflow app with more people on the website. Here are the steps:

• Go to "Settings and Integrations."
• Select "Web Publishing."
• Fill in the required information about your project.
• Click on "Publish" and wait for about 5 to 10 minutes.
• Once above steps done then Flutterflow will provide a link for you to view your live website.

Deploy Flutterflow Project in Firebase

Before deploying the flutterflow project, you just need to go to the Flutterflow panel and download the project code. After that, open it in an IDE like Android Studio or VS Code. To download the code, click on the "</>" Developer Menu option and choose the option Download Code.

Note: Run all the commands from your project root directory. Here, Root Directory is the main and starting folder of your project where all other files and folders are stored.

1. Firebase Login:

In this step, we need to log in to Firebase through the terminal. To do that, we run the command "firebase login" on the terminal. If you're already logged in, it will display your Firebase account ID. But if you're not logged in, it will take you to the Firebase login page, where you'll be asked to log in with your Firebase account.   

If you want to log in with a different account, and you're currently logged in with a different one, you can log out first using the command "firebase logout". After that, you can run the "firebase login" command again to authenticate with the new account.

2. Firebase Initialization:

The next step is to initialize the firebase. For initialization run "firebase init" command in your terminal.

When you run this command, Firebase will ask you some questions to set up the initial configuration. These questions are essential as they help Firebase understand your project's requirements and ensure everything is correctly set up for hosting. Just answer the questions based on your needs.

Questions:

Q1. Are you ready to proceed? (Y/N) 

Solution: Y

Q2. Which Firebase features do you want to set up for this directory? 

Solution: Since we are focusing on Firebase Hosting, we need to choose the option called "Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys”. To select this option, simply navigate to it using the arrow keys and press the spacebar to choose it. Then, press the enter key to proceed.

Q3.  Please select an option: 

1. Use an existing project
2. Create a new project
3. Add Firebase to an existing Google Cloud Platform project 
4. Don't set up a default project

Solution: Since you're in the process of deploying your Flutterflow web app, it's assumed that you've already created a Firebase project, so you’ve to choose the "Use an existing project" option.

Q4. Select a default Firebase project for this directory?‍

Solution: List of projects associated with your Firebase account will be displayed. From this list, you need to choose the specific project that you want to deploy as your web app.

Q5. What do you want to use as your public directory? 

Explanation: During Firebase initialization, you will be asked to choose the location where you want to save the files that will be built when the process is complete.

Solution: we should save these files in a separate folder to easily identify them as the build files. Therefore, we'll type "build/web" in the answer. This means that the files will be saved in "web" folder which is inside the "build" folder.

Q6.  Configure as a single-page app (rewrite all URL's to /index.html)?  (Y/N)

Solution: By selecting "Y", you allow Firebase to automatically handle the configuration and setup of URLs for your web app. This helps prevent any potential errors that may arise from manual configurations.

Q7. Set up automatic builds and deploys with GitHub? (Y/N) 

Solution: Press "N" in which you are indicating that you don’t want to implement automatic build and deploy processes for your GitHub repository, this will be the final question.

Once its done, you'll receive a message saying "Firebase initialization" after waiting for 2-3 minutes.

3. Building Files for Web App Using Command

After the Firebase initialization, we have to create the necessary files for our web app using a flutter command. To do this, run "flutter build web" command in the terminal.

Ex: “flutter build web” we use this command to build our web app using Flutter. This command will initiate the process of building your web app, which might take around 5-10 minutes to complete. It's like assembling all the necessary components of your web app and preparing it for deployment.

5. Firebase Deploy:

The last step is to deploy our web app. To do this, simply run the command "firebase deploy" in the terminal of your IDE. Once you run this command successfully, Firebase will take care of the deployment process, and you'll receive a link. This link will allow you to access and showcase your web app to others.

For Ex: 

Project Console: https://xyz/overview

Hosting URL: https://xyz.web.app

You may also refer to the below video for a better understand the steps mentioned above.

6. Access Your Deployed Web App through Firebase:

Once you get to the hosting section, you’ll find that your web app has been successfully deployed. Firebase will give you two web addresses, or URLs, that it creates by Firebase itself. These URLs are like the addresses of your web app, where people can visit it on the internet.

• ‍testing-7443c.web.app
• ‍testing-7443c.firebaseapp.com

Note: If you encounter an issue where your web app works fine when navigating from one page to another, but refreshing the page shows a "Page not found 404" error, you can fix it by adding a simple line of code to your "firebase.json" file.

firebase.json is added automatically generated when you successfully completed the above mentioned steps.

Your auto generated firebase.json will be look like below.

You need to add below mentioned code into firebase.json.

    rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]

Once its done then your firebase.json will look like below.

‍

Conclusion

In this guide, we've shown you how to put your Flutterflow project on the web using Firebase Hosting. Firebase Hosting has many helpful services that work well with your project, making it fast and reliable even when lots of people visit. It's like a big road that keeps things moving smoothly. Flutterflow's hosting feature simplifies the process of publishing your project with ease, thanks to its straightforward steps. The choice between the two methods ultimately depends on your specific use case. Both platforms are robust and offer impressive features.

‍

If you found this blog helpful and want to stay updated with more useful content, we invite you to follow us on our social media platforms. Connect with us on LinkedIn, Dev.to, Twitter, Reddit.

By following us on these platforms, you'll never miss any of our latest blog posts, tips, and tricks related to development and other exciting topics. We appreciate your support, and we look forward to providing you with valuable content in the future.

‍

Thank you for being part of our community!

‍

‍

‍

‍

‍

‍

‍