node.js - Extracting React API calls to Express backend server

Question

I have a React site that uses the Google API to get calendar data. In order to keep my API key secret, I want to extract the call to an Express backend server. The site is using react-router-dom, and I'm wondering the right way to get it to hit the backend.

A.) Should the server be in a parent folder of the React app (and start both with concurrently) or does that not matter (just set up routes correctly with Express)?

B.) How do I reach outside of the React app to the backend and how should the Express routing look?

and

C.) I've seen tips on using a proxy for dev server calls, but how does that change for a production build?

Current state of server.js:

const express = require('express');
const cors = require('cors');
const path = require('path');
const app = express();

// Allow cross-origin
app.use(cors());

app.use(express.static('public'));

app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'public', 'index.html'));
});

const PORT = process.env.PORT || 5000;

app.listen(PORT, () => console.log(`Server listening on port ${PORT}`));

current React App.js

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import About from './components/About';
import Calendar from './components/Calendar';
import Home from './components/Home';
import Nav from './components/Nav';
import Footer from './components/Footer';

function App() {
  return (
    <div>
      <Nav />
      <Router>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/calendar" component={Calendar} />
      </Router>
      <Footer />
    </div>
  );
}

export default App;

and the Calendar.js page component:

import React, { useState, useEffect } from 'react';
import MonthCard from './MonthCard';

const Calendar = () => {
  const [events, setEvents] = useState(null)

  useEffect(() => {
    // Make backend API call

    // setEvents(apiResponse)
  }, [])

  return (
    <div className="container text-center">
      <div className="col-12">
        <br />
        <h1>Upcoming Shows</h1>
      </div>
      <div className="row justify-content-center">
        <div className="col-6 text-center">
          <p></p>
          <h3>
            Due to COVID-19 concerns, all shows are tentative and subject to
            cancellation
          </h3>
        </div>
      </div>
      <br />
      {events.map(arr => (
        <MonthCard key={arr.month} month={arr.month} events={arr.shows} />
      ))}
    </div>
  );
};

export default Calendar;

Answer 1

For anyone wondering, the simple answer was:

A.) Yes, put the React app in a /client subfolder

B.) add the following to the client's package.json:

"proxy": "http://localhost:5000"

I didn't build and push to a production environment, so I don't know the answer to C.) yet.