Firebase Hosting has a nice feature for auto initialising your hosted web app by inserting
<body>
<!-- Previously loaded Firebase SDKs -->
<!-- Initialize Firebase -->
<script src="/__/firebase/init.js"></script>
</body>
See https://firebase.google.com/docs/web/setup . This allows me to deploy test/dev/staging/production Firebase project instances without updating the Firebase config.
What I’d like to do is add this as Webpack import with node_modules imports for Firebase SDKs. I’m actually using Quasar Framework which can be configured to use Webpack rules.
I’ve had a few attempts using import ‘/__/firebase/init.js’ but Webpack is still complaining that it can’t find this dependency so I think it needs it as an external dependency.
Related
I want to deploy my Blazor project with Firebase hosting. I have tried a few times to deploy but have the same erorr Firebase Hosting Setup Complete. Deploy Blazor project
firebase login
firebase init
What do you want to use as your public directory? public
Configure as a single-page app (rewrite all urls to /index.html)? No
Set up automatic builds and deploys with GitHub? No
File public/index.html already exists. Overwrite? No
Skipping write of public/index.html
firebase deploy
First of all, you can deploy to firebase hosting only client side app. So your app must be Blazor WebAssembly single-page app. Moreover you are not overwriting index.html so you will see the default firebase file (you can check this). So you have to overwrite default index.html with yours.
The problem is how to set up your Flutter environment so you can target separate firebase instances (say for dev, prod, staging, ...)
In this example, I have three firebase instances (aka "firebase projects") called dev, staging, and prod.
Using This Solution
iOS and Android
For iOS and Android, to target these firebase instances I use Flutter flavors:
> flutter run --flavor dev
> flutter run --flavor staging
> flutter run --flavor prod
Web (Local web hosting server)
For the Web, to target these firebase instances I use firebase deploy targets:
> firebase use dev
> flutter build web
> firebase serve
> firebase use staging
> flutter build web
> firebase serve
> firebase use prod
> flutter build web
> firebase serve
CTL-C to stop the local web server
Web (Firebase web hosting server)
For the Web, to target these firebase instances I use firebase deploy targets:
> firebase use dev
> flutter build web
> firebase deploy
> firebase use staging
> flutter build web
> firebase deploy
> firebase use prod
> flutter build web
> firebase deploy
Setting Things Up
Assumptions
You have already set up your Firebase instances and are comfortable navigating around the Firebase Console.
You have set up your firebase public build target folder to build/web for web hosting.
Setting Up Flutter Flavors for iOS and Android
See the following for implementation of Flutter Flavors:
Build flavors in Flutter (Android and iOS) with different Firebase projects per flavor As software platforms often change, if you run into problems with these instructions, please look at the comments on the article. Often readers have provided very useful solutions to new and common problems.
Setting Up Deploy Targets for the Web
Configuring Your Flutter Project for the Web
Flutter for the Web is now on the Flutter stable channel. Make sure you have the current version of Flutter:
> flutter channel stable
> flutter upgrade
Configure the web folder in your project:
> flutter config --enable-web
> flutter create .
Check the that the Web is configured to Flutter:
> flutter doctor
[✓] Flutter: is fully installed. (Channel stable, 1.27.0, on macOS 11.2.1 20D74 darwin-x64, locale en)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.1)
[✓] IntelliJ IDEA Ultimate Edition (version 2020.3.2)
[✓] Connected device (3 available)
• No issues found!
Also check the devices:
> flutter devices
1 connected device:
Chrome (web) • chrome • web-javascript • Google Chrome 88.0.4324.150
Configuring the Firebase Deploy Targets
List the firebase projects you have access to when you entered > firebase login.
> firebase projects:list
You can assign a project alias (in my case, dev, staging, and prod) to each firebase instance by entering:
> firebase use --add
? Which project do you want to add?
my-great-app
my-great-app-staging
my-great-app-development
It will ask you which firebase instance you want to add an alias for: Use the arrow keys to highlight your selection then press Enter to select it.
? Which project do you want to add? my-great-app
? What alias do you want to use for this project? (e.g. staging) prod
In this case, I gave the alias prod by the firebase instance my-great-app.
To see which firebase instances you can switch between using firebase use just enter:
> firebase use
Adding Firebase Config details to your project
Some StackOverflow answers tell you to put your Firebase config into your projects web/index.html file. This isn't necessary. Rather than doing that, you just switch between firebase configs using firebase use prod, firebase use staging, firebase use prod from the Terminal command line to make each instance of firebase "active". When you do flutter build web, the build process automatically picks up the the correct firebase config from the active firebase instance.
How does this magic happen? Click here for the gory details on Adding SDKs Using Reserved URLs.
In each of your firebase instances, ensure that you have a web app </> for each instance.
Set the SDK Snippet to 'Automatic'
Copy the code snippet from one of your firebase instances and add it to your web/index.html file. Your <body> tag should look something like this, depending on which firebase SDKs you are using in your Flutter app:
<body>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="/__/firebase/8.2.10/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="/__/firebase/8.2.10/firebase-analytics.js"></script>
<script src="/__/firebase/8.2.10/firebase-auth.js"></script>
<script src="/__/firebase/8.2.10/firebase-firestore.js"></script>
<script src="/__/firebase/8.2.10/firebase-storage.js"></script>
<!-- Initialize Firebase -->
<script src="/__/firebase/init.js"></script>
<!-- This script installs service_worker.js to provide PWA functionality to
application. For more information, see:
https://developers.google.com/web/fundamentals/primers/service-workers -->
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('flutter_service_worker.js?v=1367769473');
});
}
</script>
<script src="main.dart.js" type='application/javascript"></script>
Dynamically Place Firebase Config Files Depending On Target
This github repository contains a link to setup instructions, and scripts which will automatically place your iOS and Android Firebase config files into the appropriate places on demand, depending on which project you want to deploy to.
Repo: https://github.com/deimantasa/flutter-firebase-environment-generator-advanced
Guide: https://aurimas-deimantas.medium.com/cicd-p2-multiple-firebase-environments-in-flutter-deb919cfac2b
While developing a flutter web app, I was using the dev firebase project. Now, when the development is finished it is required to use the production firebase project for production. How can this be done other then simply swapping the firebase dev configuration from index.html with the prod firebase config before building the app.
I tried this tutorial Dynamic HTML elements but I couldn't adapt it to my solution.
I thought that the configuration could be added as a child but an error was thrown:
Expected a value of type 'Element', but got one of type 'FirebaseOptions'
How do I handle my Firebase API key in a production application?
I have the following component:
<firebase-app
id="firebase"
auth-domain="<domain>"
database-url="<url>"
api-key="<api_key>">
</firebase-app>
I'm using the Polymer Starter Kit with Firebase hosting. Is there somewhere to designate my API key as an environment variable and pass the variable to the application when I start the app?
I use polymer build to build my app, then firebase deploy to push my app to Firebase.
I want to try the demo for polymerfire in firebase. To get it run locally I followed these steps. But what exact steps do I need to do to get it to run in firebase?
I figured firebase init and firebase deploy should be run but the browser only displays errors in the console. Must the polymer project be build in a certain way and what should the firebase "public" folder be?
All files from public folder will be deployed to your Firebase static web hosting, so you can access them though your Firebase hosting address like https://projectname-5gek53.firebaseapp.com/. This allows you to upload your web app.
You build your polymer app (I guess you need to run polymer build). You drag all files generated as production build to your public folder. Next, you run firebase deploy and after deployment process your app will be accessible from your hosting address as I mentioned above.
Edit: Polymerfire demo is actually not that simple to export, but I found a really nice tutorial step-by-step from Google Codelabs here is a link Build a Progressive Web App with Firebase, Polymerfire and Polymer Components
I just installed a new version of the polymer cli and Firebase cli. When I do a Polymer build, no build/bundled or build/unbundled is created.
I do get a build/default, which I can run with a firebase serve and a firebase deploy. So something has changed recently. just fyi