Hello guys, in this post I will show you how to deploy your Flutter Web App on Firebase.
In this tutorial I’m assuming you have installed firebase-tools and you have created firebase project on firebase console.
Before diving into the process, Let’s talk about some topics in flutter web deployment.
Minification is handled for you when you create a release build.
A debug build of a web app is not minified and tree shaking has not been performed.
A profile build is not minified and tree shaking has been performed.
A release build is both minified and tree shaking has been performed.
By default, the
flutter build and
flutter run commands use the
auto choice for the web renderer. This means that your app runs with the HTML renderer on mobile browsers and CanvasKit on desktop browsers. This is Flutter recommended combination to optimize for the characteristics of each platform. You can also define the renderer when building by using
--web-renderer option with
flutter build web command. See more about Web Renderers
Building Flutter Project for Release
- Open your terminal and cd to your root of flutter project
- Then run
flutter build webcommand, This generates the app including the assets, and places the files into
- The release build of a simple app has the following structure:
/build/web assets AssetManifest.json FontManifest.json NOTICES fonts MaterialIcons-Regular.ttf <other font files> <image files> index.html main.dart.js main.dart.js.map
firebase initcommand in root of the project
- Choose Hosting: Configure and deploy Firebase Hosting sites option (press space bar to choose) and press Enter
- Now I’m using Use an existing project option you can use Create a new project option if you haven’t created the firebase project yet.
- Now select your newly created project
- Now enter build/web as public directory
- For next question enter Y
- Then it will ask to setup automatic builds and deploys using git, in this tutorial we skip that option by saying N
- It will ask another question, to override the build/web/index.html, say no to it by entering N
- Now firebase has initialized on our project directory, you will see two new files as firebase.json & .firebaserc, it means firebase has initialised, let’s move on
- Now run
firebase deploythis command will deploy our app to firebase, after successful deploy you will see like below.
- Visit your newly hosted web app by going to Hosting URL
- Check my flutter web project hosted on Firebase – Click Here
The project files I’m using in this tutorial can found on GitHub
Watch the video tutorial how i made the landing page using flutter web