Description

Installation

$ nvm use|| nvm install$ yarn

import{Compiler,WebpackPluginInstanceasPlugin}from'webpack';

CREATEDATABASEexample;ALTERUSER'user'@'localhost' IDENTIFIED WITH mysql_native_password BY'password';GRANT ALLON example.* TO'user'@'localhost';

MYSQL_HOST=localhostMYSQL_PORT=3306MYSQL_USERNAME=userMYSQL_PASSWORD=passwordMYSQL_DATABASE=example

Running the app

# development$ yarn start# watch mode$ yarn start:dev# production mode$ yarn start:prod

Test

# unit tests$ yarntest# e2e tests$ yarn test:e2e# test coverage$ yarn test:cov

Setup

$ nvm use node

NestJs and Fastify

$ npm i -g @nestjs/cli$ nest new myapp$cd myapp$ yarn add @nestjs/platform-fastify

import{NestFactory}from'@nestjs/core';import{FastifyAdapter,NestFastifyApplication,}from'@nestjs/platform-fastify';import{AppModule}from'./app.module';asyncfunctionbootstrap(){constapp=awaitNestFactory.create<NestFastifyApplication>(AppModule,newFastifyAdapter());awaitapp.listen(3000);}bootstrap();

NextJs

$ yarn add next react react-dom$ yarn add -D @types/react-dom @types/react$ mkdir -p src/client/pages

{"compilerOptions": {"jsx":"preserve"  },"include": ["src/**/*.ts"]}

{"resolutions": {"webpack":"^5.4.0"  }}

import{Compiler,WebpackPluginInstanceasPlugin}from'webpack';

{"include": ["src/**/*","test/**/*"],"exclude": ["src/client/.next"]}

Eslint and Prettier

$ yarn add -D eslint-plugin-react eslint-import-resolver-typescript eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-import eslint-plugin-react-hooks

module.exports={root:true,env:{browser:true,node:true,es2020:true,jest:true,},parser:'@typescript-eslint/parser',// Specifies the ESLint parserparserOptions:{ecmaVersion:2020,sourceType:'module',ecmaFeatures:{jsx:true,},},plugins:['@emotion','@typescript-eslint','react','react-hooks','prettier',],extends:['airbnb','plugin:@typescript-eslint/recommended','plugin:react/recommended','plugin:import/errors','plugin:import/warnings','plugin:import/typescript','prettier','prettier/@typescript-eslint','prettier/react','plugin:prettier/recommended',// Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.],rules:{'@typescript-eslint/no-unused-vars':['error',{vars:'all',args:'after-used',ignoreRestSiblings:false,},],'@typescript-eslint/no-explicit-any':0,'@typescript-eslint/explicit-function-return-type':0,'@typescript-eslint/no-namespace':0,'@typescript-eslint/explicit-module-boundary-types':0,'import/extensions':[1,{extensions:['.js','.jsx','.ts','.tsx']}],'import/no-extraneous-dependencies':['error',{devDependencies:true,},],'react/jsx-filename-extension':[1,{extensions:['.js','.jsx','.ts','.tsx']},],'react/react-in-jsx-scope':0,'react/jsx-first-prop-new-line':0,'react/prop-types':0,'react/jsx-props-no-spreading':[2,{custom:'ignore'}],'jsx-a11y/anchor-is-valid':['error',{components:['Link'],specialLink:['hrefLeft','hrefRight'],aspects:['invalidHref','preferButton'],},],'prettier/prettier':2,'react-hooks/rules-of-hooks':2,'react-hooks/exhaustive-deps':2,'no-bitwise':2,'@emotion/no-vanilla':2,'@emotion/import-from-emotion':2,'@emotion/styled-import':2,},settings:{'import/resolver':{node:{extensions:['.js','.jsx','.ts','.tsx'],},typescript:{},},react:{version:'detect',// Tells eslint-plugin-react to automatically detect the version of React to use},},};

Jest

$ yarn remove ts-jest$ yarn add -D @next/env @babel/core babel-jest

{"jest": {"moduleFileExtensions": ["js","json","ts","tsx","jsx"],"globals": {"NODE_ENV":"test"    },"testRegex":".*\\.spec\\.(t|j)sx?$","transform": {"^.+\\.(t|j)sx?$":"babel-jest"    },"collectCoverageFrom": ["**/*.(t|j)sx?"],"coverageDirectory":"../coverage","coveragePathIgnorePatterns": ["/node_modules/","next.config.js",".json",".snap"    ],"testEnvironment":"node","moduleNameMapper": {"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/test/__mocks__/mocks.js","\\.(css|less|scss)$":"<rootDir>/test/__mocks__/mocks.js","^~(.*)$":"<rootDir>/src/$1"    },"snapshotSerializers": ["@emotion/jest/serializer"],"setupFiles": ["<rootDir>/test/jest.setup.js"],"setupFilesAfterEnv": ["<rootDir>/test/jest.setupAfterEnv.js"]  }}

module.exports={presets:['next/babel'],};

$ ln -sf"$(pwd)/babel.config.js""$(pwd)/src/client"

import{join}from'path';import{loadEnvConfig}from'@next/env';// to load '.env' files in testloadEnvConfig(join(__dirname,'../src/client'));

EmotionJs

$ yarn add @emotion/react$ yarn add -D @emotion/babel-plugin @emotion/eslint-plugin @emotion/jest

module.exports={presets:[['next/babel',{'preset-react':{runtime:'automatic',importSource:'@emotion/react',},},],],plugins:['@emotion/babel-plugin'],};

module.exports={// ...rules:{// ...'@emotion/no-vanilla':'error','@emotion/import-from-emotion':'error','@emotion/styled-import':'error',},// ...plugins:['@emotion',// ...],// ...};

import{matchers}from'@emotion/jest';expect.extend(matchers);

{"compilerOptions": {"jsxImportSource":"@emotion/react"  }}

Redux-Toolkit

$ yarn add react-redux @reduxjs/toolkit next-redux-wrapper$ yarn add -D @types/react-redux @types/webpack-env

TypeORM

$ yarn add @nestjs/config @nestjs/typeorm typeorm mysql# or other database driver

CREATEDATABASEexample;ALTERUSER'user'@'localhost' IDENTIFIED WITH mysql_native_password BY'password';GRANT ALLON example.* TO'user'@'localhost';

MYSQL_HOST=localhostMYSQL_PORT=3306MYSQL_USERNAME=userMYSQL_PASSWORD=passwordMYSQL_DATABASE=example

import{Module}from'@nestjs/common';import{ConfigModule,ConfigService}from'@nestjs/config';import{TypeOrmModule}from'@nestjs/typeorm';@Module({imports:[TypeOrmModule.forRootAsync({imports:[ConfigModule.forRoot({envFilePath:'.env.mysql.local',}),],useFactory:(configService:ConfigService)=>({type:'mysql',host:configService.get('MYSQL_HOST')||'localhost',port:configService.get<number>('MYSQL_PORT')||3306,username:configService.get('MYSQL_USERNAME'),password:configService.get('MYSQL_PASSWORD'),database:configService.get('MYSQL_DATABASE'),entities:[`${__dirname}/**/*.entity.{ts,js}`],synchronize:true,}),inject:[ConfigService],}),]}