- Next.js
- TypeScript
- GraphQL
- Prisma
- Material-UI
- React Hook Form
- Quality tools
Choose how to start your development server based on your database configuration below.
First time starting your app make sure to run prisma
then start your app.
npm run prisma && npm run dev
Ensure you have a .env
file with a DATABASE_URL
variable following the format required by prisma and using the credentials found in your docker-compose.yml
file.
DATABASE_URL=postgresql:https://[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 your
prisma/schema.prisma
file (prisma format
) | prisma format documentation - Keeps your
prisma/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 your schema.prisma
file, followed by creating a migration. For a tutorial on this visit the prisma schema documentation.
Once you've made the appropriate changes to your schema.prisma
file you can auto generate a migration using
npm run migrate
This will generate a new folder under prisma/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 the prisma migration documentation or the prisma generate documentation.
To seed your database, using prisma client, add in sample data in the prisma/seed.ts
file.
To learn more visit the prisma seeding documentation.
Using the prisma client you can do the various actions required to build applications utilizing a database.
To learn more visit working 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, visit https://localhost:3000/api/graphql.
Along the right you will see tabs, Docs
and Schema
. 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 the Docs
to see what you can query.
here is an example query
{
tools {
id
name
description
}
}
All scripts can be run by prefixing with npm run
, for example npm run build
Using graphql code generator this generates types based on the codegen.yml
configuration. In the initial setup this will update files under the gen/
directory.
npm run generate-types
Using graphql code generator this command listens for changes based on the documents
key in the codegen.yml
file, and generates types.
npm run watch-queries
See the prisma generate documentation.
npm run generate
See the prisma migration documentation.
npm run migrate
To apply pending migrations to development, staging, or testing environments, run the
migrate 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 visit prisma migrate reset.
npm run reset
Runs the prisma/seed.ts
script to seed your database. See the prisma seeding documentation.
npm run seed
Allows you to interact with and manage your data interactively. For more visit prisma 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 at https://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 with npm run build
first.
The application will start at https://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 run test
Runs TypeScript compiler to validate there are no type errors between commits
npm run type-check
Runs type-check
, lint
, and test
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 in pages/_app.tsx
.