Connect frontend to backend

FoRVaiS commented 7 months ago

Description

Whheww! This is a big PR...

Docker

Remove frontend dockerfiles, services, and any supporting files
Add built frontend files to api dockerfile
Rename api to app [in docker/docker-compose]

Backend

Extend catch-all route to render web-app to users
Add Helmet CSP to prevent HTTPS redirects on localhost
Add WEB_ROOT environment variable

Frontend

BREAKING CHANGE: Remove start:dev script -- Frontend requires an API server to work, you might as well launch the API to access the frontend
Makes fetch and mutation api requests for the Registration, Login, Profile, and Account Info pages

Retrospective

CORs is a pain in the butt because cookies from the api can not be saved to the browser.

express-session is not a good solution for client-side rendered frontends.

Testing Notes

The commands in the Makefile were not designed for interdependence between apps. This means that we'll need to manually run some commands that we would not have before.

This will be solved with the new project management script (not yet uploaded).

Testing

Build the latest frontend: npm run -w apps/frontend build
Spin up the db: make res
Add WEB_ROOT=../frontend/dist to apps/api/.env
Start the api server: npm run -w apps/api start:dev
Navigate to: http://127.0.0.1:3000/
Register for a new account
Login with your new account
Verify you can see your profile information: http://127.0.0.1:3000/profile/edit
Verify you can see your account information: http://127.0.0.1:3000/account
In the account information page, edit your first name, then save
Refresh the page, verify your change persists

netlify[bot] commented 7 months ago

Deploy Preview for geek-collectors-network ready!

Name	Link
Latest commit	dbb1f35019e517a850a4d72c9f4ec26669f6f3a5
Latest deploy log	https://app.netlify.com/sites/geek-collectors-network/deploys/65fc07cf800adf0008ffcd99
Deploy Preview	https://deploy-preview-156--geek-collectors-network.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

FoRVaiS commented 7 months ago

Hours worked: 5:15

tgrigoruk commented 7 months ago

There are some bugs with form submissions. Account info only saves if a password is entered, and I can't get the profile page to save at all.

Everything else looks good so I'm approving this PR with the assumption that as User Profile continues development those issue will get ironed out.

Geek-Collectors-Network / geek-collectors-network