https://github.com/danedwardsdeveloper/express-react-monorepo

An API and React app served by Express
https://github.com/danedwardsdeveloper/express-react-monorepo

Last synced: 10 months ago
JSON representation

An API and React app served by Express

• Host: GitHub
• URL: https://github.com/danedwardsdeveloper/express-react-monorepo
• Owner: danedwardsdeveloper
• License: mit
• Created: 2024-07-21T10:20:25.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-07-26T09:11:01.000Z (almost 2 years ago)
• Last Synced: 2024-07-26T20:27:33.063Z (almost 2 years ago)
• Language: TypeScript
• Size: 481 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# express-react-monorepo

An API and React app served by a single instance of Express

## Notes

I'm using this as a base for a series of full-stack applications I'm creating for my portfolio. It doesn't look like much, but it's set up to enable me to create secure & fully fledged MERN applications.

# Features

Stateless Express server

   -  Written in TypeScript

   -  Serves an API at `/api`

   -  Currently uses hardcoded sign in values

   -  Issues a JWT cookie on sign in

   -  The client can't read or do anything with the JWT except pass it back with subsequent requests

   -  Also serves the static React app at `/`

React app

   -  Written in TypeScript

   -  Uses React Router

   -  Uses an AuthContext to store the `isAuthenticated` state globally

   -  Makes requests to `/api/validate-token` to update the state

   -  Uses Axios for requests

   -  Layout styled with Tailwind

Environment Variable handling

-  I'm using one `.env` file for both parts of the site

-  Back-end variables are prefixed with `EXPRESS_`

   -  This is for clarity only

-  Front-end variables are prefixed with `VITE_`

   -  This is essential for the Vite bundler to be able to use them

-  Both parts of the monorepo have an `environementChecks` file

-  This is where you declare essential variables and check they can be accessed by the TypeScript complier (for the back-end) and Vite (for the front-end)

-  This will throw an error if any aren't set.

-  The whole point of this is to make deployment to Fly easy.

 Deployed with Fly

-  The deploy script in `root/package.json`: `pnpm run deploy` first runs `/ops/checkVariables.js`, which will throw an error if anything is still set to 'production'

-  This is annoyingly manual for my taste, but setting environment variables is currently quite difficult with Fly, and this gives me peace of mind that I'm not wasting build time & money

-  Next the TypeScript Express server gets compiled into `dist/server`

-  Then the React project is built into `dist/client`

-  Then the `.env` file is scraped, and the variables are added to the `fly deploy` command

-  You'll be able to see all environment variables logged to the Fly console

-  The site will work beautifully

  ## To-Do List

  - Prune dependencies

  - Write database connection file

  - Add rate limiting