fix CORS error in production

[spencerlepine]

Ticket

Issue: #80

Production Server CORS Error

Situation:

On the EC2 server, there are docker containers running on localhost. The client sends a request to the server https://localhost:5000 from http://34.203.190.56/. It returns a CORS error:

Access to XMLHttpRequest at 'http://localhost:5000/api/matches/generate?userId=4optBd6PKgQZa4Ops3HI7KPYcLm2' from origin 'http://34.203.190.56' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space

Task:

In production, the client should be able to make requests to the server.

Action:

Thoughts:

Maybe the backend docker container is not running on localhost:5000 . The frontend request is coming from http://34.203.190.56/, not localhost.

I could modify the FROM host value in the axios headers on the frontend. This is a bit hacky, but could work.

Server Status Alerts

It would help to render alert components when the frontend is disconnect from the server.

The React should only load after it has connected to Firebase, AND the backend API container.

The app should be wrapped in a status checker. It should have state to be loading, connected to Firebase, and connected to API.

The status checker should be loading by default and render a loading spinner. When status checker finishes loading: If both status checks are true => render the React APP If NOT both status checks pass => render warning message alert (e.g. "Unable to connect to backend server")

Question:

How do I verify that the Firebase is connected?

Result

The status checks made is much easier to verify the connection for the server and Firebase during development. This also helped verify that the app was working with the correct ENV variables during end to end testing. BEFORE, it was a gamble if everything worked in production, only knowing IF it worked AFTER deploying EVERYTHING. AFTER, I was able to PROVE everything worked in production with End-to-end tests before deploying.

RnD

Access to XMLHttpRequest at 'http://localhost:5000/api/matches/generate?userId=4optBd6PKgQZa4Ops3HI7KPYcLm2' from origin 'http://34.203.190.56' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address spacelocal.

[spencerlepine]

npm start should use webpack-dev-server instead