jeyofdev / starter-react-graphql-apollo-prisma

Setting up a project fullstack with Node, Typescript, React, Vite, Graphql, Apollo, Codegen and Prisma.

Starter React Graphql Apollo Prisma

Setting up a project fullstack with Node, Typescript, React, Vite, Graphql, Apollo, Codegen and Prisma.

Tools

• Graphql A query language for your API.
• Apollo-server Spec-compliant GraphQL server that's compatible with any GraphQL client.
• Prisma Next-generation Node.js and TypeScript ORM.
• Postgres The Open Source Relational Database.
• React The library for web and native user interfaces.
• Apollo-client A comprehensive state management library for JavaScript.
• Typescript JavaScript with syntax for types.
• Codegen Generate code from GraphQL schema.
• Prettier Code formatter.
• ESLint Find and fix problems in JavaScript and typescript code.
• Prettier Code formatter.
• husky Husky improves your commits.
• TailwindCss A utility-first CSS framework.
• MaterialUI Move faster with intuitive React UI tools

Getting starting

Prerequisites

• node
• npm

Dependencies

Install all dependencies :

npm run preinstall

Install only dependencies of api :

cd api && npm install

Install only dependencies of client :

cd client && npm install

Environment variables

Creates the .env file in the root directory of the api folder :

cd api && touch .env

In the .env, set your postgres database url and the port.

Example :

PORT=4500
DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public"

Creates the .env file in the root directory of the client folder :

cd client && touch .env

In the .env, set your api url.

Example :

VITE_GRAPHQL_URL="http://localhost:4040/graphql"

Database

To map your data model to the database schema, you need to use the prisma migrate :

npm run db:migrate

When the 1st migration is executed, add the 1st data :

npm run db:seed

Start the app

Run your GraphQL server and your React app with this command :

npm run dev

Navigate to http://localhost:{yourport} in your browser to explore the API with the Apollo Playground.

Navigate to http://localhost:8080 in your browser to run the React app.