Search code examples
firebasegoogle-cloud-functionsfirebase-hostingfirebase-cli

Firebase hosting public folder alias

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

enter image description here

Now, when I deploy this, it looks like

enter image description here

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

Solution

  • 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.