Added and applied ESLint and Prettier (#429)

* Added and applied ESLint and Prettier

* Added and applied ESLint and Prettier to BE

* switch ci/cd to npm

* Add pre-commit hooks and linting CI

* Rename lint step to lint

---------

Co-authored-by: Franco Reyes <[email protected]>

.githooks/post-commit

@@ -0,0 +1,2 @@
+#!/bin/sh
+git update-index -g

.githooks/pre-commit

@@ -0,0 +1,16 @@
+#!/bin/sh
+FILES=$(git diff --cached --name-only --diff-filter=ACMR | sed 's| |\\ |g')
+[ -z "$FILES" ] && exit 0
+
+# Prettify all frontend files
+FE_FILES=$(echo "$FILES" | grep "^frontend/.*\.[tj]sx\?$")
+echo "$FE_FILES" | xargs frontend/node_modules/.bin/prettier --config frontend/.prettierrc --ignore-unknown --write
+
+# Prettify all backend files
+BE_FILES=$(echo "$FILES" | grep "^backend/.*\.[tj]sx\?$")
+echo "$BE_FILES" | xargs backend/node_modules/.bin/prettier --config backend/.prettierrc --ignore-unknown --write
+
+# Add back the modified/prettified files to staging
+echo "$FILES" | xargs git add
+
+exit 0

.github/workflows/ci.yml

@@ -12,22 +12,22 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        component: [frontend]
+        component: [frontend, backend]
         include:
           - component: frontend
-            command: pnpm i --frozen-lockfile
+            command: npm ci
+          - component: backend
+            command: npm ci
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
           node-version: "16"
-      - name: Install pnpm
-        run: npm i -g pnpm
       - name: Install dependencies
         run: ${{ matrix.command }}
         working-directory: ${{ matrix.component }}
-      - name: Build
-        run: pnpm lint
+      - name: Lint
+        run: npm run lint
         working-directory: ${{ matrix.component }}
   build:
     name: "Build (${{ matrix.component }})"
@@ -38,16 +38,14 @@ jobs:
         component: [frontend, backend]
         include:
           - component: frontend
-            command: pnpm i --frozen-lockfile
+            command: npm ci
           - component: backend
-            command: pnpm i --frozen-lockfile
+            command: npm ci
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
           node-version: "16"
-      - name: Install pnpm
-        run: npm i -g pnpm
       - name: Install dependencies
         run: ${{ matrix.command }}
         working-directory: ${{ matrix.component }}
@@ -56,5 +54,5 @@ jobs:
         run: echo "NEXT_PUBLIC_STAGING=true" >> .env
         working-directory: frontend
       - name: Build
-        run: pnpm build
+        run: npm run build
         working-directory: ${{ matrix.component }}

backend.dockerfile

@@ -1,25 +1,23 @@
 FROM node:20.11-alpine as builder
-RUN npm i -g pnpm
 
 # Set the current working directory inside the container
 WORKDIR /app/backend
 
 # Install dependencies
-COPY backend/package.json backend/pnpm-lock.yaml ./
-RUN pnpm install
+COPY backend/package.json backend/package-lock.json ./
+RUN npm ci
 
 # Copy backend and common source code
 COPY /backend ./
 COPY /common ../common
 
-RUN pnpm run build
+RUN npm run build
 
 FROM node:20.11-alpine as runner
-RUN npm i -g pnpm
 WORKDIR /app
 
-COPY backend/package.json backend/pnpm-lock.yaml ./
-RUN pnpm install --production
+COPY backend/package.json backend/package-lock.json ./
+RUN npm ci --production
 
 COPY --from=builder /app/backend/dist ./
 

backend/.eslintrc.json

@@ -0,0 +1,21 @@
+{
+  "env": {
+    "es2021": true,
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint", "simple-import-sort"],
+  "rules": {
+    "simple-import-sort/imports": "error",
+    "simple-import-sort/exports": "error"
+  }
+}

backend/.gitignore

@@ -1,5 +1,3 @@
 dist/
 
-# Non PNPM lockfiles
-package-lock.json
-yarn.lock
+pnpm-lock.yaml

.prettierrc → backend/.prettierrc

@@ -5,7 +5,7 @@
   "singleQuote": false,
   "trailingComma": "es5",
   "bracketSpacing": true,
-  "jsxBacketSameLine": false,
+  "bracketSameLine": false,
   "semi": true,
   "arrowParens": "always"
 }

backend/README.md

@@ -7,11 +7,13 @@ The Freerooms backend is an Express.js server.
 The package manager used is [pnpm](https://pnpm.io/), you will need to install it if you haven't already.
 
 Once installed, you can run the following command to install dependencies:
+
 ```bash
 pnpm install
 ```
 
 ## Usage Guide
+
 You can run the backend with the following command:
 
 ```bash

backend/nodemon.json

@@ -1,7 +1,7 @@
 {
-    "ignore": ["database.json"],
-    "execMap": {
-        "ts": "ts-node -r tsconfig-paths/register",
-        "js": "node -r ts-node/register/transpile-only -r tsconfig-paths/register"
-    }
-}
+  "ignore": ["database.json"],
+  "execMap": {
+    "ts": "ts-node -r tsconfig-paths/register",
+    "js": "node -r ts-node/register/transpile-only -r tsconfig-paths/register"
+  }
+}