How to deploy your flutter project to firebase ?

Building flutter project is easy, By simply opening your favourite IDE and create new project. But deploying same project was never easy.

For instance, android require developer account and same for IOS. Deploying web project required to purchase domain, setup server,hosting etc.

Hello guys, This is CodingWithTashi and In this shitty post we will see how to deploy your awesome flutter web project to firebase with few clicks.

Photo by Campaign Creators on Unsplash

TL,DR

Deployed flutter starter project to this url: https://flutter-starter-web-app.web.app

Lets get start :

To make our post clean, lets devide our content.

1. Creating flutter project
2. Creating firebase project and connecting to flutter
3. Hosting your project to firebase

1. Creating flutter project

Creating new flutter project is easy and If you are reading this post then probably you might already have project done. Now Lets move to next point.

2. Connecting flutter with firebase

• Head over https://firebase.google.com/ and if not login then login with your gmail account and click on Go to console. link on top right corner

• Click on “add project” to create new project

• Give your project name, in this case I am using ‘flutter-starter-web-app’ as project name as well as ‘flutter-starter-web-app’(mark with circle) as our domain.

• Click on continue and below you can see analytic option you can either disable or enable it.

• After that you can click on Create Project to create your firebase project

• Once project is created you can see the below interface.

• Click on web icon(marked with circle) and then you can have below option

• Add project nick name and continue by clicking on Register app.

Alright at this time you can ignore rest of the option. Now you will need to install firebase.

To run this command(npm install firebase) you need to install node if not install in your machine. All right, You are almost there.

3. Hosting your project to firebase

• Now to host your application to firebase. Open your project in your favourite IDE and open cmd. In my case

• Make sure you have node install already, you can also check by node — version

If it is already install the run “npm install firebase”

• Alright now firebase tool is installed, let just generate our final flutter web build by running “flutter build web — release” (If you get any error then first enable web by running flutter config --enable-web)

• So in my case build was successful with no error.

Now that firebase and flutter is ready, lets write some cammand to deploy our app.

1. Run “firebase init” (It will ask you for confirmation, click Y on keyboard)

You may also need to login with firebase if not login before from command promt.(for that run “firebase login” and select your email in browser) . Once logged in you can come back to command promt and continue

2. Choose one from the option below, to select option press ”space” and then predd “enter” to continue.

3. Once you choose Hosting, press enter to continue, you will get below option.

4. Since we already created firebase project before, just select the first option and continue. After that you should able to see list of project that you have created before.

5. As you can see our project in the list, select and continue

6. You will be ask to add public path. since our generated web build is in build/web folder. You can mention as build/web

7. It will ask you to configure as single page app. You can press Y and continue.

It will also asked

• “Set up automatic builds and deploys with GitHub? (y/N)”
• “File build/web/index.html already exists. Overwrite? (y/N)”

For now, You can ignore this type N.

At this point of time, our project is already initailized and ready to deploy.

Now run

firebase deploy

”Ahahh” Your firebase project is deployed to firebase and ready to use from any where around the world with zero cost.

Here is the hosted project url https://flutter-starter-web-app.web.app

That all,Thanks guys, I hope you like this shitty blog. please make sure to give clap 👏 and leave some engagement. let me know in comment section if you face any issue.

Checkout more blog from CodingWithTashi. Connect me on GitHub or Instagram or YouTube.