I have a simple testing project with NodeJS and ReactJS
.
├── server
└── web
- Server - Is for nodejs
- Web - Is for Reactjs
I know how to host a single react project.
Is there a way to do that?
Assuming the 'server' is an Express application, you can initialize Cloud Functions in the same directory and use a onRequest() function. You just need to pass the Express app instance in it and you won't have to refactor much of your code. Try running firebase init and initialise Cloud functions and Firebase hosting if you haven't already. If the CLI asks for a directory name for hosting, then enter build (the directory created when you build your React app)
Your directory structure should look something like this now:
app_name/
├─ build/ (React build)
├─ functions/ (created by Firebase CLI for Functions)
│ ├─ index.js
├─ web/ (React app)
Then move the contents of "server" in function and pass the Express app instance in index.js as shown below:
const app = express();
// ... routers
exports.api = functions.https.onRequest(app);
Then make sure all the directory names are updated in firebase.json file. It should look this:
{
"functions": {
"predeploy": "npm --prefix \"$RESOURCE_DIR\" run build",
"source": "functions"
},
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
Now you can deploy both the service by:
firebase deploy --only functions,hosting
You must update the API URL in your web app with the Cloud Function's URL. It should be shown in the CLI once you deploy it.