Repository files navigation

• Tools included
• App startup
  • SQLite
  • Postgres
• Using Prisma
  • Adding a table to your database
  • Creating migrations
  • Seeding sample data
  • Using prisma client to perform database actions
• Using GraphQL
  • GraphQL Playground
• Scripts
  • generate-types
  • watch-queries
  • generate
  • migrate
  • deploy
  • reset
  • seed
  • studio
  • prisma
  • build
  • dev
  • format
  • lint
  • start
  • test
  • type-check
  • quality
• Accessibility
  • @axe-core/react

• Next.js
• TypeScript
• GraphQL
  • Apollo
    • Micro Server
    • React Client
  • TypeGraphQL
    • TypeGraphQL-Prisma automatic CRUD plugin
  • GraphQL code generator
• Prisma
  • Entity Relationship Diagram auto-generator
• Material-UI
• React Hook Form
• Quality tools
  • ESLint
  • Prettier
  • Jest
  • @testing-library/react

Choose how to start your development server based on your database configuration below.

First time starting your app make sure to runprisma then start your app.

npm run prisma && npm run dev

Ensure you have a.env file with aDATABASE_URL variable following theformat required by prisma and using the credentials found in yourdocker-compose.yml file.

DATABASE_URL=postgresql://[POSTGRES_USER]:[POSTGRES_PASSWORD]@[POSTGRES_HOST]:[PORT]?schema=public

Start up your development server with the following command:

docker-compose up

Once your development server is up and running, in a new terminal run the following command:

 npm run prisma && npm run dev

npm run prisma will do a few things for us:

• Format yourprisma/schema.prisma file (prisma format) |prisma format documentation
• Keeps yourprisma/schema.prisma file in sync with your database by auto generating migrations when needed (npm run migrate) |prisma migration documentation
• Seed your database with (npm run seed) |prisma seeding documentation

Prisma helps app developers build faster and make fewer errors with an open source ORM for PostgreSQL, MySQL and SQLite. |Source

Adding a table is as easy as adding a model to yourschema.prisma file, followed bycreating a migration. For a tutorial on this visit theprisma schema documentation.

Once you've made theappropriate changes to yourschema.prisma file you can auto generate a migration using

npm run migrate

This will generate a new folder underprisma/migrations with a SQL file outlining the changes to be reflected to your database and also generate new TypeScript code for prisma client usage.

To learn more visit theprisma migration documentation or theprisma generate documentation.

To seed your database, usingprisma client, add in sample data in theprisma/seed.ts file.

To learn more visit theprisma seeding documentation.

Using the prisma client you can do the various actions required to build applications utilizing a database.

To learn more visitworking with the prisma client.

GraphQL helps developer experience by providing tools to interact with data sources given a query language. |Source

The GraphQL playground is where you can test out and write queries and mutations before consuming these requests in the client code. To view the playground, while your server is running, visithttp://localhost:3000/api/graphql.

Along the right you will see tabs,Docs andSchema. This is equivalent to REST's Swagger API that explains all of its endpoints a developer can call. The only difference here is graphql is a universal query language giving you the developer the ability to query as much or as little as needed. So view theDocs to see what you can query.

here is an example query

{tools {idnamedescription    }}

All scripts can be run by prefixing withnpm run, for examplenpm run build

Usinggraphql code generator this generates types based on thecodegen.yml configuration. In the initial setup this will update files under thegen/ directory.

npm run generate-types

Usinggraphql code generator this command listens for changes based on thedocuments key in thecodegen.yml file, and generates types.

npm run watch-queries

See theprisma generate documentation.

npm run generate

See theprisma migration documentation.

npm run migrate

To apply pending migrations to development, staging, or testing environments, run themigrate deploy command as part of your CI/CD pipeline |Source.

npm run deploy

When you want to reset your database to a clean slate, this clears all migrations and re-runs the migration list, then seeds the database. For more visitprisma migrate reset.

npm run reset

Runs theprisma/seed.ts script to seed your database. See theprisma seeding documentation.

npm run seed

Allows you to interact with and manage your data interactively. For more visitprisma studio.

npm run studio

An aggregate command used to format your schema file, check for differences from schema to db, generate a prisma client, and seed your database.

npm run prisma

Builds the production application in the .next folder.

npm run build

Starts the application in development mode with hot-code reloading, error reporting, and more:

The application will start athttp://localhost:3000 by default. The default port can be changed with-p, like so:

npm run dev -p 4000

Runs ESLint and Prettier auto-formatting.

npm run format

Runs ESLint static code analysis based on your.eslintrc configuration

npm run lint

Starts the application in production mode. The application should be compiled withnpm run build first.

The application will start athttp://localhost:3000 by default. The default port can be changed with -p, like so:

npm run start -p 4000

Runs Jest unit tests to validate changes between commits

npm runtest

Runs TypeScript compiler to validate there are no type errors between commits

npm run type-check

Runstype-check,lint, andtest to make an better developer experience catching preventable quality errors.

npm run quality

Runs in development environment and logs accessibility error results in dev tools console. Tool implementation is inpages/_app.tsx.