Fix empty WebUI static assets directory

Author: rtribotte

.github/workflows/build.yaml

@@ -23,7 +23,7 @@ jobs:
 
       - name: Build webui
         run: |
-          make generate-webui
+          make clean-webui generate-webui
           tar czvf webui.tar.gz ./webui/static/
 
       - name: Artifact webui

.github/workflows/test-unit.yaml

@@ -40,7 +40,7 @@ jobs:
           restore-keys: ${{ runner.os }}-test-unit-go-
 
       - name: Avoid generating webui
-        run: mkdir -p webui/static && touch webui/static/index.html
+        run: touch webui/static/index.html
 
       - name: Tests
         run: make test-unit

.github/workflows/validate.yaml

@@ -48,7 +48,7 @@ jobs:
         run: curl -sfL https://raw.githubusercontent.com/client9/misspell/master/install-misspell.sh | sh -s -- -b $(go env GOPATH)/bin ${MISSSPELL_VERSION}
 
       - name: Avoid generating webui
-        run: mkdir -p webui/static && touch webui/static/index.html
+        run: touch webui/static/index.html
 
       - name: Validate
         run: make validate

.gitignore

@@ -5,7 +5,6 @@
 .DS_Store
 /dist
 /webui/.tmp/
-/webui/static/
 /site/
 /docs/site/
 /autogen/

.semaphore/semaphore.yml

@@ -40,7 +40,7 @@ blocks:
         - name: Test Integration
           commands:
             - make pull-images
-            - mkdir -p webui/static && touch webui/static/index.html # Avoid generating webui
+            - touch webui/static/index.html # Avoid generating webui
             - PRE_TARGET="" make binary
             - make test-integration
             - df -h

Makefile

@@ -58,14 +58,18 @@ dist:
 build-webui-image:
 	docker build -t traefik-webui --build-arg ARG_PLATFORM_URL=$(PLATFORM_URL) -f webui/Dockerfile webui
 
+## Clean WebUI static generated assets
+clean-webui:
+	rm -r webui/static
+	mkdir -p webui/static
+	echo 'For more information show `webui/readme.md`' > webui/static/DONT-EDIT-FILES-IN-THIS-DIRECTORY.md
+
 ## Generate WebUI
 generate-webui:
-	if [ ! -d "webui/static" ]; then \
+	if [ ! -f "webui/static/index.html" ]; then \
 		$(MAKE) build-webui-image; \
-		mkdir -p webui/static; \
 		docker run --rm -v "$$PWD/webui/static":'/src/webui/static' traefik-webui npm run build:nc; \
 		docker run --rm -v "$$PWD/webui/static":'/src/webui/static' traefik-webui chown -R $(shell id -u):$(shell id -g) ./static; \
-		echo 'For more information show `webui/readme.md`' > $$PWD/webui/static/DONT-EDIT-FILES-IN-THIS-DIRECTORY.md; \
 	fi
 
 ## Build the linux binary
@@ -114,8 +118,7 @@ validate: $(PRE_TARGET)
 	bash $(CURDIR)/script/validate-shell-script.sh
 
 ## Clean up static directory and build a Docker Traefik image
-build-image: binary
-	rm -rf webui/static
+build-image: clean-webui binary
 	docker build -t $(TRAEFIK_IMAGE) .
 
 ## Build a Docker Traefik image

docs/content/contributing/building-testing.md

@@ -102,7 +102,7 @@ Once you've set up your go environment and cloned the source repository, you can
 
 ```bash
 # Generate UI static files
-rm -rf ./webui/static/; make generate-webui
+make clean-webui generate-webui
 
 # required to merge non-code components into the final binary,
 # such as the web dashboard/UI

webui/.gitignore

@@ -26,3 +26,7 @@ yarn-error.log*
 # local env files
 .env.local
 .env.*.local
+
+# static assets (ignore all except the DO NOT EDIT file)
+static/*
+!static/DONT-EDIT-FILES-IN-THIS-DIRECTORY.md

webui/dev/scripts/transfer.js

@@ -5,6 +5,7 @@ const folder = process.argv[2]
 async function execute () {
   try {
     await fs.emptyDir('./static')
+    await fs.outputFile('./static/DONT-EDIT-FILES-IN-THIS-DIRECTORY.md', 'For more information show `webui/readme.md`')
     console.log('Deleted static folder contents!')
     await fs.copy(`./dist/${folder}`, './static', { overwrite: true })
     console.log('Installed new files in static folder!')

webui/readme.md

@@ -14,15 +14,15 @@ Traefik Web UI provide 2 types of information:
 Use the make file :
 
 ```shell
-make build-image      # Generate Docker image
-make generate-webui   # Generate static contents in `traefik/webui/static/` folder.
+make build-image                # Generate Docker image.
+make clean-webui generate-webui # Generate static contents in `webui/static/` folder.
 ```
 
 ## How to build (only for frontend developer)
 
 - prerequisite: [Node 12.11+](https://nodejs.org) [Npm](https://www.npmjs.com/)
 
-- Go to the `webui` directory
+- Go to the `webui/` directory
 
 - To install dependencies, execute the following commands:
 
@@ -32,9 +32,9 @@ make generate-webui   # Generate static contents in `traefik/webui/static/` fold
 
   - `npm run build`
 
-- Static contents are built in the `webui/static` directory
+- Static contents are built in the `webui/static/` directory
 
-**Do not manually change the files in the `webui/static` directory**
+**Do not manually change the files in the `webui/static/` directory**
 
 - The build allows to:
   - optimize all JavaScript
@@ -46,10 +46,10 @@ make generate-webui   # Generate static contents in `traefik/webui/static/` fold
 
 ## How to edit (only for frontend developer)
 
-**Do not manually change the files in the `webui/static` directory**
+**Do not manually change the files in the `webui/static/` directory**
 
-- Go to the `webui` directory
-- Edit files in `webui/src`
+- Go to the `webui/` directory
+- Edit files in `webui/src/`
 - Run in development mode :
   - `npm run dev`
 

webui/static/DONT-EDIT-FILES-IN-THIS-DIRECTORY.md

@@ -0,0 +1 @@
+For more information show `webui/readme.md`