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?
