Is firebase serve, the development server for Firebase, just a plain vanilla web server that serves files over HTTP, or does it do something special for Firebase apps?
More specifically, is there any reason to use firebase serve in development if it's more convenient in my situation to use another development web server (e.g., webpack-dev-server or a local Apache or IIS)?
The firebase serve command in the Firebase CLI interprets the instructions in your firebase.json file and serves the web site based on those.
If you're using another local dev server, you'll have to make sure it follows the same rules. That's typically not hard, but it somewhat of a hassle to ensure the firebase.json and configuration of the dev server stay in sync.
Related
I'm building an app in Vue 3 with Vite as my bundler and dev server. I'm using Firebase as the backend. I've got the hosting emulator working locally, but it points to the /dist directory where the build output goes. While this works, it requires a manual rebuild each time to pick up the changes.
Instead, I'd like to be able to configure the hosting emulator to serve the Vite dev server when developing locally. So it would essentially proxy the Vite app on port 3000 to the hosting emulator URL on port 5000. This would allow hosting rewrite rules to be tested, including ones that point to cloud functions.
Firebase hosting emulator has its own run environment where it not includes any tools/environment to run Vite dev mode. It just serves static files and read firebase.json file, to know are it should redirect requests set response headers etc. Emulator Probably will work only with static files, so there is only one option that you will build your project every time you want to check are it works in emulator. I usually use every emulator except Hosting when I'm working in frameworks that needs webpack or Vite.
What I did was I used the vite dev server as is and pointed the firebase hosting to the dist folder. I changed my firebase.json file to:
"hosting":{
"public":"dist",
"ignore":[
"firebase.json",
"**/.*",
"**/node_modules/**"
]
},
and for the hosting emulator
"hosting": {
"port": 5000
},
I never found of a way to get the hosting emulator to act as a dev server. However just using my vite dev server I was able to connect to the emulators and to my production services. Vite dev server after all was a client.
When using Cloud Functions locally it meant that I had to do add cors to my functions headers and everything just worked fine.
I am using Firebase Hosting. Hosting it in local for testing via command
firebase serve --only hosting
This hosts all files fine irrespective of the case mismatch in the urls.
Once this is Hosted onto Firebase, all the case-sensitive links are broken.
I know Firebase is case-sensitive, but how does it work in local hosting?
This would make no sense of local testing if it fails after Hosting on to cloud.
If you're working with Windows or a Macos filesystem that isn't case sensitive, then the emulator probably isn't going to discern between FOO.HTML and foo.html, since the operating system thinks they're essentially the same. Your code should always respect case, regardless of what system is hosting it - Firebase Hosting in production requires it.
I have express, react based existing project that I managed to port to Firebase hosting with cloud functions successfully..at least on the dev server.
It looks like this..
This is running on http://localhost:5000/ with command
firebase serve --only functions,hosting
Now, when I deploy this, it looks like
This is NOT a static site. Following the firebase vid here
https://www.youtube.com/watch?v=LOeioOKUKI8
So I have express server running with
app.use('/static',express.static('../public'));
I had to do this because otherwise, firebase hosting treats each path as public path and it messes up scripts sourcing from public folder and also my react router in react app.
While this works on local server run by firebae, it throws 404 on prod.
Failed to load resource: the server responded with a status of 404 ()
The point is I got all this working on local machine but the deployment just won't oblige.
The deployment was not smooth.
firebase deploy
didn't work.
firebase --only hosting
worked.
firebase --only functions
did not work for quite sometime.
It kept throwing
Error setting up the execution environment for your function. Please try again after a few minutes.
a few times before it finally worked. And I didn't change anything to make it work. Just did it by itself.
Is there something I am missing? I am very new to firebase hosting.
I already have a production site running somewhere and I wish to port it to firebase. But I can not have random 'try again after a few minutes problems'.
But first things first, why are my static files not rendering on prod when they do on dev?
Thanks
Your public directory will need to be nested beneath your functions folder, as only files within the functions folder are deployed to Cloud Functions and available from Node.js.
The local emulator is not actively guarding against this kind of tree navigation, which is why it works locally.
In general, though, you'll likely want to restructure your app a bit so that your static assets are deployed to Firebase Hosting directly rather than being served by Express.
All static files are hosting on CDN how Firebase make sure the most recent version of index.html file is fetched when the user made a network request?
Does this process involved with Nginx or something similar?
What's the process behind this One-click rollback?
When you deploy a version of you app/site, all the resources of your site/app are bundled up and sent to Firebase Hosting's servers. Firebase validates that the files are intact and then tells the CDN to flush its cache. The next time that an edge cache in the CDN receives a request for a file from your app/site, it requests that file from the Firebase Hosting origin servers.
The rollback of Firebase Hosting is quite similar to what happens when you deploy a new version of your site/app. Firebase Hosting takes the old bundle and essentially deploys it. From there the process is the same.
I understand Firebase Hosting is for, well, Hosting code files.
However, is there a way that I can ignore certain dependencies during deployment, but have Firebase run an install (like bower install) of them when the deployed code hits the server?
I don't think you can run any further deployment tasks on server when deploying to Firebase storage.
I would use Gulp/Grunt build task which can run prior to deployment and replace all bower_dependencies with its CDN alternatives. This will save you some storage on the hosting as well as speed up your site a bit...
Alternatively you can use Gulp/Grunt to build your own dependecies from bower components which can be deployed to the server.