--- title: "Setting up Node.js, Express, Prettier, ESLint, and Husky application with Babel and TypeScript - Part 1" lang: "en" author: "Mohammad Abu Mattar" canonical: https://mkabumattar.com/post/setting-up-node-js-express-prettier-eslint-and-husky-application-with-babel-and-typescript-part-1 --- ![Blog post image for Setting up Node.js, Express, Prettier, ESLint, and Husky application with Babel and TypeScript - Part 1 - Setting up Node JS, Express, Prettier, ESLint and Husky Application with Babel and Typescript: Part 1.](/_astro/hero.DKzl3k6w_ZgGokB.webp) [Home](/)›[Blog](/blog)›[All Categories](/blog/categories)›[Backend Development](/blog/categories/backend-development) Blog [Prev in Backend DevelopmentSetting up Node JS, Express, MongoDB, Prettier, ESLint and Husky Application with Babel and authentication as an example](/blog/post/setting-up-node-js-express-mongodb-prettier-eslint-and-husky-application-with-babel-and-authentication-as-an-example)[Next in Backend DevelopmentThe ORM Dilemma: To Use or Not to Use](/blog/post/why-not-to-use-orm-in-nodejs) [Backend Development](/blog/categories/backend-development)[Node.js](/blog/categories/nodejs)[TypeScript](/blog/categories/typescript)[Development Setup](/blog/categories/development-setup)[JavaScript Tooling](/blog/categories/javascript-tooling) # Setting up Node.js, Express, Prettier, ESLint, and Husky application with Babel and TypeScript - Part 1 [Mohammad Abu Mattar](/authors/mohammad-abu-mattar)Published: 01 Jul 202214 Mins read12 Mins listen [Markdown for AI(opens in a new tab)](/post/setting-up-node-js-express-prettier-eslint-and-husky-application-with-babel-and-typescript-part-1/index.md "Open the plain-Markdown version of this page, for pasting into an AI tool") TL;DR Setting up Node JS, Express, Prettier, ESLint and Husky Application with Babel and Typescript: Part 1. Series [Node.js Express TypeScript Setup](/series/nodejs-express-typescript-setup)1/2 [NextSetting up JWT Authentication in TypeScript with Express, MongoDB, Babel, Prettier, ESLint, and Husky - Part 2](/blog/post/setting-up-jwt-authentication-in-typescript-with-express-mongodb-babel-prettier-eslint-and-husky-part-2) All posts in this series (2) Blog2 1. [Setting up Node.js, Express, Prettier, ESLint, and Husky application with Babel and TypeScript - Part 1You are here](/blog/post/setting-up-node-js-express-prettier-eslint-and-husky-application-with-babel-and-typescript-part-1) 2. [Setting up JWT Authentication in TypeScript with Express, MongoDB, Babel, Prettier, ESLint, and Husky - Part 2](/blog/post/setting-up-jwt-authentication-in-typescript-with-express-mongodb-babel-prettier-eslint-and-husky-part-2) ### Setting up Node.js, Express, Prettier, ESLint, and Husky application with Babel and TypeScript - Part 1 Contents [Introduction](#introduction)[What is TypeScript?](#what-is-typescript)[What is Babel?](#what-is-babel)[Project setup](#project-setup)[Engine locking](#engine-locking)[Installing and configuring TypeScript](#installing-and-configuring-typescript)[Installing and configuring Babel](#installing-and-configuring-babel)[Code formatting and quality tools](#code-formatting-and-quality-tools)[\# Installing and configuring Prettier](#-installing-and-configuring-prettier)[\# Installing and configuring ESLint](#-installing-and-configuring-eslint)[Git hooks](#git-hooks)[\# Installing and configuring Husky](#-installing-and-configuring-husky)[\# Installing and configuring Commitlint](#-installing-and-configuring-commitlint)[Create a simple Express, TypeScript and Babel application](#create-a-simple-express-typescript-and-babel-application)[Summary](#summary)[References](#references) ## [Introduction](#introduction) All code from this tutorial as a complete package is available in this [repository](https://github.com/MKAbuMattar/template-express-typescript-blueprint/tree/part1). If you find this tutorial helpful, please share it with your friends and colleagues, and make sure to star the repository. So, in this little tutorial, I’ll explain how to set up babel for a basic NodeJS Express, and typescript application so that we can write the most recent ES6 syntax in it. ## [What is TypeScript?](#what-is-typescript) [ TypeScript ](http://www.typescriptlang.org/) is a superset of JavaScript that mainly offers classes, interfaces, and optional static typing. The ability to enable IDEs to give a richer environment for seeing typical mistakes as you enter the code is one of the major advantages. - JavaScript and More: TypeScript adds additional syntax to JavaScript to support a **tighter integration with your editor**. Catch errors early in your editor. - A Result You Can Trust: TypeScript code converts to JavaScript, which **runs anywhere JavaScript runs**: In a browser, on Node.js or Deno and in your apps. - Safety at Scale: TypeScript understands JavaScript and uses **type inference to give you great tooling** without additional code. ## [What is Babel?](#what-is-babel) [ Babel ](https://babeljs.io/) is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Here are the main things Babel can do for you: - Transform syntax - Polyfill features that are missing in your target environment (through a third-party polyfill such as core-js) - Source code transformations (codemods) ## [Project setup](#project-setup) We’ll begin by creating a new directory called `template-express-typescript-blueprint` and then we’ll create a new package.json file. We’re going to be using yarn for this example, but you could just as easily use NPM if you choose, but yarn is a lot more convenient. Terminal window ``` 1mkdir template-express-typescript-blueprint2cd template-express-typescript-blueprint3yarn init -y ``` Now we’ll connect to our new project with git. Terminal window ``` 1git init ``` A new Git repository is created with the git init command. It may be used to start a fresh, empty repository or convert an existing, unversioned project to a Git repository. This is often the first command you’ll perform in a new project because the majority of additional Git commands are not accessible outside of an initialized repository. Now we’ll connect to our new project with github, creating a new empty repository, after we’ve created a new directory called `template-express-typescript-blueprint`. Terminal window ``` 1echo "# Setting up Node JS, Express, Prettier, ESLint and Husky Application with Babel and Typescript: Part 1" >> README.md2git init3git add README.md4git commit -m "ci: initial commit"5git branch -M main6git remote add origin git@github.com:/template-express-typescript-blueprint.git7git push -u origin main ``` ### [Engine locking](#engine-locking) The same Node engine and package management that we use should be available to all developers working on this project. We create two new files to achieve that: - `.nvmrc`: Will disclose to other project users the Node version that is being used. - `.npmrc`: reveals to other project users the package manager being used. `.nvmrc` is a file that is used to specify the Node version that is being used. Terminal window ``` 1touch .nvmrc ``` `.nvmrc` ``` 1lts/fermium ``` `.npmrc` is a file that is used to specify the package manager that is being used. Terminal window ``` 1touch .npmrc ``` `.npmrc` ``` 1engine-strict=true2save-exact = true3tag-version-prefix=""4strict-peer-dependencies = false5auto-install-peers = true6lockfile = true ``` Now we’ll add few things to our `package.json` file. `package.json` ``` 1{2 "name": "template-express-typescript-blueprint",3 "version": "0.0.0",4 "description": "",5 "keywords": [],6 "main": "index.js",7 "license": "MIT",8 "author": {9 "name": "Mohammad Abu Mattar",10 "email": "mohammad.abumattar@outlook.com",11 "url": "https://mkabumattar.github.io/"12 },13 "homepage": "https://github.com/MKAbuMattar/template-express-typescript-blueprint#readme",14 "repository": {15 "type": "git",16 "url": "git+https://github.com/MKAbuMattar/template-express-typescript-blueprint.git"17 },18 "bugs": {19 "url": "https://github.com/MKAbuMattar/template-express-typescript-blueprint/issues"20 }21} ``` Notably, the usage of `engine-strict` said nothing about yarn in particular; we handle that in `packages.json`: open `packages.json` add the engines: ``` 1{2 ...,3 "engines": {4 "node": ">=14.0.0",5 "yarn": ">=1.20.0",6 "npm": "please-use-yarn"7 }8} ``` ### [Installing and configuring TypeScript](#installing-and-configuring-typescript) TypeScript is available as a package in the yarn registry. We can install it with the following command to install it as a dev dependency: Terminal window ``` 1yarn add -D typescript @types/node ``` Now that TypeScript is installed in your project, we can initialize the configuration file with the following command: Terminal window ``` 1yarn tsc --init ``` Now we can start configuring the typescript configuration file. `tsconfig.json` ``` 1{2 "compilerOptions": {3 "target": "es2016",4 "module": "commonjs",5 "rootDir": "./src",6 "moduleResolution": "node",7 "baseUrl": "./src",8 "declaration": true,9 "emitDeclarationOnly": true,10 "outDir": "./build",11 "esModuleInterop": true,12 "forceConsistentCasingInFileNames": true,13 "strict": true,14 "skipLibCheck": true15 }16} ``` ### [Installing and configuring Babel](#installing-and-configuring-babel) To set up babel in the project, we must first install three main packages. - `babel-core`: The primary package for running any babel setup or configuration is babel-core. - `babel-node`: Any version of ES may be converted to ordinary JavaScript using the babel-node library. - `babel-preset-env`: This package gives us access to forthcoming functionalities that `node.js` does not yet comprehend. New features are constantly being developed, thus it will probably take some time for NodeJS to incorporate them. Terminal window ``` 1yarn add -D @babel/cli @babel/core @babel/node @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime @babel/preset-env @babel/preset-typescript @babel/runtime babel-core babel-plugin-module-resolver babel-plugin-source-map-support ``` After that, we need to create a file called `.babelrc` in the project’s root directory, and we paste the following block of code there. Terminal window ``` 1touch .babelrc ``` `.babelrc` ``` 1{2 "presets": ["@babel/preset-env", "@babel/preset-typescript"],3 "plugins": [4 "@babel/plugin-proposal-class-properties",5 "@babel/plugin-transform-runtime",6 "source-map-support"7 ],8 "sourceMaps": "inline"9} ``` Add the following line to the `package.json` file to compile, and build the code with babel: ``` 1{2 "scripts": {3 "build:compile": "npx babel src --extensions .ts --out-dir build --source-maps",4 "build:types": "tsc"5 }6} ``` Now we need to add `.gitignore` file to the project, and add the following line to it: The `.gitignore` file tells Git which files to ignore when committing your project to the GitHub repository. gitignore is located in the root directory of your repo. Terminal window ``` 1touch .gitignore ``` `.gitignore` ``` 1# Logs2logs3*.log4npm-debug.log*5yarn-debug.log*6yarn-error.log*7lerna-debug.log*8.pnpm-debug.log*9 10# Diagnostic reports (https://nodejs.org/api/report.html)11report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json12 13# Runtime data14pids15*.pid16*.seed17*.pid.lock18 19# Directory for instrumented libs generated by jscoverage/JSCover20lib-cov21 22# Coverage directory used by tools like istanbul23coverage24*.lcov25 26# nyc test coverage27.nyc_output28 29# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)30.grunt31 32# Bower dependency directory (https://bower.io/)33bower_components34 35# node-waf configuration36.lock-wscript37 38# Compiled binary addons (https://nodejs.org/api/addons.html)39build40build/Release41 42# Dependency directories43node_modules/44jspm_packages/45 46# Snowpack dependency directory (https://snowpack.dev/)47web_modules/48 49# TypeScript cache50*.tsbuildinfo51 52# Optional npm cache directory53.npm54 55# Optional eslint cache56.eslintcache57 58# Optional stylelint cache59.stylelintcache60 61# Microbundle cache62.rpt2_cache/63.rts2_cache_cjs/64.rts2_cache_es/65.rts2_cache_umd/66 67# Optional REPL history68.node_repl_history69 70# Output of 'npm pack'71*.tgz72 73# Yarn Integrity file74.yarn-integrity75 76# dotenv environment variable files77.env78.env.development.local79.env.test.local80.env.production.local81.env.local82 83# parcel-bundler cache (https://parceljs.org/)84.cache85.parcel-cache86 87# vuepress build output88.vuepress/dist89 90# vuepress v2.x temp and cache directory91.temp92.cache93 94# Docusaurus cache and generated files95.docusaurus96 97# Serverless directories98.serverless/99 100# FuseBox cache101.fusebox/102 103# DynamoDB Local files104.dynamodb/105 106# TernJS port file107.tern-port108 109# Stores VSCode versions used for testing VSCode extensions110.vscode-test111 112# yarn v2113.yarn/cache114.yarn/unplugged115.yarn/build-state.yml116.yarn/install-state.gz117.pnp.* ``` ### [Code formatting and quality tools](#code-formatting-and-quality-tools) We will be using two tools to establish a standard that every project participant follows, so the coding style and the basic best practices stay consistent: - [ Prettier ](https://prettier.io/): A tool that will help us to format our code consistently. - [ ESLint ](https://eslint.org/): A tool that will help us to enforce a consistent coding style. #### [Installing and configuring Prettier](#installing-and-configuring-prettier) Prettier will handle the automated file formatting for us. Add it to the project right now. Terminal window ``` 1yarn add -D prettier ``` Additionally, I advise getting the [Prettier VS Code extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) so that you may avoid using the command line tool and have VS Code take care of the file formatting for you. It’s still required to include it here even when it’s installed and set up in your project since VSCode will use your project’s settings. We’ll create two files in the root: - `.prettierrc`: This file will contain the configuration for prettier. - `.prettierignore`: This file will contain the list of files that should be ignored by prettier. `.prettierrc` ``` 1{2 "trailingComma": "all",3 "printWidth": 80,4 "tabWidth": 2,5 "useTabs": false,6 "semi": false,7 "singleQuote": true8} ``` `.prettierignore` ``` 1node_modules2build ``` I’ve listed the folders in that file that I don’t want Prettier to waste any time working on. If you’d want to disregard specific file types in groups, you may also use patterns like \*.html. Now we add a new script to `package.json` so we can run Prettier: `package.json` ``` 1"scripts: {2 ...,3 "prettier": "prettier --write \"src/**/*.ts\"",4 "prettier:check": "prettier --check \"src/**/*.ts\"",5} ``` You can now run `yarn prettier` to format all files in the project, or `yarn prettier:check` to check if all files are formatted correctly. Terminal window ``` 1yarn prettier:check2yarn prettier ``` to automatically format, repair, and save all files in your project that you haven’t ignored. My formatter updated around 7 files by default. The source control tab on the left of VS Code has a list of altered files where you may find them. #### [Installing and configuring ESLint](#installing-and-configuring-eslint) We’ll begin with ESLint, which is a tool that will help us to enforce a consistent coding style, at first need to install the dependencies. Terminal window ``` 1yarn add -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-prettier eslint-plugin-promise ``` We’ll create two files in the root: - `.eslintrc`: This file will contain the configuration for ESLint. - `.eslintignore`: This file will contain the list of files that should be ignored by ESLint. `.eslintrc` ``` 1{2 "parser": "@typescript-eslint/parser",3 "parserOptions": {4 "ecmaVersion": 12,5 "sourceType": "module"6 },7 "plugins": ["@typescript-eslint"],8 "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],9 "rules": {10 "@typescript-eslint/no-unused-vars": "error",11 "@typescript-eslint/consistent-type-definitions": ["error", "interface"]12 },13 "env": {14 "browser": true,15 "es2021": true16 }17} ``` `.eslintignore` ``` 1node_modules2build ``` Now we add a new script to `package.json` so we can run ESLint: `package.json` ``` 1"scripts: {2 ...,3 "lint": "eslint --ignore-path .eslintignore \"src/**/*.ts\" --fix",4 "lint:check": "eslint --ignore-path .eslintignore \"src/**/*.ts\"",5} ``` You can test out your config by running: You can now run `yarn lint` to format all files in the project, or `yarn lint:check` to check if all files are formatted correctly. Terminal window ``` 1yarn lint:check2yarn lint ``` ### [Git hooks](#git-hooks) Before moving on to component development, there is one more section on configuration. If you want to expand on this project in the future, especially with a team of other developers, keep in mind that you’ll want it to be as stable as possible. To get it right from the beginning is time well spent. We’re going to use a program called [Husky](https://husky.run/). #### [Installing and configuring Husky](#installing-and-configuring-husky) Husky is a tool for executing scripts at various git stages, such as add, commit, push, etc. We would like to be able to specify requirements and, provided our project is of acceptable quality, only enable actions like commit and push to proceed if our code satisfies those requirements. To install Husky run Terminal window ``` 1yarn add husky2 3yarn husky install ``` A `.husky` directory will be created in your project by the second command. Your hooks will be located here. As it is meant for other developers as well as yourself, make sure this directory is included in your code repository. Add the following script to your `package.json` file: `package.json` ``` 1"scripts: {2 ...,3 "prepare": "husky install"4} ``` This makes Husky install automatically when other developers run the project. To create a hook run: Terminal window ``` 1npx husky add .husky/pre-commit "yarn lint" ``` The aforementioned states that the `yarn lint` script must run and be successful before our commit may be successful. Success here refers to the absence of mistakes. You will be able to get warnings (remember in the ESLint config a setting of 1 is a warning and 2 is an error in case you want to adjust settings). We’re going to add another one: Terminal window ``` 1npx husky add .husky/pre-push "yarn build" ``` This makes sure that we can’t push to the remote repository until our code has built correctly. That sounds like a very acceptable requirement, don’t you think? Make the change, try to push, and see for yourself. #### [Installing and configuring Commitlint](#installing-and-configuring-commitlint) Finally, we’ll add one more tool. We have been using a uniform format for all of our commit messages so far, so let’s make sure everyone on the team sticks to it (including ourselves). For our commit messages, we may add a linter. Terminal window ``` 1yarn add -D @commitlint/config-conventional @commitlint/cli ``` We will configure it using a set of common defaults, but since I occasionally forget what prefixes are available, I like to explicitly provide that list in a `commitlint.config.js` file: Terminal window ``` 1touch commitlint.config.js ``` `commitlint.config.js` ``` 1// build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)2// ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)3// docs: Documentation only changes4// feat: A new feature5// fix: A bug fix6// perf: A code change that improves performance7// refactor: A code change that neither fixes a bug nor adds a feature8// style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)9// test: Adding missing tests or correcting existing tests10module.exports = {11 extends: ['@commitlint/config-conventional'],12 rules: {13 'body-leading-blank': [1, 'always'],14 'body-max-line-length': [2, 'always', 100],15 'footer-leading-blank': [1, 'always'],16 'footer-max-line-length': [2, 'always', 100],17 'header-max-length': [2, 'always', 100],18 'scope-case': [2, 'always', 'lower-case'],19 'subject-case': [20 2,21 'never',22 ['sentence-case', 'start-case', 'pascal-case', 'upper-case'],23 ],24 'subject-empty': [2, 'never'],25 'subject-full-stop': [2, 'never', '.'],26 'type-case': [2, 'always', 'lower-case'],27 'type-empty': [2, 'never'],28 'type-enum': [29 2,30 'always',31 [32 'build',33 'chore',34 'ci',35 'docs',36 'feat',37 'fix',38 'perf',39 'refactor',40 'revert',41 'style',42 'test',43 'translation',44 'security',45 'changeset',46 ],47 ],48 },49}; ``` Afterward, use Husky to enable commitlint by using: Terminal window ``` 1npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"' ``` now push your changes to the remote repository and you’ll be able to commit with a valid commit message. Terminal window ``` 1git add . ``` Terminal window ``` 1git commit -m "ci: eslint | prettier | husky" ``` Terminal window ``` 1╭─mkabumattar@mkabumattar in repo: template-express-typescript-blueprint on  main [+] is  v0.0.0 via  v18.4.0 took 41ms2╰─λ git commit -m "ci: eslint | prettier | husky"3yarn run v1.22.184$ eslint --ignore-path .eslintignore "src/**/*.ts" --fix5Done in 1.31s.6[main 7fbc14f] ci: eslint | prettier | husky717 files changed, 4484 insertions(+)8create mode 100644 .babelrc9create mode 100644 .eslintignore10create mode 100644 .eslintrc11create mode 100644 .gitattributes12create mode 100644 .gitignore13create mode 100755 .husky/commit-msg14create mode 100755 .husky/pre-commit15create mode 100755 .husky/pre-push16create mode 100644 .npmrc17create mode 100644 .nvmrc18create mode 100644 .prettierignore19create mode 100644 .prettierrc20create mode 100644 commitlint.config.js21create mode 100644 package.json22create mode 100644 src/index.ts23create mode 100644 tsconfig.json24create mode 100644 yarn.lock ``` Terminal window ``` 1git push -u origin main ``` Terminal window ``` 1╭─mkabumattar@mkabumattar in repo: template-express-typescript-blueprint on  main [⇡1] is v0.0.0 via  v18.4.0 took 2s2╰─λ git push -u origin main3yarn run v1.22.184$ yarn build:compile && yarn build:types5$ npx babel src --extensions .ts --out-dir build --source-maps6Successfully compiled 1 file with Babel (360ms).7$ tsc8Done in 2.63s.9Enumerating objects: 21, done.10Counting objects: 100% (21/21), done.11Delta compression using up to 4 threads12Compressing objects: 100% (16/16), done.13Writing objects: 100% (20/20), 79.42 KiB | 9.93 MiB/s, done.14Total 20 (delta 1), reused 0 (delta 0), pack-reused 015remote: Resolving deltas: 100% (1/1), done.16To github.com:MKAbuMattar/template-express-typescript-blueprint.git171583ab9..7fbc14f main -> main18branch 'main' set up to track 'origin/main'. ``` ## [Create a simple Express, TypeScript and Babel application](#create-a-simple-express-typescript-and-babel-application) Create a file structure like this: ``` 1├── src2│   ├── index.ts3│   └── bin4│   └── www.ts5├────── constants6│   └── api.constant.ts7│   └── http.code.constant.ts8│   └── http.reason.constant.ts9│   └── message.constant.ts10├────── interfaces11│   └── controller.interface.ts12├────── middlewares13│   └── error.middleware.ts14├────── utils15│   └── logger.util.ts16│   └── exceptions17│   └── http.exception.ts18├── .babelrc19├── .eslintignore20├── .eslintrc21├── .gitattributes22├── .gitignore23├── .npmrc24├── .nvmrc25├── .prettierignore26├── .prettierrc27├── commitlint.config.js28├── package.json29├── README.md30├── tsconfig.json31├── yarn.lock ``` start to add express and typescript dependencies: Terminal window ``` 1yarn add express ``` Terminal window ``` 1yarn add -D @types/express ``` Now we’ll add a new package: - `compression`: Your `Node.js` app’s main file contains middleware for `compression`. GZIP, which supports a variety of `compression` techniques, will then be enabled. Your JSON response and any static file replies will be smaller as a result. Terminal window ``` 1yarn add compression ``` - `cookie-parser`: Your `Node.js` app’s main file contains middleware for `cookie-parser`. This middleware will parse the cookies in the request and set them as properties of the request object. Terminal window ``` 1yarn add cookie-parser ``` - `core-js`: Your `Node.js` app’s main file contains middleware for `core-js`. This middleware will add the necessary polyfills to your application. Terminal window ``` 1yarn add core-js ``` - `cors`: Your `Node.js` app’s main file contains middleware for `cors`. This middleware will add the necessary headers to your application. Terminal window ``` 1yarn add cors ``` - `helmet`: Your `Node.js` app’s main file contains middleware for `helmet`. This middleware will add security headers to your application. Terminal window ``` 1yarn add helmet ``` - `regenerator-runtime`: Your `Node.js` app’s main file contains middleware for `regenerator-runtime`. This middleware will add the necessary polyfills to your application. Terminal window ``` 1yarn add regenerator-runtime ``` after that we need to add the type for the dependencies: Terminal window ``` 1yarn add -D @types/compression @types/cookie-parser @types/core-js @types/cors @types/regenerator-runtime ``` now we’ll start with create constants and we’ll add new things after that: `api.constant.ts` ``` 1class Api {2 public static readonly ROOT: string = '/';3 4 public static readonly API: string = '/api';5}6export default Api; ``` `http.code.constant.ts` ``` 1class HttpCode {2 public static readonly CONTINUE: number = 100;3 4 public static readonly SWITCHING_PROTOCOLS: number = 101;5 6 public static readonly PROCESSING: number = 102;7 8 public static readonly OK: number = 200;9 10 public static readonly CREATED: number = 201;11 12 public static readonly ACCEPTED: number = 202;13 14 public static readonly NON_AUTHORITATIVE_INFORMATION: number = 203;15 16 public static readonly NO_CONTENT: number = 204;17 18 public static readonly RESET_CONTENT: number = 205;19 20 public static readonly PARTIAL_CONTENT: number = 206;21 22 public static readonly MULTI_STATUS: number = 207;23 24 public static readonly ALREADY_REPORTED: number = 208;25 26 public static readonly IM_USED: number = 226;27 28 public static readonly MULTIPLE_CHOICES: number = 300;29 30 public static readonly MOVED_PERMANENTLY: number = 301;31 32 public static readonly MOVED_TEMPORARILY: number = 302;33 34 public static readonly SEE_OTHER: number = 303;35 36 public static readonly NOT_MODIFIED: number = 304;37 38 public static readonly USE_PROXY: number = 305;39 40 public static readonly SWITCH_PROXY: number = 306;41 42 public static readonly TEMPORARY_REDIRECT: number = 307;43 44 public static readonly BAD_REQUEST: number = 400;45 46 public static readonly UNAUTHORIZED: number = 401;47 48 public static readonly PAYMENT_REQUIRED: number = 402;49 50 public static readonly FORBIDDEN: number = 403;51 52 public static readonly NOT_FOUND: number = 404;53 54 public static readonly METHOD_NOT_ALLOWED: number = 405;55 56 public static readonly NOT_ACCEPTABLE: number = 406;57 58 public static readonly PROXY_AUTHENTICATION_REQUIRED: number = 407;59 60 public static readonly REQUEST_TIMEOUT: number = 408;61 62 public static readonly CONFLICT: number = 409;63 64 public static readonly GONE: number = 410;65 66 public static readonly LENGTH_REQUIRED: number = 411;67 68 public static readonly PRECONDITION_FAILED: number = 412;69 70 public static readonly PAYLOAD_TOO_LARGE: number = 413;71 72 public static readonly REQUEST_URI_TOO_LONG: number = 414;73 74 public static readonly UNSUPPORTED_MEDIA_TYPE: number = 415;75 76 public static readonly REQUESTED_RANGE_NOT_SATISFIABLE: number = 416;77 78 public static readonly EXPECTATION_FAILED: number = 417;79 80 public static readonly IM_A_TEAPOT: number = 418;81 82 public static readonly METHOD_FAILURE: number = 420;83 84 public static readonly MISDIRECTED_REQUEST: number = 421;85 86 public static readonly UNPROCESSABLE_ENTITY: number = 422;87 88 public static readonly LOCKED: number = 423;89 90 public static readonly FAILED_DEPENDENCY: number = 424;91 92 public static readonly UPGRADE_REQUIRED: number = 426;93 94 public static readonly PRECONDITION_REQUIRED: number = 428;95 96 public static readonly TOO_MANY_REQUESTS: number = 429;97 98 public static readonly REQUEST_HEADER_FIELDS_TOO_LARGE: number = 431;99 100 public static readonly UNAVAILABLE_FOR_LEGAL_REASONS: number = 451;101 102 public static readonly INTERNAL_SERVER_ERROR: number = 500;103 104 public static readonly NOT_IMPLEMENTED: number = 501;105 106 public static readonly BAD_GATEWAY: number = 502;107 108 public static readonly SERVICE_UNAVAILABLE: number = 503;109 110 public static readonly GATEWAY_TIMEOUT: number = 504;111 112 public static readonly HTTP_VERSION_NOT_SUPPORTED: number = 505;113 114 public static readonly VARIANT_ALSO_NEGOTIATES: number = 506;115 116 public static readonly INSUFFICIENT_STORAGE: number = 507;117 118 public static readonly LOOP_DETECTED: number = 508;119 120 public static readonly NOT_EXTENDED: number = 510;121 122 public static readonly NETWORK_AUTHENTICATION_REQUIRED: number = 511;123 124 public static readonly NETWORK_CONNECT_TIMEOUT_ERROR: number = 599;125}126 127export default HttpCode; ``` `http.reason.constant.ts` ``` 1class HttpReason {2 public static readonly CONTINUE: string = 'Continue';3 4 public static readonly SWITCHING_PROTOCOLS: string = 'Switching Protocols';5 6 public static readonly PROCESSING: string = 'Processing';7 8 public static readonly OK: string = 'OK';9 10 public static readonly CREATED: string = 'Created';11 12 public static readonly ACCEPTED: string = 'Accepted';13 14 public static readonly NON_AUTHORITATIVE_INFORMATION: string =15 'Non-Authoritative Information';16 17 public static readonly NO_CONTENT: string = 'No Content';18 19 public static readonly RESET_CONTENT: string = 'Reset Content';20 21 public static readonly PARTIAL_CONTENT: string = 'Partial Content';22 23 public static readonly MULTI_STATUS: string = 'Multi-Status';24 25 public static readonly ALREADY_REPORTED: string = 'Already Reported';26 27 public static readonly IM_USED: string = 'IM Used';28 29 public static readonly MULTIPLE_CHOICES: string = 'Multiple Choices';30 31 public static readonly MOVED_PERMANENTLY: string = 'Moved Permanently';32 33 public static readonly MOVED_TEMPORARILY: string = 'Moved Temporarily';34 35 public static readonly SEE_OTHER: string = 'See Other';36 37 public static readonly NOT_MODIFIED: string = 'Not Modified';38 39 public static readonly USE_PROXY: string = 'Use Proxy';40 41 public static readonly SWITCH_PROXY: string = 'Switch Proxy';42 43 public static readonly TEMPORARY_REDIRECT: string = 'Temporary Redirect';44 45 public static readonly BAD_REQUEST: string = 'Bad Request';46 47 public static readonly UNAUTHORIZED: string = 'Unauthorized';48 49 public static readonly PAYMENT_REQUIRED: string = 'Payment Required';50 51 public static readonly FORBIDDEN: string = 'Forbidden';52 53 public static readonly NOT_FOUND: string = 'Not Found';54 55 public static readonly METHOD_NOT_ALLOWED: string = 'Method Not Allowed';56 57 public static readonly NOT_ACCEPTABLE: string = 'Not Acceptable';58 59 public static readonly PROXY_AUTHENTICATION_REQUIRED: string =60 'Proxy Authentication Required';61 62 public static readonly REQUEST_TIMEOUT: string = 'Request Timeout';63 64 public static readonly CONFLICT: string = 'Conflict';65 66 public static readonly GONE: string = 'Gone';67 68 public static readonly LENGTH_REQUIRED: string = 'Length Required';69 70 public static readonly PRECONDITION_FAILED: string = 'Precondition Failed';71 72 public static readonly PAYLOAD_TOO_LARGE: string = 'Payload Too Large';73 74 public static readonly REQUEST_URI_TOO_LONG: string = 'Request URI Too Long';75 76 public static readonly UNSUPPORTED_MEDIA_TYPE: string =77 'Unsupported Media Type';78 79 public static readonly REQUESTED_RANGE_NOT_SATISFIABLE: string =80 'Requested Range Not Satisfiable';81 82 public static readonly EXPECTATION_FAILED: string = 'Expectation Failed';83 84 public static readonly IM_A_TEAPOT: string = "I'm a teapot";85 86 public static readonly METHOD_FAILURE: string = 'Method Failure';87 88 public static readonly MISDIRECTED_REQUEST: string = 'Misdirected Request';89 90 public static readonly UNPROCESSABLE_ENTITY: string = 'Unprocessable Entity';91 92 public static readonly LOCKED: string = 'Locked';93 94 public static readonly FAILED_DEPENDENCY: string = 'Failed Dependency';95 96 public static readonly UPGRADE_REQUIRED: string = 'Upgrade Required';97 98 public static readonly PRECONDITION_REQUIRED: string =99 'Precondition Required';100 101 public static readonly TOO_MANY_REQUESTS: string = 'Too Many Requests';102 103 public static readonly REQUEST_HEADER_FIELDS_TOO_LARGE: string =104 'Request Header Fields Too Large';105 106 public static readonly UNAVAILABLE_FOR_LEGAL_REASONS: string =107 'Unavailable For Legal Reasons';108 109 public static readonly INTERNAL_SERVER_ERROR: string =110 'Internal Server Error';111 112 public static readonly NOT_IMPLEMENTED: string = 'Not Implemented';113 114 public static readonly BAD_GATEWAY: string = 'Bad Gateway';115 116 public static readonly SERVICE_UNAVAILABLE: string = 'Service Unavailable';117 118 public static readonly GATEWAY_TIMEOUT: string = 'Gateway Timeout';119 120 public static readonly HTTP_VERSION_NOT_SUPPORTED: string =121 'HTTP Version Not Supported';122 123 public static readonly VARIANT_ALSO_NEGOTIATES: string =124 'Variant Also Negotiates';125 126 public static readonly INSUFFICIENT_STORAGE: string = 'Insufficient Storage';127 128 public static readonly LOOP_DETECTED: string = 'Loop Detected';129 130 public static readonly NOT_EXTENDED: string = 'Not Extended';131 132 public static readonly NETWORK_AUTHENTICATION_REQUIRED: string =133 'Network Authentication Required';134 135 public static readonly NETWORK_CONNECT_TIMEOUT_ERROR: string =136 'Network Connect Timeout Error';137}138 139export default HttpReason; ``` `message.constant.ts` ``` 1class Message {2 public static readonly API_WORKING: string = 'API is working';3 4 public static readonly SOMETHING_WENT_WRONG: string = 'Something went wrong';5}6export default Message; ``` `utils/exception/http.exception.ts` ``` 1class HttpException extends Error {2 public statusCode: number;3 4 public statusMsg: string;5 6 public msg: string;7 8 constructor(statusCode: number, statusMsg: string, msg: any) {9 super(msg);10 this.statusCode = statusCode;11 this.statusMsg = statusMsg;12 this.msg = msg;13 }14}15 16export default HttpException; ``` `error.middleware.ts` ``` 1// http constant2import ConstantHttpCode from '@/constants/http.code.constant';3import ConstantHttpReason from '@/constants/http.reason.constant';4// message constant5import ConstantMessage from '@/constants/message.constant';6import HttpException from '@/utils/exceptions/http.exception';7import {Request, Response, NextFunction} from 'express';8 9const errorMiddleware = (10 error: HttpException,11 _req: Request,12 res: Response,13 next: NextFunction,14): Response | void => {15 try {16 const statusCode =17 error.statusCode || ConstantHttpCode.INTERNAL_SERVER_ERROR;18 const statusMsg =19 error.statusMsg || ConstantHttpReason.INTERNAL_SERVER_ERROR;20 const msg = error.msg || ConstantMessage.SOMETHING_WENT_WRONG;21 22 return res.status(statusCode).send({23 status: {24 code: statusCode,25 msg: statusMsg,26 },27 msg: msg,28 });29 } catch (err) {30 return next(err);31 }32};33 34export default errorMiddleware; ``` `controller.interface.ts` ``` 1import {Router} from 'express';2 3interface Controller {4 path: string;5 router: Router;6}7 8export default Controller; ``` `index.ts` ``` 1// api constant2import ConstantAPI from './constants/api.constant';3// http constant4import ConstantHttpCode from './constants/http.code.constant';5import ConstantHttpReason from './constants/http.reason.constant';6// message constant7import ConstantMessage from './constants/message.constant';8import Controller from './interfaces/controller.interface';9import ErrorMiddleware from './middlewares/error.middleware';10import HttpException from './utils/exceptions/http.exception';11import compression from 'compression';12import cookieParser from 'cookie-parser';13import cors from 'cors';14import express, {Application, Request, Response, NextFunction} from 'express';15import helmet from 'helmet';16 17class App {18 public app: Application;19 20 constructor(controllers: Controller[]) {21 this.app = express();22 23 this.initialiseConfig();24 this.initialiseRoutes();25 this.initialiseControllers(controllers);26 this.initialiseErrorHandling();27 }28 29 private initialiseConfig(): void {30 this.app.use(express.json());31 this.app.use(express.urlencoded({extended: true}));32 this.app.use(cookieParser());33 this.app.use(compression());34 this.app.use(cors());35 this.app.use(helmet());36 }37 38 private initialiseRoutes(): void {39 this.app.get(40 ConstantAPI.ROOT,41 (_req: Request, res: Response, next: NextFunction) => {42 try {43 return res.status(ConstantHttpCode.OK).json({44 status: {45 code: ConstantHttpCode.OK,46 msg: ConstantHttpReason.OK,47 },48 msg: ConstantMessage.API_WORKING,49 });50 } catch (err: any) {51 return next(52 new HttpException(53 ConstantHttpCode.INTERNAL_SERVER_ERROR,54 ConstantHttpReason.INTERNAL_SERVER_ERROR,55 err.message,56 ),57 );58 }59 },60 );61 }62 63 private initialiseControllers(controllers: Controller[]): void {64 controllers.forEach((controller: Controller) => {65 this.app.use(ConstantAPI.API, controller.router);66 });67 }68 69 private initialiseErrorHandling(): void {70 this.app.use(ErrorMiddleware);71 }72}73 74export default App; ``` `www.ts` ``` 1#!/usr/bin/env ts-node2import App from '..';3import 'core-js/stable';4import http from 'http';5import 'regenerator-runtime/runtime';6 7// controllers8 9const {app} = new App([]);10 11/**12 * Normalize a port into a number, string, or false.13 */14const normalizePort = (val: any) => {15 const port = parseInt(val, 10);16 17 if (Number.isNaN(port)) {18 // named pipe19 return val;20 }21 22 if (port >= 0) {23 // port number24 return port;25 }26 27 return false;28};29 30const port = normalizePort('3030');31app.set('port', port);32 33/**34 * Create HTTP server.35 */36const server = http.createServer(app);37 38/**39 * Event listener for HTTP server "error" event.40 */41const onError = (error: any) => {42 if (error.syscall !== 'listen') {43 throw error;44 }45 46 const bind = typeof port === 'string' ? `Pipe ${port}` : `Port ${port}`;47 48 // handle specific listen errors with friendly messages49 switch (error.code) {50 case 'EACCES':51 console.error(`${bind} requires elevated privileges`);52 process.exit(1);53 break;54 case 'EADDRINUSE':55 console.error(`${bind} is already in use`);56 process.exit(1);57 break;58 default:59 throw error;60 }61};62 63/**64 * Event listener for HTTP server "listening" event.65 */66const onListening = () => {67 const addr = server.address();68 const bind = typeof addr === 'string' ? `pipe ${addr}` : `port ${addr?.port}`;69 console.info(`Listening on ${bind}`);70};71 72server.listen(port);73server.on('error', onError);74server.on('listening', onListening); ``` To run the app and keep the server in step with our changes, we need to add a new dependency. Concurrently is a tool to run multiple tasks at the same time. Terminal window ``` 1yarn add -D concurrently ``` Then, we’ll add the following command to scripts section of package.json: ``` 1"scripts": {2 "start": "node build/bin/www.js",3 "clean": "rm -rf build",4 "build": "yarn clean && concurrently yarn:build:*",5 "build:compile": "npx babel src --extensions .ts --out-dir build --source-maps",6 "build:types": "tsc",7 "dev": "concurrently yarn:dev:* --kill-others \"nodemon --exec node build/bin/www.js\"",8 "dev:compile": "npx babel src --extensions .ts --out-dir build --source-maps --watch",9 "dev:types": "tsc --watch",10 ...,11} ``` Now you can run the application with yarn start or yarn dev, and you can also run the application with yarn build to create a production version. Terminal window ``` 1yarn dev2 3yarn start4 5yarn build ``` ## [Summary](#summary) Finally, after compilation, we need to deploy the compiled version to the NodeJS production server. All code from this tutorial as a complete package is available in this [repository](https://github.com/MKAbuMattar/template-express-typescript-blueprint/tree/part1). ## [References](#references) - [TypeScript Official Website](https://www.typescriptlang.org/) - [Babel Official Website](https://babeljs.io/) - [Node.js Official Website](https://nodejs.org/) - [Express.js Official Website](https://expressjs.com/) - [ESLint Official Website](https://eslint.org/) - [Prettier Official Website](https://prettier.io/) - [Husky Official Website](https://typicode.github.io/husky/) - [Commitlint Official Documentation](https://commitlint.js.org/) - [Yarn Package Manager](https://yarnpkg.com/) - [NVM (Node Version Manager) GitHub](https://github.com/nvm-sh/nvm) - [`.npmrc` Documentation](https://docs.npmjs.com/cli/v7/configuring-npm/npmrc) - [Concurrently (npm package)](https://www.npmjs.com/package/concurrently) - [Core-js (GitHub)](https://github.com/zloirock/core-js) - [Helmet (npm package)](https://www.npmjs.com/package/helmet) - [Compression (npm package)](https://www.npmjs.com/package/compression) Was this useful? ## Tags [#Node.js](/blog/tags/nodejs)[#Express.js](/blog/tags/expressjs)[#TypeScript](/blog/tags/typescript)[#Babel](/blog/tags/babel)[#ESLint](/blog/tags/eslint)[#Prettier](/blog/tags/prettier)[#Husky](/blog/tags/husky)[#Development Workflow](/blog/tags/development-workflow)[#Project Setup](/blog/tags/project-setup)[#JavaScript Backend](/blog/tags/javascript-backend)[#Git Hooks](/blog/tags/git-hooks)[#Code Quality](/blog/tags/code-quality) ## Share [Facebook](https://facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmkabumattar.com%2Fblog%2Fpost%2Fsetting-up-node-js-express-prettier-eslint-and-husky-application-with-babel-and-typescript-part-1 "Share on Facebook")[Twitter](https://twitter.com/intent/tweet/?text=Setting%20up%20Node.js%2C%20Express%2C%20Prettier%2C%20ESLint%2C%20and%20Husky%20application%20with%20Babel%20and%20TypeScript%20-%20Part%201&url=https%3A%2F%2Fmkabumattar.com%2Fblog%2Fpost%2Fsetting-up-node-js-express-prettier-eslint-and-husky-application-with-babel-and-typescript-part-1 "Share on Twitter")[LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fmkabumattar.com%2Fblog%2Fpost%2Fsetting-up-node-js-express-prettier-eslint-and-husky-application-with-babel-and-typescript-part-1&title=Setting%20up%20Node.js%2C%20Express%2C%20Prettier%2C%20ESLint%2C%20and%20Husky%20application%20with%20Babel%20and%20TypeScript%20-%20Part%201&summary=Setting%20up%20Node%20JS%2C%20Express%2C%20Prettier%2C%20ESLint%20and%20Husky%20Application%20with%20Babel%20and%20Typescript%3A%20Part%201.&source=https://mkabumattar.com "Share on LinkedIn")[WhatsApp](https://wa.me/?text=Setting%20up%20Node.js%2C%20Express%2C%20Prettier%2C%20ESLint%2C%20and%20Husky%20application%20with%20Babel%20and%20TypeScript%20-%20Part%201%20https%3A%2F%2Fmkabumattar.com%2Fblog%2Fpost%2Fsetting-up-node-js-express-prettier-eslint-and-husky-application-with-babel-and-typescript-part-1 "Share on WhatsApp")[Telegram](https://t.me/share/url?url=https%3A%2F%2Fmkabumattar.com%2Fblog%2Fpost%2Fsetting-up-node-js-express-prettier-eslint-and-husky-application-with-babel-and-typescript-part-1&text=Setting%20up%20Node.js%2C%20Express%2C%20Prettier%2C%20ESLint%2C%20and%20Husky%20application%20with%20Babel%20and%20TypeScript%20-%20Part%201 "Share on Telegram")[Reddit](https://www.reddit.com/submit?url=https%3A%2F%2Fmkabumattar.com%2Fblog%2Fpost%2Fsetting-up-node-js-express-prettier-eslint-and-husky-application-with-babel-and-typescript-part-1&title=Setting%20up%20Node.js%2C%20Express%2C%20Prettier%2C%20ESLint%2C%20and%20Husky%20application%20with%20Babel%20and%20TypeScript%20-%20Part%201 "Share on Reddit")[Hacker News](http://news.ycombinator.com/submitlink?u=https%3A%2F%2Fmkabumattar.com%2Fblog%2Fpost%2Fsetting-up-node-js-express-prettier-eslint-and-husky-application-with-babel-and-typescript-part-1&t=Setting%20up%20Node.js%2C%20Express%2C%20Prettier%2C%20ESLint%2C%20and%20Husky%20application%20with%20Babel%20and%20TypeScript%20-%20Part%201 "Share on Hacker News")[Pinterest](https://pinterest.com/pin/create/button/?url=https%3A%2F%2Fmkabumattar.com%2Fblog%2Fpost%2Fsetting-up-node-js-express-prettier-eslint-and-husky-application-with-babel-and-typescript-part-1&media=&description=Setting%20up%20Node%20JS%2C%20Express%2C%20Prettier%2C%20ESLint%20and%20Husky%20Application%20with%20Babel%20and%20Typescript%3A%20Part%201. "Share on Pinterest")[Email]() ## Comments ## You might also enjoy More posts on similar topics [![Setting up JWT Authentication in TypeScript with Express, MongoDB, Babel, Prettier, ESLint, and Husky - Part 2](/_astro/hero.DKzl3k6w_w3X8j.webp)](/blog/post/setting-up-jwt-authentication-in-typescript-with-express-mongodb-babel-prettier-eslint-and-husky-part-2) ## [Setting up JWT Authentication in TypeScript with Express, MongoDB, Babel, Prettier, ESLint, and Husky - Part 2](/blog/post/setting-up-jwt-authentication-in-typescript-with-express-mongodb-babel-prettier-eslint-and-husky-part-2) - [Mohammad Abu Mattar](/authors/mohammad-abu-mattar) - [Backend Development](/blog/categories/backend-development) - [Node.js](/blog/categories/nodejs) - [TypeScript](/blog/categories/typescript) - [Authentication](/blog/categories/authentication) - [API Development](/blog/categories/api-development) Introduction Why do we even need an authentication mechanism in an application? In my opinion, it doesn't need to be explained. The phrases authentication and authorization have likely crossed you [#JWT](/blog/tags/jwt)[#Express.js](/blog/tags/expressjs)[#MongoDB](/blog/tags/mongodb)+10 tags [read more](/blog/post/setting-up-jwt-authentication-in-typescript-with-express-mongodb-babel-prettier-eslint-and-husky-part-2) [![Setting up Node JS, Express, MongoDB, Prettier, ESLint and Husky Application with Babel and authentication as an example](/_astro/hero.C-0XrT7F_1bXKFs.webp)](/blog/post/setting-up-node-js-express-mongodb-prettier-eslint-and-husky-application-with-babel-and-authentication-as-an-example) ## [Setting up Node JS, Express, MongoDB, Prettier, ESLint and Husky Application with Babel and authentication as an example](/blog/post/setting-up-node-js-express-mongodb-prettier-eslint-and-husky-application-with-babel-and-authentication-as-an-example) - [Mohammad Abu Mattar](/authors/mohammad-abu-mattar) - [Backend Development](/blog/categories/backend-development) - [Node.js](/blog/categories/nodejs) - [JavaScript](/blog/categories/javascript) - [Development Setup](/blog/categories/development-setup) - [API Development](/blog/categories/api-development) Introduction All code from this tutorial as a complete package is available in this repository. If you find this tutorial helpful, please share i [#Node.js](/blog/tags/nodejs)[#Express.js](/blog/tags/expressjs)[#MongoDB](/blog/tags/mongodb)+11 tags [read more](/blog/post/setting-up-node-js-express-mongodb-prettier-eslint-and-husky-application-with-babel-and-authentication-as-an-example) [![The ORM Dilemma: To Use or Not to Use](/_astro/hero.DwvXnAvK_Zoy6I4.webp)](/blog/post/why-not-to-use-orm-in-nodejs) ## [The ORM Dilemma: To Use or Not to Use](/blog/post/why-not-to-use-orm-in-nodejs) - [Mohammad Abu Mattar](/authors/mohammad-abu-mattar) - [Backend Development](/blog/categories/backend-development) - [Node.js](/blog/categories/nodejs) - [Database Management](/blog/categories/database-management) - [Software Architecture](/blog/categories/software-architecture) - [TypeScript](/blog/categories/typescript) Introduction Some decisions shape a project more than others. One that keeps coming back is whether to use an Object-Relational Mapping (ORM) tool for database interactions. Should you skip an ORM [#ORM](/blog/tags/orm)[#Node.js](/blog/tags/nodejs)[#TypeScript](/blog/tags/typescript)+8 tags [read more](/blog/post/why-not-to-use-orm-in-nodejs) [![Run TypeScript Without Compiling](/_astro/hero.EI1J4T1U_ZTF3Kf.webp)](/blog/post/run-typescript-without-compiling) ## [Run TypeScript Without Compiling](/blog/post/run-typescript-without-compiling) - [Mohammad Abu Mattar](/authors/mohammad-abu-mattar) - [TypeScript](/blog/categories/typescript) - [Node.js](/blog/categories/nodejs) - [JavaScript](/blog/categories/javascript) - [Development Tools](/blog/categories/development-tools) Introduction In this post, I will show you how to run TypeScript without compiling it to JavaScript first. This is useful for debugging and testing. Set up a TypeScript project Step 1: cr [#TypeScript](/blog/tags/typescript)[#Node.js](/blog/tags/nodejs)[#Ts node](/blog/tags/ts-node)+6 tags [read more](/blog/post/run-typescript-without-compiling) [![Caching Strategies with Redis in Node.js and TypeScript](/_astro/hero.KUKAT2kl_Z1Ypf5o.webp)](/blog/post/caching-strategies-with-redis-in-node-js-and-typescript) ## [Caching Strategies with Redis in Node.js and TypeScript](/blog/post/caching-strategies-with-redis-in-node-js-and-typescript) - [Mohammad Abu Mattar](/authors/mohammad-abu-mattar) - [Backend Development](/blog/categories/backend-development) - [Caching](/blog/categories/caching) - [Performance Optimization](/blog/categories/performance-optimization) - [Node.js](/blog/categories/nodejs) - [Redis](/blog/categories/redis) - [TypeScript](/blog/categories/typescript) Introduction Optimizing application performance is an ongoing job, and caching is one of the most effective ways to do it. Redis, a fast in-memory data store, is a common choice for caching in Nod [#Redis Cache](/blog/tags/redis-cache)[#Caching Strategies](/blog/tags/caching-strategies)[#Node.js Performance](/blog/tags/nodejs-performance)+8 tags [read more](/blog/post/caching-strategies-with-redis-in-node-js-and-typescript) [![Building a Customizable Image Slider in React Using Hooks, SCSS, and TypeScript](/_astro/hero.CMtyRpHA_ZF7JrL.webp)](/blog/post/building-a-customizable-image-slider-in-react-using-hooks-scss-and-typescript) ## [Building a Customizable Image Slider in React Using Hooks, SCSS, and TypeScript](/blog/post/building-a-customizable-image-slider-in-react-using-hooks-scss-and-typescript) - [Mohammad Abu Mattar](/authors/mohammad-abu-mattar) - [ReactJS](/blog/categories/reactjs) - [TypeScript](/blog/categories/typescript) - [SCSS](/blog/categories/scss) - [Frontend Development](/blog/categories/frontend-development) - [UI Components](/blog/categories/ui-components) Introduction In this tutorial, we will be building a customizable image slider in React using hooks, SCSS, and TypeScript. An image slider is a common UI element used in web applications to displa [#React Hooks](/blog/tags/react-hooks)[#TypeScript](/blog/tags/typescript)[#SCSS](/blog/tags/scss)+7 tags [read more](/blog/post/building-a-customizable-image-slider-in-react-using-hooks-scss-and-typescript) 6 related posts