Version imprimable multipages. Cliquer ici pour imprimer.

Documentation

1: Git
2: Bootstrap

2.1: Init Next.js
2.2: Init React Vite
2.3: Init NestJS

3: Libraries

3.1: Eslint (linter)
3.2: Prettier (formatter)
3.3: Rollup (bundler)

1 - Git

Initaliser un repo vide

git init
git commit --allow-empty -m 'First!'

git remote add origin git@gitlab.com:nexws/myrepo.git
git push --set-upstream origin main

Reset hard sur branche

git reset --hard origin/main
git clean -fd

2 - Bootstrap

2.1 - Init Next.js

Se placer dans le dossier qui sera la racine du projet.

Initialisation du repo

git init
git commit --allow-empty -m 'First!'

Initialisation du projet

npx create-next-app@latest . \
  --ts \
  --tailwind \
  --eslint \
  --app \
  --src-dir \
  --import-alias 'src/*' \
  --use-npm \
  --yes \
  --disable-git

git add .
git commit -m "build: npx create-next-app"

npm pkg set scripts.start="npm run dev"

git add .
git commit -m "build: start script"

Ajout de sass

npm i -D sass

git add .
git commit -m "build: install sass"

Ajout de prettier

npm i -D prettier eslint-config-prettier
curl -fsSL https://devdocs.nex.ws/files/prettier/.prettierrc -o ./.prettierrc

## Edit eslint.config.mjs to add prettier config
npx prettier -w eslint.config.mjs
perl -0777 -i -pe '
m{eslint-config-prettier/flat} or s/(import\s+nextTs[^\n]*\n)/$1import eslintConfigPrettier from \x27eslint-config-prettier\/flat\x27\n/;
 /eslintConfigPrettier\s*,/ or s/(\n\]\)\s*\n\s*\nexport\s+default)/\n  eslintConfigPrettier,\n$1/;
' eslint.config.mjs
npx prettier -w eslint.config.mjs

git add .
git commit -m "build: install prettier"

Si la commande perl échoue

Se référer à la documentation officielle : GitHub eslint-config-prettier #installation

Run prettier

npx prettier -w .

git add .
git commit -m "build: run prettier"

Ajout de njb

Setup du .npmrc, installation de @njb/corejs.

[ -f .npmrc ] && printf '\n' >> .npmrc
printf '%s\n%s\n' \
  '@njb:registry=https://gitlab.com/api/v4/packages/npm/' \
  '//gitlab.com/api/v4/packages/npm/:_authToken=${NJB_NPM_TOKEN}' >> .npmrc
npm i @njb/corejs

git add .
git commit -m "build: install @njb/corejs"

Spoiler: fichier .npmrc

@njb:registry=https://gitlab.com/api/v4/packages/npm/
//gitlab.com/api/v4/packages/npm/:_authToken=${NJB_NPM_TOKEN}

2.2 - Init React Vite

Se placer dans le dossier qui sera la racine du projet.

Initialisation du repo

git init
git commit --allow-empty -m 'First!'

Initialisation du projet

npm create vite@latest . -- \
  --template react-ts \
  --no-interactive
npm i

git add .
git commit -m "build: npm create vite@latest"

npm pkg set scripts.start="npm run dev"

git add .
git commit -m "build: start script"

mv eslint.config.js eslint.config.mjs

git add .
git commit -m "build: rename eslint.config.mjs"

Ajout de sass

npm i -D sass

git add .
git commit -m "build: install sass"

Ajout de prettier

npm i -D prettier eslint-config-prettier
curl -fsSL https://devdocs.nex.ws/files/prettier/.prettierrc -o ./.prettierrc

## Edit eslint.config.mjs to add prettier config
npx prettier -w eslint.config.mjs
perl -0777 -i -pe '
m{eslint-config-prettier/flat} or s/(import\s+nextTs[^\n]*\n)/$1import eslintConfigPrettier from \x27eslint-config-prettier\/flat\x27\n/;
 /eslintConfigPrettier\s*,/ or s/(\n\]\)\s*\n\s*\nexport\s+default)/\n  eslintConfigPrettier,\n$1/;
' eslint.config.mjs
npx prettier -w eslint.config.mjs

git add .
git commit -m "build: install prettier"

Si la commande perl échoue

Se référer à la documentation officielle : GitHub eslint-config-prettier #installation

Run prettier

npx prettier -w .

git add .
git commit -m "build: run prettier"

Ajout de njb

Setup du .npmrc, installation de @njb/corejs.

[ -f .npmrc ] && printf '\n' >> .npmrc
printf '%s\n%s\n' \
  '@njb:registry=https://gitlab.com/api/v4/packages/npm/' \
  '//gitlab.com/api/v4/packages/npm/:_authToken=${NJB_NPM_TOKEN}' >> .npmrc
npm i @njb/corejs

git add .
git commit -m "build: install @njb/corejs"

Spoiler: fichier .npmrc

@njb:registry=https://gitlab.com/api/v4/packages/npm/
//gitlab.com/api/v4/packages/npm/:_authToken=${NJB_NPM_TOKEN}

Permettre le link de lib react

Ajouter à vite.config.ts, dans la function defineConfig :

  resolve: {
    dedupe: ['react', 'react-dom', 'react/jsx-runtime', 'react/jsx-dev-runtime'],
  },

git add .
git commit -m "build: fix react lib link"

2.3 - Init NestJS

Se placer dans le dossier qui sera la racine du projet.

Initialisation du repo

git init
git commit --allow-empty -m 'First!'

(source : https://docs.nestjs.com/first-steps)

Initialisation du projet

npm i -g @nestjs/cli
nest new \
  --directory . \
  --package-manager npm \
  --strict

git add .
git commit -m "build: nest new"

npm pkg set scripts.start="npm run dev"
npm pkg set scripts.dev="nest start --watch"

git add .
git commit -m "build: start script"

Prettier

curl -fsSL https://devdocs.nex.ws/files/prettier/.prettierrc -o ./.prettierrc

git add .
git commit -m "build: prettier config"

npx prettier -w .

git add .
git commit -m "build: run prettier"

Njb Nestia

[ -f .npmrc ] && printf '\n' >> .npmrc
printf '%s\n%s\n' \
  '@njb:registry=https://gitlab.com/api/v4/packages/npm/' \
  '//gitlab.com/api/v4/packages/npm/:_authToken=${NJB_NPM_TOKEN}' >> .npmrc
npm i @njb/nestia -D
npx njb-nestia setup

git add .
git commit -m "build: install @njb/nestia"

(source : https://gitlab.com/njb/njb-nestia)

3 - Libraries

3.1 - Eslint (linter)

Installation dans un projet

Installer et configurer prettier :

npm i -D prettier
curl -fsSL https://devdocs.nex.ws/files/prettier/.prettierrc -o ./.prettierrc

Configuration recommandée

{
  "arrowParens": "avoid",
  "bracketSameLine": true,
  "printWidth": 120,
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all"
}

3.2 - Prettier (formatter)

Installation dans un projet

Installer et configurer prettier :

npm i -D prettier
curl -fsSL https://devdocs.nex.ws/files/prettier/.prettierrc -o ./.prettierrc

Configuration recommandée

{
  "arrowParens": "avoid",
  "bracketSameLine": true,
  "printWidth": 120,
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all"
}

3.3 - Rollup (bundler)

Le web propose un certain nombre de bundlers : webpack, esbuild, rollup, vite, turbopack.
Vite utilise esbuild en dev, et rollup en prod.

Les cas de figure :

App Next.js : Soit turbopack (par défaut), soit webpack
App React Vite : Vite (esbuild en dev, rollup en prod ; rolldown pour tout en mode expérimental)
Lib (node_module) : rollup

Rollup est un bundler (comme webpack), sauf qu’il ne sert pas

Pour une lib (un node_module)

Voilà un fichier de config rollup de base :

rollup.config.mjs

import typescript from '@njb/rollup/plugin-typescript'
import nodeResolve from '@njb/rollup/plugin-node-resolve'
import tsconfigPaths from '@njb/rollup/plugin-tsconfig-paths'
import { output_esm, output_cjs, external_dependencies } from '@njb/rollup/util'

/** @type {import('rollup').RollupOptions} */
export default {
  input: ['src/index.ts'],
  output: [output_esm(), output_cjs()],
  external: external_dependencies(),
  plugins: [
    nodeResolve({ extensions: ['.js', '.ts'] }),
    typescript({ tsconfig: './tsconfig.rollup.json', declaration: false }),
    tsconfigPaths(),
  ],
}

Pour une lib react

Il faut ajouter un plugin pour préserver les directives (i.e. 'use client') :

import preserveDirectives from 'rollup-plugin-preserve-directives';

...
  plugins: [
    ...
    preserveDirectives(),
  ],
  ...
  onwarn(warning, warn) {
    if (
      warning.code === 'MODULE_LEVEL_DIRECTIVE' &&
      (warning.message.includes('"use client"') ||
        warning.message.includes('"use server"'))
    )
      return;
    warn(warning);
  }
...