peterrhodesdev / ntnp-stack

NTNP stack

NTNP stack

Next.js, Tailwind CSS, Nest.js, and PostgreSQL.

Setup

• server/.env.example:
  • copy to server/.env.development
  • delete either the DB connection options variable group (DB_USER, DB_PASSWORD, DB_HOST, DB_PORT, DB_NAME) or the DB connection string variable (DB_URL)
  • fill in the connection option for DB_PASSWORD or replace $DB_PASSWORD in the connection string
• client/src/pages/_app.tsx: edit TITLE to set the default page title and the left text in the header

Commands

# Start the client (on port 3000):
cd client
npm run dev
# Start the server (on port 5000):
cd server
npm run start:dev
# Restore the database:
cd db
./run.sh restore
# Generate models for TypeORM from database:
cd db
./run.sh generate-models

• typeorm-model-generator is used
• the models will be outputted to db/generated-models

API endpoints

# Get all
curl -X GET http://localhost:5000/examples
# Get one by id
curl -X GET http://localhost:5000/examples/{id}
# Delete
curl -X DELETE http://localhost:5000/examples/{id}
# Create
curl -X POST \
  -H "Content-Type: application/json" \
  -d '{"booleanField":true,"floatField":1.2,"integerConstrainedField":345,"numericField":6.7,"textNullableField":null,"timestamptzField":"2022-11-26T07:12:03.103Z","varcharConstrainedField":"abc"}' \
  http://localhost:5000/examples
# Update (full)
curl -X PUT \
  -H "Content-Type: application/json" \
  -d '{"booleanField":false,"floatField":-1.2,"integerConstrainedField":999,"numericField":-3.4E+2,"textNullableField":"\"\\\/","timestamptzField":"2022-11-26T07:12:03.103Z","varcharConstrainedField":"abcdef"}' \
  http://localhost:5000/examples/{id}
# Update (partial)
curl -X PATCH \
  -H "Content-Type: application/json" \
  -d '{"booleanField":false}' \
  http://localhost:5000/examples/{id}

Client setup

npx create-next-app client --ts --eslint

• delete public/vercel.svg, pages/api, styles/Home.module.css, README.md
• edit pages/index.tsx
• replace public/favicon.ico
• create custom document
• create src directory and move pages into it
• [optional] next.config.js: turn off strict mode to avoid "double-invoking" functions

Prettier

npm i -D eslint-config-prettier eslint-plugin-prettier

• .eslintrc.json: edit extends, plugins, and rules
• .prettierrc: create

Jest

npm i -D jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom

• create jest.config.js
• create jest.setup.ts (Optional: Extend Jest with custom matchers)
• package.json: add test script
• next.config.js: remove react properties used for tests
• create a __tests__/pages directory for pages tests (any files in the src/pages directory are considered routes)

Tailwind CSS

npm i -D tailwindcss postcss autoprefixer @tailwindcss/typography
npx tailwindcss init -p

• follow the guide
• [optional] @tailwindcss/typography
  • so can use the prose class
  • add prose class to src/pages/_document.tsx

class-transformer

npm i class-transformer reflect-metadata

• src/pages/_app.tsx: import reflect-metadata
• tsconfig.json: set experimentalDecorators to true

React Query

npm i react-query

• src/pages/_app.tsx: instantiate QueryClient and provide it in component tree

Other

npm i validator
npm i -D @types/validator

• validator: validate/sanitize strings
• next-transpile-modules
  • to use tree-shakeable ES imports
  • edit next.config.js
  • will also require ts-jest to be configured for tests to run

Server setup

nest new server --strict

• delete .git, README.md, src/app.controller.ts, src/app.controller.spec.ts, src/app.service.ts
• .eslintrc.js: add prettier to rules
• [optional] change test files to use .test instead of .spec
  • package.json: edit testRegex
  • tsconfig.build.json: edit exclude

Fastify

npm i @nestjs/platform-fastify

• use the FastifyAdapter

PostgreSQL / TypeORM

npm i @nestjs/typeorm typeorm typeorm-naming-strategies pg

• import TypeOrmModule
• [optional] typeorm-naming-strategies
  • so can use snake case in PostgreSQL
  • set TypeOrmModule namingStrategy to SnakeNamingStrategy

Configuration

npm i @nestjs/config
npm i -D cross-env

• create a .env file
• [optional] cross-env
  • so setting environment variables in scripts runs across platforms
  • package.json: set NODE_ENV to development for the start:dev script

Validation

npm i class-transformer class-validator @nestjs/mapped-types

• main.ts: auto validate

Other

npm i -D @golevelup/ts-jest

• @golevelup/ts-jest: create mocks for testing