I have just deployed my flutter app to the Firebase. When I go to the Hosting section on the firebase, I do see domains listed as .web.app and firebaseapp.com. However, when i open any of the links, instead of showing my application It takes me to this page which says -
Welcome Firebase Hosting Setup Complete
You're seeing this because you've successfully setup Firebase Hosting.
Now it's time to go build something extraordinary!
OPEN HOSTING DOCUMENTATION
How can i access my app and not this message which pops up everytime?
Okay so it looks like when you run Firebase init command, It kinds of rewrites your index.html and hence that page. All I had to do was this :
Run firebase init.
Define directory to build/web
Run flutter build web (and not at the start of this procedure)
Run firebase deploy.
Related
I made some changes to my project and then tried to deploy again. I did firebase init, then followed the usual steps, and then firebase deploy. The URL I was provided leads me to the page in the image below. What I am doing wrong?
My Codemagic pipeline is configured to fetch sources from my repository, build web and publish it to Firebase hosting.
The build is each time successful, but the changes from my last commit are not there, so I assume that the publishing part somehow not woking properly.
In the logs though everything looks great, my last commit is fetched, and firebase logs say that deploy is complete with the link to the site and all. (see below)
How could I "Debug" this case, any ideas on what is wrong?
you can try following steps to debug such type of issues:
open site in incognito mode to ensure issue not related to browser cache
check Cache-Control and Date response headers for main.dart.js file to ensure you have properly configured cache behaviour in Firebase Hosting
https://firebase.google.com/docs/hosting/manage-cache
https://firebase.google.com/docs/hosting/full-config#headers
I hope it will help
Previously the app was hosted on custom domain through firebase itself as it was a ReactApp but I have moved the app to nextjs and started using Server Side Rendering. I have hosted the app using firebase cloud functions and it works prefectly on the URL provided after deployment. But now on the custom domain that was connected previously it shows "Welcome to Firebase Hosting" you need to configure it.
This is my firebase.json file
This is my function.js file
And this is the package.json file
Edit: I found this in documentation
Any connected custom domains:
CUSTOM_DOMAIN/bigben
Can't I host it on root URL?
As mentioned by #samthecodingman, there is an appropriate documentation that lists your requirement of hosting the Cloud Functions in Firebase Hosting using a custom domain.
Below are the steps for connecting Cloud Functions to Firebase Hosting :
Make sure that you have the latest version of the Firebase CLI and
that you've initialized Firebase Hosting.
Initialize Cloud Functions by running the following command from the
root of your project directory:
firebase init functions
When prompted, select JavaScript (this walk-through example uses JS).
Check that you have a functions directory in your local project
directory.
Open /functions/index.js in your favorite editor. Replace the file's
contents with the following code. This code creates an HTTPS
function (named bigben) that replies to HTTPS requests with a BONG
for each hour of the day, just like a clock.
Test your functions locally using the Firebase Local Emulator Suite.
From the root of your local project directory, run the following command:
firebase emulators:start
Access the function via the local URL returned by the CLI,
http://localhost:5001/PROJECT_ID/us-central1/bigben.
The following steps show you how to direct all requests from the path ../bigben on your Hosting site to execute the bigben function.
I. Open your firebase.json file.
II. Add the following rewrite configuration under the hosting section:
III. Confirm that your redirect works as expected by testing again with the Firebase emulators.
Deploy your function and your Hosting content and config to your site by running the following command from the root of your local project directory:
firebase deploy --only functions,hosting
Access your live site and your function at the following URLs:
a. Your Firebase subdomains:
PROJECT_ID.web.app/bigben and PROJECT_ID.firebaseapp.com/bigben
b. Any connected custom domains:
CUSTOM_DOMAIN/bigben
You can use web frameworks, like Express.js, in Cloud Functions to serve your app's dynamic content and write complex web apps more easily. The client set up code example is also provided here.
your firebase.json is missing predeploy. and you should also use firebase-functions/v2, as v1 doesn't work for next.js.
checkout my article: https://yihui.dev/firebase-hosting-with-nextjs-and-cloud-functions
and the github example: https://github.com/yihui-he/firebase-nextjs-example
I have a website that I'm already hosting at www.example.com (custom domain) using Firebase Hosting. I already have various HTML pages on the site like example.com/page-1.html or example.com/page-2.html.
Now I need to build a web application example-web and put it in a page within the already existing site. Imagine example.com/page-3 should load the Flutter Web application only. I do not want my existing HTML pages to change or be affected by the Flutter single page web application.
Some things to note:
I already have iOS and Android applications built using the same Firebase project as the site being hosted on example.com. These mobile apps are also created with Flutter.
I have created a sample web application using Flutter and Firebase as well within the same project.
I need it to be on the same domain because I already have Firebase Hosting set up to read a variable and then load the Flutter web app using that variable. For example example.com/profile/username needs to load the flutter web app after reading the variable username.
I am simply confused about how to load the Flutter Web App build inside an existing Firebase Hosting website?
Should I be hosting the flutter web app in a different hosting link and load it inside an iFrame within my existing domain page?
Any help or guidance for this will be highly appreciated! Thank you!
You can simply paste all the files that Flutter generates in your Firebase hosting's public directory. Follow these steps:
1. Run Flutter Build:
flutter build web
It will generate build/web directory and it's content may look something like:
2. Copy build files in public directory:
If you already have a Firebase hosting project, then I assume your public directory looks something like:
After copying all files from the Flutter build directory to the public directory, it should look like:
Do note that I've renamed index.html from Flutter to page-3.html and kept the original index.html as is.
That page-3.html file will look for main.dart.js file in the same directory so if you move that JS file to any other directory, let's say, /js/main.dart.js then don't forget to change that in page-3.html.
3. Serve the website:
Try serving your website locally using firebase serve --only hosting command.
You should have all existing pages as they were and Flutter app on http://localhost:3000/page-3.html. If the page returns 404 on /page-3 but works on /page-3.html then checkout this answer on cleanUrls.
PS: Make sure none of your files overwrite each other if they have same name.
When you run flutter build web in your project directory Flutter automatically creates an index.html file along with all of its dependencies, thus serving a Flutter web app is not that different to serving a normal page. All the files you need will end up in your project's /build/web folder, which can be served on its own at example.com/page-3.
Use Firebase multisite hosting to retain your current site and you can setup and deploy your flutter app on app.example.com.
You'll need to direct the user to the app url to use the app.
Both sites need to be in the same project, if you use Firebase Authentication this will work across the sites.
I have deployed my first app to meteor.com. It is called evideo.meteor.com.
I gets empty page. But when deploying to my local machine deployment, it was fine.
It is an app that can load or take pictures/videos.
I enter your app website and open the console, finding that there are some errors. You might check it out.