Skip to content

megafinz/BenAwad-FullStackTut

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

47 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

What's This

This is my take on coding along with the Ben Awad's Full Stack React GraphQL TypeScript Tutorial

How Do I Run This

Prerequisites

  1. Docker
  2. NodeJs (+ yarn)

Backend

  1. cd into backend folder.
  2. Create .env and .docker.env files (see .env.example). .docker.env file is used by docker-run-* scripts.
  3. Two options:
    1. Run server locally:
      1. Run ./docker-run-db.sh to bring up PostgreSQL and Redis databases.
      2. Run yarn watch to compile TypeScript code into runnable JavaScript.
      3. Run yarn dev to start backend server.
    2. Run server via docker:
      1. Run ./docker-run-all--build.sh to bring up PostgreSQL and Redis databases and to build and run server image. Run this if you make any changes to the code and want to test these changes in docker.
      2. Run ./docker-run-all.sh to bring up PostgreSQL and Redis databases and to run previously built server image. If the image has never been built before, docker-compose will build it for you, otherwise it will reuse the last built image that may not include your latest changes to the code.

Frontend

  1. cd into frontend folder.
  2. Create .env and .docker.env files (see .env.example). .docker.env file is used by docker-run-* scripts.
  3. Two options:
    1. Run frontend locally:
      1. Run yarn codegen:watch to start GraphQL Code Generator (optional if you don't change graphql/**/*.tsx files that contain queries and mutations).
      2. Run yarn dev to start NextJS server that will serve the UI.
    2. Run frontend via docker:
      1. Run ./docker-run--build.sh to build and run frontend image. Run this if you make any changes to the code and want to test these changes in docker.
      2. Run ./docker-run.sh to run previously built frontend image. If the image has never been built before, docker-compose will build it for you, otherwise it will reuse the last built image that may not include your latest changes to the code.

Notes

  1. I'm using prisma instead of MikroORM and TypeORM that Ben uses in tutorial. IMO it's much nicer to use and supports all required features out of the box without the need to resolve to writing raw SQL code.
  2. I'm using Apollo Client instead of urql, IMO developer experience is much nicer with Apollo (although SSR setup is a little bit more involved), just look how Ben struggles with the cache updates.