Skip to main content

Initialize a React Project with Vite

documentation

Create a New Project

documentation

export VITE_PROJECT="vite-project"
yarn create vite -t react --no-interactive "$VITE_PROJECT"
yarn install --immutable --immutable-cache --cwd "$VITE_PROJECT"
yarn remove @types/react @types/react-dom --cwd "$VITE_PROJECT"
yarn remove eslint eslint-plugin-react-hooks eslint-plugin-react-refresh globals @eslint/js --cwd "$VITE_PROJECT"
rm "$VITE_PROJECT/eslint.config.js"

YARN

documentation

yarn set version stable

Node Modules Linking with Local Cache

# SPDX-FileCopyrightText: None
# SPDX-License-Identifier: 0BSD

enableGlobalCache: false

enableTelemetry: false

nodeLinker: node-modules
.yarn/*
!.yarn/cache/
!.yarn/releases/
yarn-debug.log*
yarn-error.log*
/node_modules/

Unify Chores via Makefile

# SPDX-FileCopyrightText: None
# SPDX-License-Identifier: 0BSD

DISTNAME := $(shell jq -r .name package.json)
VERSION := $(shell jq -r .version package.json)
DISTDIR := dist

HOST := 127.27.0.1
PORT := 5173

.PHONY: dev
dev:
	yarn dev --host="$(HOST)" --port="$(PORT)"

.PHONY: install
install:
	yarn install --immutable --immutable-cache

.PHONY: update
update:
	yarn up

.PHONY: build
build:
	yarn build --outDir="$(DISTDIR)"

.PHONY: dist
dist: build
	tar --directory="$(DISTDIR)" --create --xz --file="$(DISTNAME)-$(VERSION).tar.xz" .

.PHONY: test
test:
	yarn test

.PHONY: clean
clean:
	-rm --recursive "$(DISTDIR)"
	-rm "$(DISTNAME)-$(VERSION).tar.xz"

.PHONY: distclean
distclean: clean
	git clean --force -Xd