Flutter Tutorial - Firebase Hosting - Deploy Flutter Web App

[@HeyFlutter]

This might help you :) 👉 12 Week Flutter Training from Newbie to Expert: heyflutter.com Source Code: github.com/JohannesMilke/flutter_firebase_hosting NPM Download Website: nodejs.org/en/ Setup Firebase Functions Tutorial: kzbin.info/www/bejne/bYbGfmmPZpd_e80 Firebase CRUD Tutorial: kzbin.info/www/bejne/e4eVdayogLSkqLs Firestore Pagination Tutorial: kzbin.info/www/bejne/f6PYpq2GrsmDsJY Chat App With Firebase: kzbin.info/www/bejne/rXmslH16hsd1fNU Riverpod Tutorial: kzbin.info/www/bejne/bnmWk6qurdGUars Social App UI: kzbin.info/www/bejne/hqengJqFmbqaobc Todo App From Scratch Tutorial: kzbin.info/www/bejne/oX-cipmaacuoZpY Shop UI From Scratch Tutorial: kzbin.info/www/bejne/eYK9o2B9jcqSlbs Chat App With Firebase Tutorial: kzbin.info/www/bejne/rXmslH16hsd1fNU Movie App UI Tutorial: kzbin.info/www/bejne/l33am55jfJeEn80 Onboarding UI Screen Tutorial: kzbin.info/www/bejne/eYLPcmWmYpKie8k

[@Mark-mo4bo]

You just saved a week of my life with my app crashing on its ass because of embedding js version 9 of the sdks. Showing how to find the right flutter-compatible versions in your video embedded in the docs page was so simple but really important! Thank you for all your efforts my friend!

[@aytunch]

This is seriously awesome. Thanks man, you are a GEM for the Flutter community and also humanity :D

[@edergomes5952]

Man, your channel is fantastic. Your teaching is incredible. I don't know how many times you saved me anymore. You've already helped a lot of people on this planet, man. Congratulations!!! 🙂

[@HeyFlutter]

Glad I could be of help, Thank you @edergomes5952! 😊

[@brightthebackpack]

you have been helpign me ever since i've been deploying my project. you have officially earned a subb from the backpack

[@foreachbyte8163]

Thank you sir. Been scratching my head the whole day, until I found your solution.

[@patricknasc]

I definitely love your content! Very straightfoward and it simply works! I wish you success!

[@zk__27]

Went through quite a few challenges, but thank you. It worked!

[@officialismailshah]

Thank you so much for this amazing content johannes, hope you will become GDE soon, and if you are a GDE than you deserve the title....

[@KashifAli-Hollow]

man you are so underrated. Your videos are the best. Thanks for helping and teaching us

[@bijayaadhikari442]

Brother, next make a full page website/portfolio with flutter web. And yes you always rocks.

[@althafaralijaffarali1803]

Awesome bro 🔥. Keep rocking. Could you please make an entire mini Web app with domain name and etc...that we can also view as a subscriber/client. Very excited 🤩to view your app,which we can even build by following your videos.

[@randomgamesintl]

Sehr gutes & hilfreiches Video. Hut ab! Das Video hat mir sehr geholfen . :-)

[@zechsd1756]

Just in case someone ran into a similiar problem. For some reason the automatically generated gitignore file from github can include the build folder. For that reason the automatic deploy may not work. To fix this you just have to remove the build folder from the gitignore file.

[@M37Shadow]

thanks a lot man almost gave up on website apps but u brought my hope back

[@odedgilad9761]

thank you very much, i saw somw other video but you the only one that acsually helped me

[@HeyFlutter]

Glad it was helpful, @odedgilad9761 😀

[@bogyayb]

Thanks man, yout just saved my semester! I have 1 small problem, my favicon is not there in the browser, not in local and not after deployment, but the basic flutter logo favicon is there in his place. Help me man! 🙏🏼

[@ankit_apk]

Thank you Johannes. Also make a video on how to update an existing project.

[@ankit_apk]

@@HeyFlutter 😀 good to know that.

[@danieldickson4656]

Came back to this because I missed setting "Build/web" directory. Edit: thanks a lot Johannes

[@ezeaguprincewill7005]

Thanks alot for this. I will be needing this pretty soon.

[@StevenLudmon]

Another great video, thanks again!

[@HeyFlutter]

Thanks, @StevenLudmon! 🙂

[@WhyMe432532]

When I need to learn anything flutter related I go to KZbin and type: "Johannes Milke ..." and fill out what I want to learn about.

[@HeyFlutter]

Hey, @WhyMe432532 🙂 it's really great to know

[@TheEkkas]

Thanks, got stuck and this made it clear/easy.

[@bv-9157]

it works finally thank you man ! i really appreciated it

[@DDOCTORGaming]

If I created A flutter application with its database being firebase/ firestore can i still do this? since it's a flutter mobile application and not a web application? I basically need users to be able to access certain app screens (to modify the database fields such as add/delete and remove documents from collections) on a PC instead of the mobile app only. Thanks. Looking forward to your reply.

[@DDOCTORGaming]

@@HeyFlutter How do i do that though? cause im a bit confused

[@brightthebackpack]

my website is just a grey screen. hwo to fix?

[@poisonels8023]

Please can you make video on flutter web with Firestore usage from scratch to host?

[@olawoleoyedele4212]

Hello! I just finished deploying my Web app through this tutorial, thanks alot, but I'm unable to load my project manually. Any time I change my code and press hot restart it doesn't reflect in the local Web app.

[@HeyFlutter]

Thank You Olawole Oyedele! Follow this link: stackoverflow.com/questions/65874057/changes-not-reflecting-on-flutter-web-deploy-after-firebase-project-owner-change I hope you will get your answer 🙂

[@janammaharjan2699]

Thank you so much for the Tutorial. Regards Janam

[@janammaharjan2699]

@@HeyFlutter Thank you again

[@LMrc534]

Hi johannes my website work fine in desktop mode but it provides a white screen on mobile mode. Can you help me please 🙏?

[@kriskis9774]

Thank you, Johannes! Your tutorial helped a lot! I faced one issue: when I deployed my web app the image assets that I added to initial project don't show. However, they show when I launch web app locally. Could you please suggest where could the root of this problem lay?

[@kriskis9774]

Thanks a million for your help,Johannes! Will get around to it 🤗

[@HeyFlutter]

Thanks, Kris Kis! 🙂 Make sure that the server from which you load your image allows you to access it, because on Flutter Web & in browsers the CORS mechanism could disallow you to access these resources. All in all, the problem is on the server side, not in your Flutter app! Learn more about it here: flutter.dev/docs/development/platform-integration/web-images#cross-origin-resource-sharing-cors

[@HeroRickyGames]

Very good, you help me a lot!

[@HeyFlutter]

Glad to hear that, Thank you HeroRicky_Games! 😊

[@kamalkishorkumar4278]

It worked thanks for the video

[@JAY-bo7tg]

You are awesome

[@alikarimi01]

Thanks , I have a problem that happened for GitHub and also Firebase hosting that the screen is white and nothing is not shown

[@HeyFlutter]

Thank You Ali Karimi! Follow this link: github.com/flutter/flutter/issues/70558 I hope you will get your answer 🙂

[@swayamshreemohantyvlogs8126]

Just awesome....you save me man... Thanks

[@uditmishra5583]

Thanks very helpful 👍. Can you please make video for web renderer. I also got issue with scrolling in web.

[@Apoorvpandey]

How to fix the CORS issue for flutter web?

[@HeyFlutter]

Thanks Apoorv! :) Learn more about it here: flutter.dev/docs/development/platform-integration/web-images#cross-origin-resource-sharing-cors You need to allow some headers on your server side, so it doesn't have to do anything with Flutter directly. Add these headers on the response of your server for your images / other responses: { "Access-Control-Allow-Origin" : "*", "Access-Control-Allow-Headers", "*", "Access-Control-Allow-Methods", "POST,GET,DELETE,PUT,OPTIONS", } Also check out this article to learn more about security & CORS: mobilejazz.com/blog/which-security-risks-do-cors-imply/

[@mohamedabdelrahman-flutterdev]

This is seriously awesome

[@HeyFlutter]

Thanks, Mohamed Rahman! 🙂

[@mycloudvip]

Hi, one of my project is setup as public as the default path, is there a way to load /build/web/ and leaving the current setup as it is in firebase? I am using this inside the web/index.html

[@HeyFlutter]

Thank you, @mycloudvip! 🙂. Try to provide enough details with your question whenever you face any issue.

[@moustaphakoita4884]

Hi i wanna create an application where people can host there site, so i wanna how i can create it?

[@HeyFlutter]

Thank You Moustapha koita! Follow this link: medium.com/flutter-community/hosting-flutter-web-applications-on-firebase-for-free-with-generous-spark-plan-a87ef2aa8d0d I hope you will get your answer 🙂

[@yazanzaid1465]

Thanks a lot, really useful.

[@dhanniekristanto]

is there any difference if you init the project as SPA or multi page application?

[@templetonmeshack2816]

Hi Johannes. I managed to deploy my website on firebase but the images on my internal asset folder wont show after hosting the website, how do I get around this issue?

[@HeyFlutter]

Thank You Templeton Meshack! Follow this link: stackoverflow.com/questions/58878346/flutter-web-asset-images-not-displaying-when-deployed-to-web-server I hope you will get your answer 🙂

[@andrejvujic]

Hey! Could you do a video on Google Sign In with Firebase on Flutter Web? I have been having some trouble with it. Thank you. Love the videos!

[@andrejvujic]

@@HeyFlutter Thanks for the quick response! I will.

[@HeyFlutter]

Yes, You can do it. Simply watch my video here: Google Sign Tutorial: kzbin.info/www/bejne/pZi6aWaufLZ6isk 1) Also set the SHA1 & SHA256 Like shown in the video. 2) Set your port to 5000 by calling: flutter run -d chrome --web-port 5000. This is the standard port used by firebase.

[@crazyapplication4224]

great video.

[@lanceolana8277]

Hi Johannes! Is this process free?

[@nateg617]

Using this way are API keys hidden by the public? Is it safe to publish a web app using an API key using this method on Firebase Hosting?

[@HeyFlutter]

Thank You Nathaniel Gutelman! Follow this link: firebase.google.com/docs/projects/api-keys I hope you will get your answer 🙂

[@DanielTubul]

AMAZING CONTENT!

[@kumargaurav8459]

I made one app using flutter and firebase. Its content is dynamic. Can dymanic website can be hosted on Firebase hosting?

[@HeyFlutter]

Thank You Kumar Gaurav! Follow this link: flutter.dev/docs/deployment/web I hope you will get your answer 🙂

[@SamBaltimore]

thank you for the tutorial really helpful, why i still getting a blank page even if i run it locally but on iOS emulator runs fine.

[@SamBaltimore]

@@HeyFlutter nothing but maybe i know the problem the app uses geoLocation and firebase. Should i integrate firebase web too as well ?

[@SamBaltimore]

Thanks for your fast answer 🤗

[@SAGskills]

hello bro ,, my admin web app i have deployed by command firebase deploy --only hosting, its work but the images not showing which stored in storage, its admin app when the admin approve ads for publish user upload image and admin approve that ads , but if i deploy by command firebase deploy it throw error " unexpected format rules:

[@SAGskills]

@@HeyFlutter please a video how to set CORS for web flutter app to give access diffrent browser origin

[@HeyFlutter]

Hello, SAG skills! Follow this link: stackoverflow.com/questions/59539777/flutter-unhandled-exception-formatexception-unexpected-character-at-charact, I hope it will solve your problem. Thank You 🙂

[@sharannagarajan4089]

thankss

[@BassiL1sk]

Hello, will this also work on the android apk app if i build the APK to any android phone?

[@HeyFlutter]

Thank you, BassiL1sKClips! 🙂. Yes it will work.

[@dickydarmawan4790]

Thanks

[@welintonceconello7574]

The problem of: Process completed with exit code 1." Just set Channel= Stable

[@HeyFlutter]

Great, Thank you Welinton Ceconello!

[@parkerjones2810]

I keep getting a "missing index.html" error when using the "flutter build web" command. Has anyone else run into this?

[@parkerjones2810]

ahh. looks like i forgot to set up my project to support web initially. for anyone else having this problem .. just go to your console and add web support. with the "flutter config --enable-web" command. then run "flutter create ." Then you should be good to go!

[@malikabdulsamiawan4085]

Thankyou for the such good content could you please help me with this error i deploying hosting Error: Hosting site or target server-id not detected in firebase.json

[@HeyFlutter]

Hello, Malik Abdul Sami Awan! Follow this link: github.com/firebase/firebase-tools/issues/2731, I hope it will solve your problem. Thank You 🙂

[@kdjd6768]

So after I do everything is it okay to no longer have the project file on my device

[@HeyFlutter]

Thank you, Kd Jd! 🙂. No it is necessary.

[@kdjd6768]

@@HeyFlutter is there anyway to no no longer need the files on my device after I compile them

[@kdjd6768]

@@HeyFlutter can you please explain to me why it can't be done

[@omniatayfoor4892]

I am a flutter developer but i haven't worked in web development. I am working on a flutter web app, a wikipedia type website and i will be using firebase for storage. I am wondering if its wise to host it in firebase hosting as opposed to hostinger or any other hosting service. Could you tell me the benefits of each in this case

[@HeyFlutter]

Thank You Omnia Tayfoor! Follow this link: www.quora.com/How-is-Firebase-hosting-different-from-other-hosting-providers I hope you will get your answer 🙂

[@omniatayfoor4892]

@@HeyFlutter Thank you 😄

[@void4904]

I got error "docker: invalid reference format: repository name must be lowercase." in Deploy Firebase Hosting part. please help..🙏

[@HeyFlutter]

Thank you, 리처드 파인만! You could learn more about this issue here: github.com/firebase/firebase-tools/issues/2203

[@muhdtariqali3607]

Hello how can I have adsense or any other advertising third party on my flutter web

[@HeyFlutter]

Thank you, muhd tariq ali! 🙂 flutter haven't announced admob for flutter web you can expect it in 3.0 release

[@poisonels8023]

I have problems to use Firestore on web

[@taufiqhasib9720]

how to remove the hash tag from the website link ?

[@HeyFlutter]

Thank you 😊, taufiq hasib! Check out this solution : stackoverflow.com/a/65709246

[@suhas_joshi]

Give some e-commerce web app examples also

[@suhas_joshi]

Thank you sir because now this days web app so famous thats why I'm requesting you sir 🙏

[@Patrickus23]

Is this working for mobile apps too?

[@Patrickus23]

@@HeyFlutter do you have a tutorial for mobile apps as well?

[@Roman10-6]

how to fix welcon screen issue?

[@HeyFlutter]

Hey, @romanayub 🙂 can you share more details about issue you are facing?

[@Roman10-6]

@@HeyFlutter Thank you dear, I fixed it, But i have some issue with reaposnive screen to all screens (iphones , tablets and disktop), When screens change the designed were mixed , Please share more tutorials about responsive screens

[@truelife9057]

Does this have any cost?

[@truelife9057]

@@HeyFlutter Thank you so much

[@mhmzdev]

Repo is not public I think!

[@peteruase1517]

I love u

[@RaihanKhafidz]

Might I add that in the main.yaml file, it would be best to add this line to get the latest dart sdk: - uses: dart-lang/setup-dart@v1 And also to change channel: 'dev' to channel: 'stable' This will prevent building error during action due to outdated sdk.

[@HeyFlutter]

Great, Thank you Raihan Khafidz!

[@AvtarSingh-mw3ec]

Thank You Sir

[@HeyFlutter]

Glad it was helpful, @AvtarSingh-mw3ec 😀

[@adriancabahug2331]

Some images on my project didnt load when hosted on firebase how to fix this ? The images are on the same folder but not all of them loaded

[@HeyFlutter]

Thank you, Adrian Cabahug! 🙂 make sure to open image link in browser check if it works or not, it maybe some issue with Image link