Steps to setup a modern development environment for a web application

web-app-setup.md

Web Application Setup

These days, even if you start your application out with a framework like Gatsby or Next.js, you're still a few steps away from achieving a "proper" development environment.

This gist provides information on these steps. A JavaScript and a TypeScript version is provided for each step.

Note: This assumes you're building a React web application.

Table of Contents

1. Install packages
2. Create configuration files

1. Install packages

Package	Why?
Prettier	Code formatter
ESLint	Linter
husky	Do things in response to git commands
lint-staged	Do things in response to git commands, but only for staged files
TypeScript	(optional) Add typings support

JavaScript

npm i -D prettier eslint eslint-config-prettier eslint-plugin-react husky lint-staged

TypeScript

npm i -D prettier eslint eslint-config-prettier eslint-plugin-react husky lint-staged typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

2. Create configuration files

Prettier

.prettierrc

{
  "singleQuote": true,
  "trailingComma": "es5"
}

.prettierignore

.cache
.vs
.idea
package.json
package-lock.json
public
build
dist

ESLint

.eslintrc.json

{
  "extends": ["eslint:recommended", "plugin:react/recommended", "prettier"],
  "env": {
    "es6": true,
    "node": true,
    "jest": true,
    "browser": true
  },
  "parserOptions": {
    "ecmaVersion": 9,
    "ecmaFeatures": { "jsx": true },
    "sourceType": "module"
  },
  "plugins": ["react"],
  "rules": {
    "react/prop-types": 0
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

.eslintrc.json (TypeScript)

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "prettier",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking"
  ],
  "env": {
    "es6": true,
    "jest": true,
    "browser": true
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 9,
    "ecmaFeatures": { "jsx": true },
    "project": ["./tsconfig.json", "./tsconfig.eslint.json"],
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint"],
  "rules": {
    "react/prop-types": 0
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

.eslintignore

node_modules
__mocks__
.cache
public
.vs
.idea
build

npm

package.json scripts

{
  "scripts": {
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "lint": "eslint \"src/**/*.js\""
  }
}

package.json scripts (TypeScript)

{
  "scripts": {
    "format": "prettier --write \"**/*.{ts,tsx,json,md}\"",
    "lint": "eslint \"src/**/*.{ts,tsx}\""
  }
}

TypeScript

tsconfig.json

module: this defines the output module resolution system that is used. For example, if this is set to ES2015, TypeScript would assume that the JavaScript engine (that our application is intended to run on) is capable of parsing ES2015 features.

moduleResolution: this defines how TypeScript finds (resolves) our modules.

target: this affects the output of our code. For example, if this is set to ES2015, the output code will be able to be read by any engines that can read ES2015 JavaScript.

lib: this affects the output of our code. It is an array of features that can be used by the JavaScript engine that our code is run on. In most cases, this will be the same as target.

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./build/",
    "sourceMap": true,
    "module": "ESNext",
    "target": "es6",
    "jsx": "react",
    "removeComments": true,
    "allowSyntheticDefaultImports": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.test.{ts,tsx}"]
}

Mocha

Example config: link

CLI options: link

TypeScript integration: link

.mocharc.js

module.exports = {
  extension: ['js'],
  spec: 'src/**/*.spec.js',
  ignore: ['node_modules/**/*', 'build/**/*', 'coverage/**/*', 'ignore/**/*'],
  recursive: 'true',
  ui: 'tdd',
};

.mocharc.js (TypeScript)

module.exports = {
  extension: ['ts'],
  spec: 'src/**/*.spec.ts',
  require: 'ts-node/register',
  ignore: ['node_modules/**/*', 'build/**/*', 'coverage/**/*', 'ignore/**/*'],
  recursive: 'true',
  ui: 'tdd',
};

Add CLI commands

package.json

"scripts": {
  "format": "prettier --write --loglevel=warn \"src/**/*.{ts,tsx,json}\"",
  "lint": "eslint src"
}

package.json (TypeScript)

"scripts": {
  "format": "prettier --write --loglevel=warn \"src/**/*.{ts,tsx,json}\"",
  "lint": "eslint --ext .ts,.tsx src"
}