Using a Makefile to build TypeScript and React Native

Makefile

workspace.dir := $(PWD)
workspace.node_modules := $(workspace.dir)/node_modules

typescript.src.dir := $(workspace.dir)/src
typescript.src.ts := $(shell find $(typescript.src.dir) -name '*.ts' -type f)
typescript.src.tsx := $(shell find $(typescript.src.dir) -name '*.tsx' -type f)
typescript.src.files := $(typescript.src.ts) $(typescript.src.tsx)

typescript.build.dir := $(workspace.dir)/artifacts
typescript.build.ts := $(patsubst $(typescript.src.dir)%.ts,$(typescript.build.dir)%.js, $(filter %.ts,$(typescript.src.files)))
typescript.build.tsx := $(patsubst $(typescript.src.dir)%.tsx,$(typescript.build.dir)%.js, $(filter %.tsx,$(typescript.src.files)))
typescript.build.files := $(typescript.build.ts) $(typescript.build.tsx)

rn.dist := $(workspace.dir)/dist

rn.ios.dist := $(rn.dist)/ios
rn.ios.bundle := $(rn.ios.dist)/index.ios.js

rn.android.dist := $(rn.dist)/android
rn.android.bundle := $(rn.android.dist)/index.android.js

define i
echo "\n\e[1;34m[INFO]$(1)\e[0m\n"
endef

define w
echo "\n\e[1;93m[WARN]$(1)\e[0m\n"
endef

define e
echo "\n\e[1;91m[ERROR]$(1)\e[0m\n"
endef

.PHONY: build default start bundles ios-bunndle android-bundle clean node_modules

default: build

all: build bundles

build: $(typescript.build.files)

bundles: ios-bundle android-bundle

ios-bundle: $(rn.ios.bundle)

android-bundle: $(rn.android.bundle)

node_modules: $(workspace.node_modules)

start:
	@$(call i, Starting TypeScript and React Native bundler in watch mode)
	npx tsc -w &
	npx react-native start --skipflow  --resetCache --projectRoot ./artifacts

clean:
	@$(call i, Cleaning build artifacts)
	rm -rf $(rn.dist) $(typescript.build.dir)

$(typescript.build.tsx): $(typescript.build.dir)%.js: $(typescript.src.dir)%.tsx
$(typescript.build.ts): $(typescript.build.dir)%.js: $(typescript.src.dir)%.ts
$(typescript.build.files): $(workspace.node_modules)
	@$(call i, Compiling TypeScript files into JavaScript)
	npx tsc

$(rn.android.bundle): $(typescript.build.files)
	@$(call i, Generating the Android bundle)
	mkdir -p $(rn.android.dist)
	npx react-native bundle --platform android --dev false --entry-file artifacts/index.js --bundle-output $@ --assets-dest dist/android/

$(rn.ios.bundle): $(typescript.build.files)
	@$(call i, Generating the iOS bundle)
	mkdir -p $(rn.ios.dist)
	npx react-native bundle --platform ios --dev false --entry-file artifacts/index.js --bundle-output $@ --assets-dest dist/ios/

$(workspace.node_modules):
	@$(call i, Installing npm modules)
	npm i

Depending on your OS and shell, you might have to use different escape characters for the nice colors.

# Sometimes you have to use \033 instead of \e
define info
echo "\n\033[1;34m[info]$(1)\033[0m\n"
endef