@prisma-cms/nextjs Typescript Boilerplate

Based on

• https://github.com/vercel/next.js/tree/canary/examples/with-typescript-eslint-jest
• https://github.com/vercel/next.js/tree/canary/examples/with-apollo
• https://github.com/vercel/next.js/tree/canary/examples/custom-server-typescript

Bootstrap a developer-friendly NextJS app configured with:

• TypeScript CRUD API with prisma-2 and nexus-js
• Frontend GraphQL API schema and types generation.
• styled-components AND SASS/SCSS.
• Typescript and server
• Linting with ESLint
• Storybook
• Formatting with Prettier
• Linting, typechecking and formatting on by default using husky for commit hooks
• Testing with Jest and react-testing-library

Deploy your own

Deploy the example using Vercel:

How to use

# Clone project
git clone https://github.com/prisma-cms/nextjs-nexus.git

# Install dependencies
yarn install

# Clone and edit .env file
cp .env.sample .env

# Deploy database migrations (set MySQL connection credentioals in .env file)
yarn prisma:deploy

# Build bundles
yarn build

# Start bundled project
yarn start

Development

1. Edit prisma shema in prisma/schema.prisma

2. Push change to database

yarn prisma:db:push

3. Create migration

yarn prisma:migrate:create --name migration_name

5. Generate front GraphQL schema and types

yarn generate:types

6. Start server in development mode

yarn dev

Tests

Eslint

yarn lint

Typescript types checking

yarn types

Jest unit tests

yarn test

Test code coverage

yarn test --coverage

Jest unit tests real API

Attension! For unit tests with real API started server required.

Build

1. Generate schemas if changed

yarn generate

2. Build bundles

# Build bundles
yarn build

# Start bundled project
yarn start

After this open yet another terminal and run tests

yarn test:api

Run all test

yarn test:all

Analyze bundles

yarn build:analyze

Storybook

dev

yarn storybook

build storybook

yarn build:storybook

Deploy it to the cloud with Vercel (Documentation).