Nextjs Boilerplate is a template that comes with the necessary preconfiguration for a profesional react project.
 |
 |
 |
 |
|---|
 |
 |
 |
 |
|---|
 |
 |
|---|
git init
npx cli-gitignore
SELECT node
npm i -g gitmoji-clinpm init -y
git add .
gitmoji -cecho ""> README.MDyarn add next react react-domrun these commands to add in scripts of package.json
npm pkg set scripts.dev="next"
npm pkg set scripts.build="next build"
npm pkg set scripts.start="next start"create file index.tsx and create a first component to test that everything is OK
touch index.tsx && mkdir pages && mv index.tsx $_npx license MIT
install license? › yesyarn add -D --exact prettier
npm pkg set scripts.prettier="node_modules/.bin/prettier -w \"**/*.{ts,tsx}\""
echo {}> .prettierrc && echo {}> .prettierignoreAdd this config to .prettierrc
{
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": true,
"quoteProps": "as-needed",
"jsxSingleQuote": false,
"trailingComma": "all",
"bracketSpacing": false,
"bracketSameLine": true,
"arrowParens": "avoid"
}Add this config to .prettierignore
**/node_modules/*
dist
yarn.lock
.nextrun this command to add in scripts of package.json
npm pkg set scripts.format="prettier --write ."npm pkg set scripts.lint="next lint"
yarn lint
SELECT Strict (Recommended)
npx eslint --init- How would you like to use ESLint? › To check syntax, find problems, and enforce code style
- What type of modules does your project use? › JavaScript modules (import/export)
- Which framework does your project use? › React
- Does your project use TypeScript? › Yes
- Where does your code run? › Browser
- How would you like to define a style for your project? › Use a popular style guide
- Which style guide do you want to follow? › Standard
- What format do you want your config file to be in? › JSON
Check that you have the following dependencies installed:
eslint-plugin-react@latest
eslint-config-standard-with-typescript@latest
@typescript-eslint/eslint-plugin@^5.0.0
eslint@^8.0.1
eslint-plugin-import@^2.25.2
eslint-plugin-n@^15.0.0
eslint-plugin-promise@^6.0.0
typescript@*
- Would you like to install them now? › Yes
- Which package manager do you want to use? › yarnInstall this plugin for coexistence between Eslint and Prettier
yarn add -D eslint-config-prettierAdd or replace in the .eslintrc file the following configuration
"extends": [
"next/core-web-vitals",
"eslint-config-prettier"
],
...
"settings": {
"react": {
"version": "detect"
}
}run this command to update typescript
yarn add -D typescriptAdd this config in .eslintrc
"parserOptions": {
"project": ["./tsconfig.json"]
}Add or replace in tsconfig.json
"target": "ES2021"
"lib": ["ES2021"]
"strict": true
"isolatedModules": true,
"strictNullChecks": trueyarn add jest
npm pkg set scripts.test="jest"
yarn test --init- Would you like to use Typescript for the configuration file? › yes
- Choose the test environment that will be used for testing › node
- Do you want Jest to add coverage reports? yes
- Which provider should be used to instrument code for coverage? › babel
- Automatically clear mock calls, instances, contexts and results before every test? › yesRun this commmad to add all the necessary dependecies
yarn add -D @testing-library/react @testing-library/jest-dom @testing-library/user-event identity-obj-proxy ts-node typescript jest-environment-jsdom eslint eslint-plugin-jest @types/jestAdd to jest.config.ts
import nextJest from 'next/jest'
const createJestCofig = nextJest({dir: '.'})
const customJestConfig = {
testEnvironment: 'jsdom',
clearMocks: true,
moduleDirectories: ['node_modules', 'src'],
setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
coverageDirectory: 'coverage',
testPathIgnorePatterns: [],
collectCoverageFrom: [
'<rootDir>/pages/**/*.(tsx|ts)',
'!<rootDir>/pages/**/*.test.(tsx|ts)'
],
collectCoverage: true,
coverageReporters: ['lcov', 'text-summary']
}
module.exports = createJestCofig(customJestConfig)Create file and add to setupTests.ts this import
echo {}> setupTests.tsimport '@testing-library/jest-dom/extend-expect';Create image
echo ""> docker-compose.yamlAdd this config in docker-compose.yaml
version: "3"
services:
sonarqube:
image: sonarqube:8.2-community
expose:
- 9000
ports:
- "127.0.0.1:9000:9000"
networks:
- sonarnet
environment:
- SONARQUBE_JDBC_URL=jdbc:postgresql:https://db:5432/sonar
- SONARQUBE_JDBC_USERNAME=sonar
- SONARQUBE_JDBC_PASSWORD=sonar
volumes:
- sonarqube_conff:/opt/sonarqube/conf
- sonarqube_dataa:/opt/sonarqube/data
- sonarqube_extensionss:/opt/sonarqube/extensions
- sonarqube_bundled-pluginss:/opt/sonarqube/lib/bundled-plugins
deploy:
resources:
limits:
cpus: '0.001'
memory: 500M
reservations:
cpus: '0.0001'
memory: 200M
db:
image: postgres
networks:
- sonarnet
environment:
- POSTGRES_USER=sonar
- POSTGRES_PASSWORD=sonar
volumes:
- postgresqll:/var/lib/postgresql
- postgresql_dataa:/var/lib/postgresql/data
networks:
sonarnet:
volumes:
sonarqube_conff:
sonarqube_dataa:
sonarqube_extensionss:
sonarqube_bundled-pluginss:
postgresqll:
postgresql_dataa:Run this command to mount the image
docker-compose up -dyarn add -D jest-sonar-reporterAdd to jest.config.ts
"testResultsProcessor": "jest-sonar-reporter",Add to .gitignore
.scannerwork
test-report.xml