Next.js, Tailwind CSS, Nest.js, and PostgreSQL.
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
- copy to
client/src/pages/_app.tsx
: editTITLE
to set the default page title and the left text in the header
# 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
# 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}
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 movepages
into it - [optional]
next.config.js
: turn off strict mode to avoid "double-invoking" functions
npm i -D eslint-config-prettier eslint-plugin-prettier
.eslintrc.json
: edit extends, plugins, and rules.prettierrc
: create
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
: addtest
scriptnext.config.js
: remove react properties used for tests- create a
__tests__/pages
directory for pages tests (any files in thesrc/pages
directory are considered routes)
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 tosrc/pages/_document.tsx
- so can use the
npm i class-transformer reflect-metadata
src/pages/_app.tsx
: importreflect-metadata
tsconfig.json
: setexperimentalDecorators
totrue
npm i react-query
src/pages/_app.tsx
: instantiateQueryClient
and provide it in component tree
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
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
: edittestRegex
tsconfig.build.json
: editexclude
npm i @nestjs/platform-fastify
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
toSnakeNamingStrategy
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
: setNODE_ENV
todevelopment
for thestart:dev
script
npm i class-transformer class-validator @nestjs/mapped-types
npm i -D @golevelup/ts-jest
- @golevelup/ts-jest: create mocks for testing