This content originally appeared on DEV Community and was authored by Gihan Lakshan
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.
Click here to learn How to Install firebase-tools
Before diving into the process, Let’s talk about some topics in flutter web deployment.
Minification
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.
Web Renderers
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 build/web directory - 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
Initializing Firebase
- Run
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
Watch the short video tutorial on YouTube:
Want to develop this simple landing page using Flutter? Watch my tutorial on YouTube:
This content originally appeared on DEV Community and was authored by Gihan Lakshan
Gihan Lakshan | Sciencx (2021-04-29T05:05:58+00:00) Host Flutter Web App On Firebase Hosting. Retrieved from https://www.scien.cx/2021/04/29/host-flutter-web-app-on-firebase-hosting/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.