1. Install Firebase CLI
First, you need to install the Firebase Command Line Interface (CLI) to interact with Firebase from the terminal.
-
If you have Node.js (Make Sure if you have none you can downloat it from their official website) installed, run this command in your terminal:
npm install -g firebase-tools
-
After installation, verify that Firebase CLI is installed by running:
firebase --version
if no problem encountered, We are ready to go on to the next step
2. Create a Firebase Project
- If you don't already have a Firebase project, create one in the Firebase Console. You’ll need this project to host your Flutter app.
Go to this link and login
Go to Console
Click Create Project
I named it flutter test deploy
**
Go to Hosting Tab**
Just Click continue to console
and here we have site, If you click the link:
Site not found cause we did not yet deploy our flutter app
Just Follow the instruction and we will proceed to the next step
3. Log in to Firebase
-
Log in to your Firebase account by running in your cmd:
firebase login
-
Follow the instructions to authenticate your Google account.
Type Y . Then it will automatically direct to the browser, if not just copy the link and paste it to your browser. Choose your account where your project created in #2
If successfully
4.Firebase CLI provides web framework support. To enable it, call the following:
firebase experiments:enable webframeworks
4. Set Up Your Flutter Web App
-
Ensure your Flutter app is ready for web deployment by switching to the
web
platform:flutter config --enable-web
Make sure the project directory is in your flutter project
-
Build your Flutter web app:
flutter build web
This will generate a
build/web/
directory that contains the compiled files for your web app. -
again this is from bash but it the directory of my flutter project
as you can it generates a build folder on your Flutter app. Every time we change or modify our app, if we deploy for the next version we need to
flutter build
. to rebuild your changes and ready for deployment
5. Initialize Firebase Hosting
-
Navigate to your Flutter project directory in the terminal, and then initialize Firebase Hosting:
firebase init hosting
-
When prompted:
-
Select your Firebase project.
Clieck Enter
I choose
flutter-test-deploy
project.type y and enter
-
Choose Asia if you are in Asia. Ask me why ?
type n , as of now
as you can see firebase.json and .firebaserc was generated
6. Deploy to Firebase Hosting
-
Deploy your Flutter web app by running:
firebase deploy
-
After deployment, Firebase will give you a URL where your app is hosted.
7. Access Your App
- Once the deployment is done, Firebase CLI will show the URL where your app is live. You can now access your Flutter app on Firebase Hosting.
HERE IS OUR OUTPUT:
Flutter Demo (flutter-test-deploy.web.app)
if you have question , you can message me via LinkedIn,