CODEWITHSUNDEEP
node.jsreactjsfirebaseexpressfirebase-hosting
ss_matches
ss_matches

Reputation: 517

Get Express API running with React frontend on Firebase

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?

Upvotes: 0

Views: 2573

Answers (1)

Doug Stevenson
Doug Stevenson

Reputation: 317692

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.

Upvotes: 1

Related Questions