[feature]: Deploy my project with firebase

[trung1051996]

I want to deploy my project with Firebase, but after finishing the Firebase setup and building, it only takes static data from Firebase.
yarn venia run build:

firebase init && firebase deploy:


Link test: https://alawani-app.web.app/
I want to ask if there is a way to deploy a project with Firebase?

[m2-assistant]

Hi @trung1051996. Thank you for your report.
To speed up processing of this issue, make sure that you provided sufficient information.
Add a comment to assign the issue: @magento I am working on this

---

Join Magento Community Engineering Slack and ask your questions in #github channel.

[glo82145]

@adobe export issue to JIRA project PWA as Bug

[github-jira-sync-bot]

✅ Jira issue https://jira.corp.adobe.com/browse/PWA-3571 is successfully created for this GitHub issue.

[del15881]

Local PWA Setup Summary (Firebase Hosting + Functions)

We attempted to run our scaffolded PWA project using Firebase Hosting + Functions Emulator locally. where our public directory is set to dist. After completing the initial setup, we noticed that only static content was visible.

Upon debugging we found the browser console showed : "SyntaxError: Unexpected token '<'".
This happened because index.html was being served for all routes, including JS bundles, causing scripts not to load.

Fixing the Unexpected Token "<" Issue

We resolved this by clearing the rewrites array in firebase.json temporarily.
After this change, the JS files loaded correctly. We began seeing GraphQL calls in the browser, But they always returned 404.

On debugging, we found that:

• The GraphQL requests were being sent to Firebase Hosting (localhost) instead of the Adobe Commerce backend.
• This meant the frontend was correctly built but still lacked a bridge to the backend.

This is when we introduced Firebase Cloud Functions to act as a proxy.

Introducing Firebase Functions (for GraphQL Proxying)

we created a functions directory at PWA root then run : 

firebase init functions

Choose:
    Language: JavaScript
    Install dependencies: Yes
    Emulator config: doesn't matter
    ESLint: your choice

This installed:

• Firebase Functions SDK
• Node.js setup for server-side code
• A default index.js entry point

Inside this folder, we created a dedicated HTTP function to handle GraphQL requests and forward them to our Adobe Commerce backend.

We added new rewrites in firebase.json.
Then we built a proxy function that forwards both GET and POST GraphQL requests directly to Adobe Commerce.
This resolved the GraphQL 404 issue.

Once GraphQL began working, we found that product images were broken.

All image URLs were still loading from:

http://127.0.0.1:5002/static/...

instead of the Adobe Commerce backend:

http://local.magentocomposeree.com:8082/static/...

To fix this, we extended the proxy function to rewrite relative image paths to use the backend base URL.

This ensured all images were correctly served from Adobe Commerce instead of Firebase.

Handling Backend URL Configuration

We originally attempted to use .env from PWA, but Firebase Functions do not support .env files.
The correct approach was to use Firebase Runtime Config:
 

firebase functions:config:set magento.backend_url="http://local.magentocomposeree.com:8082" 

firebase functions:config:get > functions/.runtimeconfig.json

 
This allowed us to access the backend URL inside the function via:

functions.config().magento.backend_url

Note: Firebase has announced that functions.config() will be deprecated soon, so this will need to be migrated in the future.

Here are files for your reference :

firebase.json:

firebase.json

functions/index.js :

index.js

Here is a video of our setup showing PWA working with firebase: pwa-with-firebase-demo.mov