diff --git a/.dockerignore b/.dockerignore
index 9153eb3e0..c19e901a4 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,5 +1,5 @@
karma
-ui/build
+ui/dist
ui/coverage
ui/node_modules
Dockerfile
diff --git a/.gitignore b/.gitignore
index e45edf5e6..c7585ea3b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,8 +1,8 @@
/coverage.txt
/karma
/karma-*
-/ui/build
-/ui/build.pre
+/ui/dist
+/ui/dist.pre
/ui/coverage
/ui/node_modules
/ui/.eslintcache
diff --git a/CHANGELOG.md b/CHANGELOG.md
index abe2bca93..b0888578d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
# Changelog
+## v0.117
+
+### Changed
+
+- Migrated project from Create React App to [Vite](http://vitejs.dev).
+
## v0.116
### Added
diff --git a/Dockerfile b/Dockerfile
index 6f936df08..d044d686c 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -14,7 +14,7 @@ COPY go.mod /src/go.mod
COPY go.sum /src/go.sum
RUN make -C /src download-deps-go
COPY --from=nodejs-builder /src/ui/src /src/ui/src
-COPY --from=nodejs-builder /src/ui/build /src/ui/build
+COPY --from=nodejs-builder /src/ui/dist /src/ui/dist
COPY --from=nodejs-builder /src/ui/mock /src/ui/mock
COPY --from=nodejs-builder /src/ui/embed.go /src/ui/embed.go
COPY cmd /src/cmd
diff --git a/Makefile b/Makefile
index d463942c3..a4a9577fb 100644
--- a/Makefile
+++ b/Makefile
@@ -15,7 +15,7 @@ test: lint
.PHONY: clean
clean:
- rm -fr $(NAME) $(NAME)-* ui/build ui/build.pre ui/node_modules ui/coverage coverage.txt
+ rm -fr $(NAME) $(NAME)-* ui/dist ui/dist.pre ui/node_modules ui/coverage coverage.txt
.PHONY: show-version
show-version:
diff --git a/cmd/karma/main.go b/cmd/karma/main.go
index 3af7c5275..0e1c1a2ab 100644
--- a/cmd/karma/main.go
+++ b/cmd/karma/main.go
@@ -87,7 +87,7 @@ func setupRouter(router *chi.Mux, historyPoller *historyPoller) {
compressor := middleware.NewCompressor(flate.DefaultCompression)
router.Use(compressor.Handler)
- router.Use(serverStaticFiles(getViewURL("/"), "build"))
+ router.Use(serverStaticFiles(getViewURL("/"), "dist"))
router.Use(serverStaticFiles(getViewURL("/__test__/"), "mock"))
corsOptions := cors.Options{
AllowedOrigins: config.Config.Listen.Cors.AllowedOrigins,
@@ -325,7 +325,7 @@ func setupLogger() error {
func loadTemplates() error {
var t *template.Template
- t, err := template.ParseFS(ui.StaticFiles, "build/index.html")
+ t, err := template.ParseFS(ui.StaticFiles, "dist/index.html")
if err != nil {
return fmt.Errorf("failed to load template: %w", err)
}
diff --git a/codecov.yml b/codecov.yml
index 285f0e907..a4187306b 100644
--- a/codecov.yml
+++ b/codecov.yml
@@ -8,7 +8,6 @@ coverage:
flags:
- backend
ui:
- target: 100
- threshold: 0
+ target: auto
flags:
- ui
diff --git a/demo/Dockerfile b/demo/Dockerfile
index 1652ea8d1..15f5c6d92 100644
--- a/demo/Dockerfile
+++ b/demo/Dockerfile
@@ -16,7 +16,7 @@ RUN make -C /src download-deps-go
COPY --from=nodejs-builder /src/ui/embed.go /src/ui/embed.go
COPY --from=nodejs-builder /src/ui/mock /src/ui/mock
COPY --from=nodejs-builder /src/ui/src /src/ui/src
-COPY --from=nodejs-builder /src/ui/build /src/ui/build
+COPY --from=nodejs-builder /src/ui/dist /src/ui/dist
COPY cmd /src/cmd
COPY internal /src/internal
ARG VERSION
diff --git a/make/cc.mk b/make/cc.mk
index 49bedba9d..a87f91fbd 100644
--- a/make/cc.mk
+++ b/make/cc.mk
@@ -1,7 +1,7 @@
include make/vars.mk
word-split = $(word $2,$(subst -, ,$1))
-cc-%: go.mod go.sum $(SOURCES_GO) ui/build/index.html
+cc-%: go.mod go.sum $(SOURCES_GO) ui/dist/index.html
$(eval GOOS := $(call word-split,$*,1))
$(eval GOARCH := $(call word-split,$*,2))
$(eval GOARM := $(call word-split,$*,3))
diff --git a/make/go.mk b/make/go.mk
index 30b0090c5..060d9c83b 100644
--- a/make/go.mk
+++ b/make/go.mk
@@ -5,11 +5,11 @@ ifeq ($(GOBIN),)
GOBIN = $(shell go env GOPATH)/bin
endif
-ui/build/index.html: $(call rwildcard, ui/src ui/package.json ui/package-lock.json, *)
+ui/dist/index.html: $(call rwildcard, ui/src ui/package.json ui/package-lock.json, *)
@$(MAKE) -C ui build
.DEFAULT_GOAL := $(NAME)
-$(NAME): go.mod go.sum $(SOURCES_GO) ui/build/index.html
+$(NAME): go.mod go.sum $(SOURCES_GO) ui/dist/index.html
go build -trimpath -modcacherw -ldflags "-X main.version=$(VERSION) -s -w" ./cmd/karma
.PHONY: test-go
@@ -55,11 +55,12 @@ openapi-client:
.PHONY: mock-assets
mock-assets:
- rm -fr ui/build
- mkdir ui/build
- cp ui/public/* ui/build/
- mkdir ui/build/static
- touch ui/build/static/main.js
+ rm -fr ui/dist
+ mkdir ui/dist
+ cp ui/public/* ui/dist/
+ cp ui/index.html ui/dist/
+ mkdir ui/dist/assets
+ touch ui/dist/assets/main.js
.PHONY: tools-go-mod-tidy
tools-go-mod-tidy:
diff --git a/make/vars.mk b/make/vars.mk
index 0d98934d1..2a04cbfd7 100644
--- a/make/vars.mk
+++ b/make/vars.mk
@@ -7,4 +7,4 @@ VERSION ?= $(shell git describe --tags --always --dirty='-dev')
rwildcard = $(foreach d, $(wildcard $1*), $(call rwildcard,$d/,$2) $(filter $(subst *,%,$2),$d))
SOURCES_GO = $(call rwildcard, cmd internal, *)
-SOURCES_JS = $(call rwildcard, ui/build/index.html ui/src, *)
+SOURCES_JS = $(call rwildcard, ui/dist/index.html ui/src, *)
diff --git a/scripts/ci-diff-webpack.sh b/scripts/ci-diff-webpack.sh
index 61f5a0a08..b18fd3157 100755
--- a/scripts/ci-diff-webpack.sh
+++ b/scripts/ci-diff-webpack.sh
@@ -7,11 +7,11 @@ git fetch origin main
git reset --hard FETCH_HEAD
make -C ui build/stats.json
-mv ui/build/stats.json main.json
+mv ui/dist/stats.json main.json
make clean
git reset --hard ${GITHUB_SHA}
make -C ui build/stats.json
-./scripts/cra-bundle-stats-diff.py main.json ui/build/stats.json | tee diff.html
+./scripts/cra-bundle-stats-diff.py main.json ui/dist/stats.json | tee diff.html
./scripts/pr-comment.py "Webpack bundle size diff" diff.html html
diff --git a/ui/.browserslistrc b/ui/.browserslistrc
new file mode 100644
index 000000000..24f58aa34
--- /dev/null
+++ b/ui/.browserslistrc
@@ -0,0 +1,9 @@
+>= 1%
+last 1 major version
+not dead
+Chrome >= 49
+Firefox >= 52
+Edge >= 12
+iOS >= 9
+Safari >= 10
+Android >= 4.4
diff --git a/ui/.depcheckrc.yaml b/ui/.depcheckrc.yaml
index 71d94aca0..30fe734b5 100644
--- a/ui/.depcheckrc.yaml
+++ b/ui/.depcheckrc.yaml
@@ -6,12 +6,15 @@ ignores:
- sass
- typeface-open-sans
- prettier
- - react-scripts
+ - vite
- typescript
# devDeps
- "@types/jest"
- "@types/node"
- - "purgecss"
- "eslint-plugin-jest"
- "node-fetch"
- "@babel/plugin-proposal-private-property-in-object"
+ - identity-obj-proxy
+ - jest
+ - jest-fetch-mock
+ - terser
diff --git a/ui/Makefile b/ui/Makefile
index 908a18c19..9123aa988 100644
--- a/ui/Makefile
+++ b/ui/Makefile
@@ -10,7 +10,7 @@ NODE_INSTALL := $(NODE_MODULES)/.install
PATH := $(PATH):$(NODE_PATH)
SHELL := env PATH=$(PATH) /bin/sh
-.DEFAULT_GOAL := build/index.html
+.DEFAULT_GOAL := dist/index.html
$(NODE_INSTALL): package.json package-lock.json
@if [ -e $(NODE_INSTALL) ]; then npm install ; else npm ci; fi
@@ -22,16 +22,16 @@ npm-fetch: $(NODE_INSTALL)
$(NODE_PATH)/%: $(NODE_INSTALL)
@if [ ! -x $@ ]; then echo "missing script: $@" ; exit 1; fi
-build/index.html: $(NODE_INSTALL) $(NODE_PATH)/react-scripts $(call rwildcard, public src, *) purgecss.config.js restore-css
+dist/index.html: $(NODE_INSTALL) $(NODE_PATH)/vite $(call rwildcard, public src, *)
@rm -fr node_modules/.cache/eslint-loader
cat node_modules/bootstrap/scss/_root.scss | sed s/':root {'/'* {'/ > src/Styles/BootstrapRoot.scss
npm run build
.PHONY: build
-build: build/index.html
+build: dist/index.html
.PHONY: test-js
-test-js: $(NODE_PATH)/react-scripts $(NODE_PATH)/jest
+test-js: $(NODE_PATH)/vite $(NODE_PATH)/jest
CI=true NODE_OPTIONS="--unhandled-rejections=strict" npm test -- --coverage
.PHONY: lint-js
@@ -49,22 +49,8 @@ lint-typescript:
format: $(NODE_PATH)/prettier
prettier --write 'src/**/*.ts' 'src/**/*.tsx'
-build/stats.json: build
- env NODE_OPTIONS=--no-experimental-fetch npx source-map-explorer build/static/*/*.{js,css} --json > build/stats.json
-
-.PHONY: backup-css
-backup-css:
- mkdir -p build/static/css build.pre/static
- rm -fr build.pre/static/*
- cp -R build/static/css build.pre/static/css
-
-.PHONY: restore-css
-restore-css:
- @(test -d build/static/css && test -d build.pre/static/css && rm -fr build/static/css && cp -R build.pre/static/css build/static/css) || echo
-
-build.pre/css.diff: build purgecss.config.js
- npx prettier -w build.pre/static/css/*.css build/static/css/*.css
- diff -uNr build.pre/static/css build/static/css > build.pre/css.diff || echo
+dist/stats.json: build
+ env NODE_OPTIONS=--no-experimental-fetch npx source-map-explorer dist/assets/*.{js,css} --json > dist/stats.json
.PHONY: npm-upgrade
npm-upgrade:
diff --git a/ui/embed.go b/ui/embed.go
index 8f0d838f9..2e01699a9 100644
--- a/ui/embed.go
+++ b/ui/embed.go
@@ -2,7 +2,7 @@ package ui
import "embed"
-//go:embed build/* mock/*
+//go:embed dist/* mock/*
// StaticFiles exports build and src directorires as embed.FS
var StaticFiles embed.FS
diff --git a/ui/public/index.html b/ui/index.html
similarity index 96%
rename from ui/public/index.html
rename to ui/index.html
index fa756de2a..ad247c01f 100644
--- a/ui/public/index.html
+++ b/ui/index.html
@@ -57,5 +57,6 @@
+