Firebase console > Create project
Terminal > Update npm
npm install -g npm
Terminal > install Firebase CLI (run at the project folder)
npm install -g firebase-tools
Terminal > Firebase login
firebase login
Terminal > Firebase init
firebase init
Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices.
Hosting: Configure and deploy Firebase Hosting sites
Select a default Firebase project for this directory:
my-flutter-app-com (My Flutter App)
What do you want to use as your public directory?
build/web
Configure as a single-page app (rewrite all urls to /index.html)?
No
File build/web/index.html already exists. Overwrite?
No
Terminal > empty "_project_url_/build/web" directory (only required once to remove files like 404.html)
rm -rfv build/web
-r > recursive
-f > force
-v > verbose
*note: the command above will delete "web" folder, but there is no issue as the next command "flutter build web" will create the "web" directory again
Terminal > Flutter build web
flutter build web
Terminal > Firebase deploy
firebase deploy
Hosting URL: https://my-flutter-app-com.web.app
Firebase hosting > Add custom domain
copy A records
Domains.google > domain: myflutterapp.com > Custom resource records
subdomain: demo.myflutterapp.com
type: A
IPs: 151.101.65.195 | 151.101.65.195 (add both with at the same entry)
Note: SSL Certificate is provided by firebaseapp.com
main.dart.js will be cached by default and therefore users will not be able to see Flutter Web application updates.
In order to solve this issue, 3 actions need to be done:
1) index.html > main.dart.js > Should contain a version. This number need to be updated every time the app is deployed in the server. (1 > modify the number, 2 > run 'flutter build web', 3> 'firebase deploy'
<script src="main.dart.js?version=65" type="application/javascript"></script>
2) index.html > service worker section > comment this to avoid the service working caching the main.dart.js file
<!-- TODO: this has been commented out to avoid caching. PWA is not available now <script> if ('serviceWorker' in navigator) { window.addEventListener('load', function () { navigator.serviceWorker.register('flutter_service_worker.js'); }); } </script> -->3) firebase.json > mark all files (**) as a no-cache for the Cache-Control header
{ "hosting": { "public": "build/web", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ], "headers": [ { "source": "**", "headers": [ { "key": "Cache-Control", "value": "no-cache" } ] } ] }}Resources
Steps:
1) install https://pub.dev/packages/url_strategy (check conditional import packages)
2) add <base href="/"> to index.html
3) call the function setPathUrlStrategy before running the app
import 'package:url_strategy/url_strategy.dart';
void main() {
// Here we set the URL strategy for our web app.
// It is safe to call this function when running on mobile or desktop as well.
setPathUrlStrategy();
runApp(MyApp());
}
Docs
https://stackoverflow.com/questions/59870357/how-to-remove-hash-from-url-in-flutter-web