Project Name

Description

A brief description of the project.

Getting Started

These instructions will help to set up ESLint, Prettier, husky, and lint-staged for your TypeScript project.

Prerequisites

Make sure you have the following dependencies installed globally:

Node.js
npm or yarn

Installation

Project setup with yarn:

 npm init -y

Install these dependencies

yarn add express mongoose eslint dotenv cors

Install these as devDependencies

yarn add -D typescript ts-node-dev @types/express @types/cors @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier prettier lint-staged husky

Add a tsconfig.json for typescript configuration
```
tsc --init
```
- Set the rootDir and outDir as src and dist folder

Make a file called .eslintrc(For using ESlint)

Go to ESlint-Prettier Blog
Use the following config into .eslintrc file

{
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 13,
"sourceType": "module"
},
"plugins": ["@typescript-eslint"],
"extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
"rules": {
"@typescript-eslint/no-unused-vars": "error",
"@typescript-eslint/consistent-type-definitions": ["error", "type"]
},
"env": {
"browser": true,
"es2021": true
}
}

Use the following code at the top of the tsconfig.js to tell typescript which files to compile and which files to skip

"include": ["src"], // which files to compile
"exclude": ["node_modules"], // which files to skip

Make a file named .eslintignore to ignore the following files from linting
```
dist
node_modules
.env
```
Make a file called .prettierrc(For using Prettier)
- Go to ESlint-Prettier Blog
- Use the following config into .prettierrc file
```
{
"semi": false,
"singleQuote": true,
"arrowParens": "avoid"
}
```
- In VS Code settings.json add this
```
"[typescript]": {
 "editor.defaultFormatter": "esbenp.prettier-vscode",
}
```
Go to Husky GitHub
- Make .husky folder with shell with the following command
```
yarn husky install
```
In the package.json add the following scripts
```
"dev": "ts-node-dev --respawn --transpile-only src/server.ts",
"start": "node ./dist/server.js",
"lint:check": "eslint --ignore-path .eslintignore --ext .js,.ts .",
"lint:fix": "lint . --fix",
"prettier:format": "prettier --ignore-path .gitignore --write \"**/*.+(js|ts|json)\"",
"lint-prettier": "yarn lint:check && yarn prettier:format",
```
- yarn dev: Will compile the typescript code and run the server
- yarn start: Will compile the javascript output
- yarn lint:check: Will check if there is any problem with the code
- yarn lint:fix: Will perform linting and attempt to fix the issues it can
- yarn prettier:format: Will format the code
- yarn lint-prettier: Will check if there is any problem with the code then it will also format the code
Go to Lint Staged
- Add these code into the package.json down the script
```
"lint-staged": {
"src/**/*.ts": "yarn lint-prettier"
}
```
- Here "yarn lint-prettier" used to automatically check the linting problem and formatting problem while committing into git.
Make a hook for husky pre-commit
```
yarn husky add .husky/pre-commit "yarn lint-staged"
```
- Here yarn lint-staged will target the package.json lint-staged
Navigate .husky > pre-commit and add
```
yarn lint-staged
```

The setup of typescript, eslint, prettier, husky and lint-staged completed here

Server setup-------------->

For using the .env

Make a folder named config
Make a file named index.ts

Into the index.ts

import dotenv from 'dotenv'
import path from 'path'
/* This code is using the `dotenv` package to load environment variables from a `.env` file located in
the root directory of the project. process.cwd() means the root directory */
dotenv.config({
path: path.join(process.cwd(), '.env'),
})

export default {
port: process.env.PORT || 8000,
database_string: process.env.DATABASE_STRING,
}

Make a file named app.ts add the following code

import express, { Application, Request, Response } from 'express'
import cors from 'cors'

const app: Application = express()

app.use(cors())
app.use(express.json())
app.use(express.urlencoded({ extended: true }))

// Testing route
app.get('/', (req: Request, res: Response) => {
res.send('Route is working!')
})

export default app

Make a file named server.ts and add this following code

import mongoose from 'mongoose'
import app from './app'
import config from './config'

async function databaseConnection() {
try {
    await mongoose.connect(config.database_string as string)
    console.log('Database connected successfully')

    app.listen(config.port, () => {
    console.log(`Server is listening on port ${config.port}`)
    })
} catch (error) {
    console.log('Error while connecting database: ', error)
}
}

databaseConnection()

Done ------------------------------>

sakib-xrz/backend-boilerplate