└── README.md


/README.md:
--------------------------------------------------------------------------------
  1 | Setting up an Express backend with ESLint, Prettier, Husky, and lint-staged is crucial for code quality and efficiency. ESLint catches errors and enforces coding standards, Prettier ensures consistent formatting, and Husky with lint-staged prevents issues from entering the codebase. This setup saves time, enhances collaboration, and promotes clean, error-free code.
  2 | 
  3 | ## Lets setup Express backend with `eslint` `prettier` `husky` and `lint-staged`
  4 | 
  5 | ### 1. Initialize the project:
  6 | 
  7 | ```typescript
  8 | npm init
  9 | ```
 10 | 
 11 | ### 2. Install Typescript:
 12 | 
 13 | ```typescript
 14 | yarn add -D typescript
 15 | npm install typescript --save-dev
 16 | ```
 17 | 
 18 | ### 3. Install Express, Mongoose, and Cors:
 19 | 
 20 | ```typescript
 21 | yarn add express mongoose cors
 22 | npm install express mongoose cors
 23 | ```
 24 | 
 25 | ### 4. Install TypeScript type definitions for Express:
 26 | 
 27 | ```typescript
 28 | yarn add -D @types/express
 29 | npm install @types/express --save-dev
 30 | ```
 31 | 
 32 | ### 5. Install TypeScript type definitions for Cors:
 33 | 
 34 | ```typescript
 35 | yarn add -D @types/cors
 36 | npm install @types/cors --save-dev
 37 | ```
 38 | 
 39 | ### 6. Install TypeScript ESLint parser:
 40 | 
 41 | ```typescript
 42 | yarn add -D @typescript-eslint/parser
 43 | npm install @typescript-eslint/parser --save-dev
 44 | ```
 45 | 
 46 | ### 7. Configure TypeScript:
 47 | 
 48 | - Run `tsc --init`
 49 | - Update `tsconfig.json`:
 50 | 
 51 | ```json
 52 |   "rootDir": "./src",
 53 |   "outDir": "./dist",
 54 | ```
 55 | 
 56 | ### 8. Install dotenv:
 57 | 
 58 | ```typescript
 59 | yarn add dotenv
 60 | npm install dotenv
 61 | ```
 62 | 
 63 | ### 9. Create a .env file at the root of your project directory to set your environment variables. Inside the .env file, add the necessary secrets and configurations. For example:
 64 | 
 65 | ```
 66 | NODE_ENV=development
 67 | PORT=5000
 68 | DATABASE_URL=your-database-url //Replace your-database-url with the actual URL for your database.
 69 | ```
 70 | 
 71 | ### 10. Create a .gitignore file at the root of your project directory to ignore unnecessary files when pushing to GitHub. Add the following content to the .gitignore file:
 72 | 
 73 | ```
 74 | dist
 75 | node_modules
 76 | .env
 77 | ```
 78 | 
 79 | ### 11. Create a `config` folder and an `index.ts` file inside it.
 80 | 
 81 | - Import necessary modules:
 82 | 
 83 | ```typescript
 84 | import dotenv from "dotenv";
 85 | import path from "path";
 86 | ```
 87 | 
 88 | - Load environment variables:
 89 | 
 90 | ```typescript
 91 | dotenv.config({
 92 |   path: path.join(process.cwd(), ".env"),
 93 | });
 94 | ```
 95 | 
 96 | - Export configuration:
 97 | 
 98 | ```typescript
 99 | export default {
100 |   port: process.env.PORT,
101 |   database_url: process.env.DATABASE_URL,
102 | };
103 | ```
104 | 
105 | ### 12. Create two files inside the `src` folder:
106 | 
107 | - `app.ts` (Express application setup)
108 | 
109 | ```typescript
110 | //app.ts
111 | import express, { Application, Request, Response } from "express";
112 | const app: Application = express();
113 | import cors from "cors";
114 | 
115 | app.use(cors());
116 | 
117 | // parser
118 | app.use(express.json());
119 | app.use(express.urlencoded({ extended: true }));
120 | 
121 | app.get("/", (req: Request, res: Response) => {
122 |   res.send("Hello World!");
123 | });
124 | 
125 | export default app;
126 | ```
127 | 
128 | - `server.ts` (Database connection setup)
129 | 
130 | ```typescript
131 | import mongoose from "mongoose";
132 | import app from "./app";
133 | import config from "./config";
134 | 
135 | async function main() {
136 |   await mongoose.connect(config.database_url as string);
137 |   console.log("Connected to MongoDB");
138 |   app.listen(config.port, () => {
139 |     console.log(`Server running at port ${config.port}`);
140 |   });
141 | }
142 | main();
143 | ```
144 | 
145 | ### 13. Install `ts-node-dev`:
146 | 
147 | ```typescript
148 | yarn add -D ts-node-dev
149 | npm install ts-node-dev --save-dev
150 | ```
151 | 
152 | ### 14. Update the `package.json` scripts:
153 | 
154 | ```json
155 | "start": "ts-node-dev --respawn --transpile-only src/server.ts",
156 | ```
157 | 
158 | ### 15. Start the server:
159 | 
160 | ```typescript
161 | yarn start
162 | npm start
163 | ```
164 | 
165 | ## Setup ESLint, Prettier, Husky, and lint-staged
166 | 
167 | ### 1. Install the ESLint and Prettier extensions in your code editor.
168 | 
169 | ### 2. Update `tsconfig.json`:
170 | 
171 | ```json
172 | "include": ["src"],
173 | "exclude": ["node_modules"]
174 | ```
175 | 
176 | ### 3. Install ESLint and TypeScript ESLint plugin:
177 | 
178 | ```typescript
179 | yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
180 | npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
181 | ```
182 | 
183 | ### 4. Create `.eslintrc` file with the following content:
184 | 
185 | ```json
186 | {
187 |   "parser": "@typescript-eslint/parser",
188 |   "parserOptions": {
189 |     "ecmaVersion": "latest",
190 |     "sourceType": "module"
191 |   },
192 |   "plugins": ["@typescript-eslint"],
193 |   "extends": [
194 |     "eslint:recommended",
195 |     "plugin:@typescript-eslint/recommended",
196 |     "prettier"
197 |   ],
198 |   "rules": {
199 |     "no-unused-vars": "error",
200 |     "no-console": "warn",
201 |     "no-undef": "error",
202 |     "no-unused-expressions": "error",
203 |     "no-unreachable": "error",
204 |     "@typescript-eslint/consistent-type-definitions": ["error", "type"]
205 |   },
206 |   "env": {
207 |     "browser": true,
208 |     "node": true,
209 |     "es2021": true
210 |   }
211 | }
212 | ```
213 | 
214 | ### 5. Add the following in package.json scripts:
215 | 
216 | ```json
217 | "lint:check": "eslint --ignore-path .eslintignore --ext .js,.ts .",
218 | "lint:fix": "eslint . --fix"
219 | ```
220 | 
221 | ### 6. Create .eslintignore file with the following content:
222 | 
223 | ```
224 | dist
225 | node_modules
226 | .env
227 | ```
228 | 
229 | ### 7. Install Prettier:
230 | 
231 | ```typescript
232 | yarn add -D prettier
233 | npm install prettier --save-dev
234 | ```
235 | 
236 | ### 8. Create `.prettierrc` file with the following content:
237 | 
238 | ```json
239 | {
240 |   "semi": true,
241 |   "singleQuote": true,
242 |   "arrowParens": "avoid"
243 | }
244 | ```
245 | 
246 | ### 9. Add the following in package.json scripts:
247 | 
248 | ```json
249 | "prettier:check": "prettier --ignore-path .gitignore --write \"**/*.+(js|ts|json)\"",
250 | "prettier:fix": "prettier --write .",
251 | ```
252 | 
253 | ### 10. Update settings.json in VS Code:
254 | 
255 | ```json
256 | "editor.defaultFormatter": "esbenp.prettier-vscode",
257 | "editor.formatOnSave": true
258 | ```
259 | 
260 | ### 11. Install eslint-config-prettier:
261 | 
262 | ```typescript
263 | yarn add -D eslint-config-prettier
264 | npm install eslint-config-prettier --save-dev
265 | ```
266 | 
267 | ### 12. Install Husky:
268 | 
269 | ```typescript
270 | yarn add husky --dev
271 | npm install husky --save-dev
272 | ```
273 | 
274 | ### 13. Install lint-staged:
275 | 
276 | ```typescript
277 | yarn add -D lint-staged
278 | npm install lint-staged --save-dev
279 | ```
280 | 
281 | ### 14. Update package.json scripts:
282 | 
283 | ```json
284 | "scripts": {
285 |   //....other scripts
286 |   "lint-prettier": "yarn lint:check && yarn prettier:check"
287 | },
288 | "lint-staged": {
289 |   "src/**/*.ts": "yarn lint-prettier"
290 | }
291 | ```
292 | 
293 | ### 15. Update package.json scripts:
294 | 
295 | ```typescript
296 | yarn husky add .husky/pre-commit "yarn lint-staged"
297 | npx husky add .husky/pre-commit "yarn lint-staged"
298 | ```
299 | 
300 | ### Congratulations!🎉 You have successfully set up your Express backend project with ESLint, Prettier, Husky, and lint-staged.😃
301 | 


--------------------------------------------------------------------------------