traefik · traefiker · Oct 30, 2025 · Oct 29, 2025 · Oct 29, 2025 · Oct 30, 2025
diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
@@ -20,11 +20,7 @@ jobs:
       - name: Enable corepack
         run: corepack enable
 
-      - name: Install dependencies
-        run: make deps
-
-      - name: Build
-        run: make build
-
       - name: Generate assets
-        run: make static-assets
+        run: make static-assets-pr
+        env:
+          IS_PR: 'true'
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -22,14 +22,10 @@ jobs:
       - name: Enable corepack
         run: corepack enable
 
-      - name: Install dependencies
-        run: make deps
-
-      - name: Build
-        run: make build
-
       - name: Generate assets
         run: make static-assets
+        env:
+          PRIVATE_KEY: ${{ secrets.PRIVATE_KEY }}
 
       # https://github.com/marketplace/actions/github-pages
       - name: Deploy to GitHub Pages

diff --git a/.gitignore b/.gitignore
@@ -9,7 +9,7 @@
 /coverage
 
 # production
-/build
+/dist
 /static-assets
 
 # misc

diff --git a/Makefile b/Makefile
@@ -13,8 +13,15 @@ clean:
 	mkdir -p static-assets
 
 static-assets: build
-	cp build/static/js/*.js static-assets/main-v1.js
+	cp dist/hub-button-app.js static-assets/main-v1.js
+	cp dist/hub-button-app.js.sig static-assets/main-v1.js.sig
+	cp dist/hub-button-app.js.map static-assets/main-v1.js.map
+	sed -i -E '[email protected]@https:\/\/traefik.github.io\/traefiklabs-hub-button-app\/main-v1.js@' static-assets/main-v1.js.map
+
+static-assets-pr: build
+	cp dist/hub-button-app.js static-assets/main-v1.js
 	sed -i '1s@.*@\/* eslint-disable *\/@' static-assets/main-v1.js
 	sed -i '23s@.*@\/\/# sourceMappingURL=https:\/\/traefik.github.io\/traefiklabs-hub-button-app\/main-v1.js.map@' static-assets/main-v1.js
-	cp build/static/js/*.js.map static-assets/main-v1.js.map
-	sed -i -E '1s@static\/js\/main.[0-9a-zA-Z]{8}.js@https:\/\/traefik.github.io\/traefiklabs-hub-button-app\/main-v1.js@' static-assets/main-v1.js.map
+
+	cp dist/hub-button-app.js.map static-assets/main-v1.js.map
+	sed -i -E '[email protected]@https:\/\/traefik.github.io\/traefiklabs-hub-button-app\/main-v1.js@' static-assets/main-v1.js.map
diff --git a/README.md b/README.md
@@ -21,7 +21,9 @@ Check the page that opens if the Header is properly rendered and if the latest p
 - `yarn install`
 - `yarn build`
 
-It will create a `build` folder with the compiled assets.
+It will create a `dist` folder with the compiled assets.
+
+**Note**: You will need a `PRIVATE_KEY` env variable to complete the build process. You can find the value on Bitwarden.
 
 ## How to use
 
@@ -56,4 +58,5 @@ lines:
 ### Deployment URLs
 
 - https://traefik.github.io/traefiklabs-hub-button-app/main-v1.js
+- https://traefik.github.io/traefiklabs-hub-button-app/main-v1.js.sig
 - https://traefik.github.io/traefiklabs-hub-button-app/main-v1.js.map
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Hub button app</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -16,25 +16,26 @@
     "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^8.38.0",
     "@typescript-eslint/parser": "^8.38.0",
+    "@vitejs/plugin-react": "^5.1.0",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
     "prettier": "^3.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
     "styled-components": "^5.3.5",
     "typescript": "^4.9.5",
+    "vite": "^7.1.12",
+    "vite-tsconfig-paths": "^5.1.4",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
     "format": "prettier './src/**/*.{ts,tsx}' --config .prettierrc.json --write",
     "lint": "eslint './src/**/*.{ts,tsx}'",
     "lint:fix": "eslint --fix './src/**/*.{ts,tsx}'",
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
   },
   "browserslist": {
     "production": [
@@ -48,5 +49,5 @@
       "last 1 safari version"
     ]
   },
-  "packageManager": "yarn@4.9.2"
+  "packageManager": "yarn@4.10.3"
 }
diff --git a/public/index.html b/public/index.html
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,7 +1,11 @@
 import HubButton from 'components/HubButton'
 
 export const App = ({ style }: { style?: string }) => {
-  return <HubButton style={style} />
+  return (
+    <div style={{ height: 500, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      <HubButton style={style} />
+    </div>
+  )
 }
 
 export default App
diff --git a/src/WebComponent.tsx b/src/WebComponent.tsx
@@ -0,0 +1,15 @@
+import HubButton from 'components/HubButton'
+
+export const WebComponent = ({
+  style,
+  side,
+  align,
+}: {
+  style?: string
+  side?: 'top' | 'bottom'
+  align: 'left' | 'center' | 'right'
+}) => {
+  return <HubButton style={style} side={side} align={align} />
+}
+
+export default WebComponent
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,7 +9,7 @@ @@
     /coverage
     # production
-    /build
+    /dist
     /static-assets
     # misc
@@ Expand Down @@