CODEWITHSUNDEEP
reactjsfirebasegoogle-cloud-functionsfirebase-hosting
Nils
Nils

Reputation: 2205

How to add React App to a Firebase Hosting project

I have created a simple CRUD RESTful API using Firebase Functions/Hosting.

Now I would like to build the corresponding frontend using React to query my API.

However, I have no idea how to cleanly add a new React app to my project folder and deploy it to Firebase Hosting.

This is my folder structure at the moment: https://i.sstatic.net/qVEql.jpg

The whole API lives in "index.ts" in the functions folder. (I know, not good to have it all in one file).

Where/how do I add a React App and deploy it to Hosting?

Upvotes: 1

Views: 127

Answers (1)

T. Sunil Rao
T. Sunil Rao

Reputation: 1257

Your API using Cloud Functions is a separate project and your front-end App is a separate project. You may keep the two projects separate or together in the same folder is your personal choice.

Having said that, firebase-tools installs the project for cloud functions in the functions folder, so that your main front-end project can reside as the parent folder. Firebase has few files in the parent folder to store the firebase settings which generally do not interfere with your front-end app.

For deployment, you can deploy API and front-end app in same hosting or different, choice again is yours. In case, you deploy on the same firebase hosting, you can set up rules in firebase.json to differentiate the routes for your functions and app.

Upvotes: 1

Related Questions