Firebase Hosting for Flutter Web Projects in 4 easy steps

Mahtab Tadayon
May 6 · 7 min read
Image for post
Image for post

I want to deploy my current project, which is a Save Recipe App to Firebase Hosting. The purpose of this application should be to save all my recipes, that I find on the internet. Whenever I cook with a recipe from the internet, I lose it always right after I finished dinner. The app helps me to prevent the loss of my future recipes. I’m still working on my project, but meanwhile, I wanted to create also a web project out of it. So I decided to create a Flutter Web Project and deploy that to Firebase Hosting. If you want to publish it under GitHub Pages, we have also an article for that.

Firebase Hosting provides fast and secure hosting for your web app, static and dynamic content, and microservices.

In this article, I would like to share my experience with you. So let’s start.

Prepare the Flutter web project

Flutter Build Modes

  • Debug mode: During development and to use hot reload.
  • Profile mode: To analyze the performance
  • Release mode: To release the app

When we create a release build for our app, the bundle is minified, and tree shaking has been performed. So let’s start and build the app in release mode.

Create a release bundle

flutter build web — release

The release build of my save_recipe app looks like the following:

Image for post
Image for post

After we finished the setup of our Flutter project, it’s now time to set up our Firebase Hosting.

Firebase Hosting Setup

1. Create a Firebase project

To create a new project in Firebase, we will go to the Firebase console’s project overview and click on Add Project. Next, we give the project a name and click on continue. Here we can choose if we want Google Analytics for our project or not, and after that, we click on create project.

Now with the project in place, we are set and ready to take the next step. We have to install the Firebase CLI into our project.

2. Install the Firebase CLI

npm install -g firebase-tools

After executing this command I get directly an error message:

npm WARN checkPermissions Missing write access to /Users/<<username>>/.npm-global/lib/node_modules/firebase-tools/node_modules/string_decoder
npm WARN checkPermissions Missing write access to /Users/<<username>>/.npm-global/lib/node_modules/firebase-tools/node_modules/through2/node_modules
npm ERR! code EACCES
npm ERR! syscall access
npm ERR! path /Users/<<username>>/.npm-global/lib/node_modules/firebase-tools/node_modules/archiver-utils/node_modules/readable-stream
npm ERR! errno -13

The error message describes that I do not have the right permissions on the npm folder. To solve this problem I had to run the following command and enter my password:

sudo chown -R 501:20 “/Users/<<username>>/.npm”

And last but not least we should fix the permission problem with the sudo command. After that, I should execute again the command to install the Firebase CLI again.

sudo npm install -g firebase-tools

3. Initialize our project

firebase init

With this command, we will set up our project directory and some Firebase features. As soon as I execute the command, I get the following error:

zsh: command not found: firebase

After some researches, I figure out a solution from durul in GitHub, how to fix it. As the global variable for the zsh is not correctly set, we should set it up at first. To solve this issue, I run this command.

alias firebase=”`npm config get prefix`/bin/firebase”

After that, we will execute the previous command again and I get a promising answer now.

Image for post
Image for post

Project Setup

  1. Which Firebase CLI feature do you want to set up for your folder? Hosting
  2. Select your default firebase project, if you have. In my case, I will select save-recipes project and hit enter.
  3. What do you want to use as your public directory? build/web
    The answer to this question should be the path to our index.html file in our web bundle.
  4. Configure as a single-page app? y
  5. File build/web/index.html already exists. Overwrite? N
Image for post
Image for post

Now our Firebase initialization is done. If we have a look at our project, we can see that Firebase creates two new files in the root of our local project.

Image for post
Image for post

The .firebaserc file stores our project aliases.

And the firebase.json contains the list of our project configuration. If you like to learn more about how to configure customized hosting behaviour, have a look in the Firebase documentation.

4. Deploy our project

firebase deploy

If everything is going well, we should get the URL to our deployed website.

Image for post
Image for post

Hurray!! Here we go, this is the URL to my save-recipes project:
https://save-recipes.web.app
Now if we open the link to our website, we should see our web project, which is in our index.html file.

If we open the URL and see the following screen in our browser, it means that we didn’t set the right public directory for our project, which was the third question by the project setup.

Image for post
Image for post

To solve this problem, we should just adjust the “public” directory in the firebase.json file to the right path. The directory should point directly to the index.html folder in our web bundle in our local project.

After we change this directory, we should save it and deploy our project again. That means execute again our last command in terminal.

firebase deploy

Now it should work everything as desired, and we should be good to go.

Conclusion

I highly recommend you to give it a try and let me know in the comments about your experiences.

Thanks for reading and happy coding! 🎉

Here you can have a look at the deployed Flutter Web Project on Firebase. If you like to know more about my source code, check out below my GitHub.

Flutter Community

Articles and Stories from the Flutter Community

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store