Web App Setup

Makefile

# Defining variables
OUT_DIR := build
BIN := node_modules/.bin
ESBUILD_WATCH :=

define TS_CONFIG
{
  "compilerOptions": {
    "strict": true,
    "module": "commonjs",
    "target": "es2016",
    "jsx": "preserve",
    "strictFunctionTypes": true,
    "sourceMap": true,
    "esModuleInterop": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}
endef
export TS_CONFIG

define ESLINT_CONFIG
{
  "extends": "react-app"
}
endef
export ESLINT_CONFIG

# TODO: replace `live-server` - it is old and unmaintained
init:
	yarn init -y
	yarn add react react-dom @types/react @types/react-dom
	yarn add typescript
	yarn add esbuild
	yarn add --dev live-server concurrently
	yarn add --dev eslint-config-react-app @typescript-eslint/eslint-plugin@^4.0.0 @typescript-eslint/parser@^4.0.0 babel-eslint@^10.0.0 eslint@^7.5.0 eslint-plugin-flowtype@^5.2.0 eslint-plugin-import@^2.22.0 eslint-plugin-jsx-a11y@^6.3.1 eslint-plugin-react@^7.20.3 eslint-plugin-react-hooks@^4.0.8
	mkdir public
	touch ./public/index.html
	mkdir src
	touch ./src/index.tsx
	touch ./src/App.tsx
	touch .eslintrc.json
	touch tsconfig.json 
	echo "$$TS_CONFIG" > tsconfig.json

bootstrap:
	yarn install
	mkdir -p ${OUT_DIR}

clean:
	rm -rf ${OUT_DIR}

clean_all: clean
	rm -rf node_modules

build: bootstrap
	cp -R public/* build
	${BIN}/esbuild ./src/index.tsx --bundle --outfile=./${OUT_DIR}/index.js --format=esm ${ESBUILD_WATCH}

build_watch:	
	make ESBUILD_WATCH=--watch build

serve_watch: bootstrap
	cd ${OUT_DIR} && ../${BIN}/live-server --open=./ --browser="Google Chrome" --watch=../${OUT_DIR}

dev:
	${BIN}/concurrently "make build_watch" "make serve_watch"

.PHONY: bootstrap build clean clean_all dev serve_watch build_watch