@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
-
Edit prisma shema in prisma/schema.prisma
-
Push change to database
yarn prisma:db:push
- Create migration
yarn prisma:migrate:create --name migration_name
- Generate front GraphQL schema and types
yarn generate:types
- 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
- Generate schemas if changed
yarn generate
- 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).