Get Express API running with React frontend on Firebase - node.js

Question

I am trying to get a simple "Hello World" on Firebase.
I am have running fine locally, as it's a very simple app.
Directory Structure is:
/
--/client
----/public
------/src
--------/App.js
----/...
----/package.json
--/public
--/app.js
--/package.json
--/...
package.json at /
{
"name": "server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start:all": "concurrently \"npm run start\" \"npm --prefix client run start\" --kill-others",
"start": "node app.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"concurrently": "^5.2.0",
"cors": "^2.8.5",
"express": "^4.17.1"
}
}
app.js at /
const express = require('express');
const cors = require('cors');
const app = express();
const port = 5000;
app.use(cors());
app.get('/', (req, res) => {
res.send('Hello World!');
});
app.get('/test', (req, res) => {
res.json('TEST ROUTE!');
});
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`);
});
package.json at /client
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
},
"proxy": "http://localhost:5000",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build && npm run clean && mv build ../public",
"clean": "rimraf ../public",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
App.js at /client/src/
import React from 'react';
import './App.css';
const App = () => {
fetch('/test')
.then((response) => response.json())
.then((data) => console.log(data));
return <div className="App">REACT App.js</div>;
};
export default App;
running
npm run start:all
Will result in Express running on 5000 and React running on :3000
I will then see the message from my client "React App.js" and the server via the browser console "TEST ROUTE".
When I run:
firebase deploy
I see the message from the frontend "React App.js", but I in the console I see:
localhost:5000/test:1 Failed to load resource: net::ERR_CONNECTION_REFUSED
(index):1 Uncaught (in promise) TypeError: Failed to fetch
How do I deploy this app to Firebase so that the frontend and backend can talk to each other?

Answer 1

Firebase Hosting does not support deployment of node apps (or any backend code). It just serves static assets like HTML, CSS, JS, and images.
Firebase Hosting does support proxying requests to Cloud Functions, which can run code on nodejs, and even Express apps. This requires significantly more complex setup and deployment, and you can't use app.listen() - you must accept the framework that Cloud Functions provides for handling your API endpoints. Read the documentation for more information.