Migrate from CRA to Vite (#1972)

* Migrate from react to vite

* remove console log

* fix build path

* add opt deps

* install python3 for vite react build

* bump rollup dependency

* remove ignore optional

* remove unusued import

* remove comment source-map-support

* Fix build path and add git

* fix path to dist

* fix dev mode vite

* fix base path

* Unused styles removal (#1988)

* Add missing dependencies in production, remove node-fetch bump types/node

* update dockerfile

* bump types/node root

* fix unit testing

* fix unit testing

* fix unit testing

* stop using gateway ipfs endpoint

* remove space

* add .lock

---------

Co-authored-by: Mateu Miralles <[email protected]>

.gitignore

@@ -55,4 +55,7 @@ packages/dappmanager/dnp_repo
 
 # Specific from toolkit
 #packages/toolkit/src/typechain/*
-packages/toolkit/truffle/contracts_build/*
+packages/toolkit/truffle/contracts_build/*
+
+# docker tmp
+docker-compose-tmp.yml

Dockerfile

@@ -1,52 +1,56 @@
+# Arguments
 ARG NODE_VERSION=20.3.0
-
-# Common base so it's cached
-# --platform=$BUILDPLATFORM is used build javascript source with host arch
-# Otherwise webpack builds on emulated archs can be extremely slow (+1h)
 ARG BASE_IMAGE=node:${NODE_VERSION}-alpine3.18
+ARG BUILDPLATFORM
 
 # Initial stage to gather git data
-FROM --platform=${BUILDPLATFORM:-amd64} ${BASE_IMAGE} as git-data
+FROM --platform=${BUILDPLATFORM:-amd64} ${BASE_IMAGE} AS git-data
 WORKDIR /usr/src/app
 RUN apk add --no-cache git
 COPY .git dappnode_package.json docker/getGitData.js ./
 RUN node getGitData /usr/src/app/.git-data.json
 
-# Build source files
-FROM --platform=${BUILDPLATFORM:-amd64} ${BASE_IMAGE} as build-src
+# Build stage
+FROM --platform=${BUILDPLATFORM:-amd64} ${BASE_IMAGE} AS build-src
 WORKDIR /app
+
+# Install necessary packages required by vite
+RUN apk add --no-cache python3 py3-pip build-base
+
+# Copy and build packages
 COPY package.json yarn.lock lerna.json tsconfig.json ./
 COPY packages packages
-# For the admin-ui
-ENV REACT_APP_API_URL /
-RUN yarn --frozen-lockfile --non-interactive --ignore-optional && \
+ENV VITE_APP_API_URL /
+RUN yarn install --non-interactive --frozen-lockfile && \
   yarn build && \
   yarn clean:libraries && \
   yarn install --non-interactive --frozen-lockfile --production --force --ignore-optional
-RUN rm -rf yarn.lock packages/*/node_modules packages/*/src packages/*/tsconfig.json packages/*/.eslint*
+RUN rm -rf yarn.lock packages/*/src packages/*/tsconfig.json packages/*/.eslint*
 
 # Production stage
 FROM node:${NODE_VERSION}-alpine
+WORKDIR /usr/src/app
+
+# Environment variables
 ENV COMPOSE_HTTP_TIMEOUT=300 \
   DOCKER_CLIENT_TIMEOUT=300 \
   DOCKER_HOST=unix:///var/run/docker.sock \
   UI_FILES_PATH=/usr/src/app/packages/admin-ui/build \
   GIT_DATA_PATH=.git-data.json 
-WORKDIR /usr/src/app
-# TODO: Remove bind modules when we don't use Bind package?
-# These packages create several files
+
+# Install necessary packages
 RUN apk add --no-cache docker curl docker-cli-compose xz zip unzip libltdl bind bind-dev bind-tools avahi-tools dbus miniupnpc
 
 # Copy git data
 COPY --from=git-data /usr/src/app/.git-data.json $GIT_DATA_PATH
 
-# Copy scripts
+# Copy scripts and built files
 COPY packages/hostScriptsServices/hostScripts hostScripts
 COPY packages/hostScriptsServices/hostServices hostServices
 COPY packages/hostScriptsServices/hostTimers hostTimers
-
-COPY package.json ./ 
+COPY package.json ./
 COPY --from=build-src /app/packages ./packages
 COPY --from=build-src /app/node_modules ./node_modules
 
-CMD [ "node", "packages/dappmanager/dist/index" ]
+# Command
+CMD ["node", "packages/dappmanager/dist/index"]

Dockerfile.dev

@@ -6,9 +6,9 @@ ARG NODE_VERSION=20.3.0
 ARG BASE_IMAGE=node:${NODE_VERSION}-alpine
 
 # Initial stage to gather git data
-FROM --platform=${BUILDPLATFORM:-amd64} ${BASE_IMAGE} as git-data
+FROM --platform=${BUILDPLATFORM:-amd64} ${BASE_IMAGE} AS git-data
 WORKDIR /usr/src/app
-RUN apk add --no-cache git
+RUN apk add --no-cache git python3 py3-pip build-base
 COPY .git dappnode_package.json docker/getGitData.js ./
 RUN node getGitData /usr/src/app/.git-data.json
 
@@ -21,7 +21,7 @@ ENV COMPOSE_HTTP_TIMEOUT=300 \
   UI_FILES_PATH=/app/packages/admin-ui/build \
   GIT_DATA_PATH=.git-data.json \
   TEST=true \
-  REACT_APP_API_URL=http://my.dappnode:5000/
+  VITE_APP_API_URL=http://my.dappnode:5000/
 WORKDIR /app
 RUN apk update && apk add --no-cache docker curl docker-cli-compose xz zip unzip libltdl bash git bind bind-tools bind-dev \ 
   miniupnpc dbus tmux avahi-tools
@@ -36,9 +36,9 @@ COPY docker/start_dev.sh /usr/src/app/start_dev.sh
 COPY package.json yarn.lock lerna.json tsconfig.json ./
 COPY packages packages
 
-RUN yarn --frozen-lockfile --non-interactive --ignore-optional
+RUN yarn --frozen-lockfile --non-interactive
 
-ENV REACT_APP_API_URL /
+ENV VITE_APP_API_URL /
 RUN yarn build
 
 ENTRYPOINT [ "/usr/src/app/start_dev.sh" ]

docker/start_dev.sh

@@ -14,4 +14,4 @@ for dir in /app/packages/*; do
 done
 
 # wait for all processes to finish
-wait
+wait

package.json

@@ -29,7 +29,7 @@
   "devDependencies": {
     "@types/chai": "^4.3.11",
     "@types/mocha": "^10.0.6",
-    "@types/node": "^20.10.4",
+    "@types/node": "^20.14.10",
     "@typescript-eslint/eslint-plugin": "^5.61.0",
     "@typescript-eslint/parser": "^5.61.0",
     "chai": "^4.3.10",

packages/admin-ui/public/index.html → packages/admin-ui/index.html

@@ -6,40 +6,22 @@
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
-    <link
-      rel="apple-touch-icon"
-      sizes="180x180"
-      href="%PUBLIC_URL%/icon-180x180.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      href="%PUBLIC_URL%/favicon-32x32.png"
-      sizes="32x32"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      href="%PUBLIC_URL%/favicon-16x16.png"
-      sizes="16x16"
-    />
-    <link
-      rel="mask-icon"
-      href="%PUBLIC_URL%/safari-pinned-tab.svg"
-      color="#5bbad5"
-    />
+    <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png" />
+    <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
+    <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
     <meta name="theme-color" content="#ffffff" />
     <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
     <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
+      Notice the use of  in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
@@ -61,5 +43,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>

packages/admin-ui/package.json

@@ -4,38 +4,35 @@
   "license": "GPL-3.0",
   "type": "module",
   "scripts": {
-    "start": "REACT_APP_API_TEST=true react-scripts start",
-    "build": "react-scripts build",
-    "test": "TEST=true react-scripts test --env=jsdom --watchAll=false --transformIgnorePatterns \"node_modules/(?!@codemirror)/\"",
-    "test:watch": "TEST=true react-scripts test --env=jsdom",
-    "eject": "react-scripts eject",
+    "start": "VITE_APP_API_TEST=true vite",
+    "build": "tsc -b && vite build",
     "analyze": "npx source-map-explorer build/static/js/main.*",
     "lint": "eslint --ext ts,tsx,js,jsx --fix src",
     "prettier": "prettier --write 'src/**/*.*'",
     "pre-commit": "yarn lint && CI=true yarn test",
-    "mock": "REACT_APP_API_URL=http://localhost:5000 yarn start",
+    "mock": "VITE_APP_API_URL=http://localhost:5000 yarn start",
     "server-mock": "PORT=5000 nodemon server-mock/index.ts",
     "server-mock:check-types": "tsc --noEmit --project tsconfig.server-mock.json",
-    "mock-standalone": "REACT_APP_MOCK=true yarn start",
-    "mock-standalone:build": "REACT_APP_MOCK=true yarn build",
-    "dev": "nodemon --ignore \"*.json\" -e ts,tsx --watch src/ --exec \"yarn build\""
+    "mock-standalone": "VITE_APP_MOCK=true yarn start",
+    "mock-standalone:build": "VITE_APP_MOCK=true yarn build",
+    "dev": "VITE_APP_API_TEST=true nodemon --ignore \"*.json\" -e ts,tsx --watch src/ --exec \"yarn build\""
   },
   "dependencies": {
-    "@dappnode/types": "^0.1.36",
     "@dappnode/common": "^0.1.0",
     "@dappnode/dappmanager": "^0.1.0",
     "@dappnode/eventbus": "^0.1.0",
+    "@dappnode/types": "^0.1.36",
     "@reduxjs/toolkit": "^1.3.5",
     "@types/clipboard": "^2.0.7",
-    "@types/node": "^18.11.18",
+    "@types/node": "^20.14.10",
     "@types/qrcode.react": "^1.0.2",
     "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.6",
     "@types/react-redux": "^7.1.25",
     "@types/react-router-dom": "^5.3.3",
     "@types/semver": "^7.3.13",
     "@types/socket.io-client": "^3.0.0",
     "@types/styled-components": "^5.1.26",
+    "@vitejs/plugin-react": "^4.3.1",
     "ajv": "^6.10.2",
     "bootstrap": "^4.3.1",
     "clipboard": "^2.0.1",
@@ -48,12 +45,11 @@
     "qrcode.react": "^0.8.0",
     "react": "^18.2.0",
     "react-bootstrap": "^1.0.0-beta.5",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
     "react-icons": "^4.3.1",
     "react-markdown": "^8.0.0",
     "react-redux": "^7.2.0",
     "react-router-dom": "^6.14.1",
-    "react-scripts": "^5.0.0",
     "react-switch": "^5.0.1",
     "react-toastify": "^4.1.0",
     "redux": "^4.0.0",
@@ -62,13 +58,19 @@
     "semver": "^7.3.8",
     "socket.io-client": "^4.5.1",
     "styled-components": "^4.2.0",
-    "swr": "^0.2.0"
+    "swr": "^0.2.0",
+    "vite": "^5.3.2",
+    "vite-tsconfig-paths": "^4.3.2"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@types/jest": "^24.9.1",
+    "@types/react-dom": "^18.3.0",
     "prettier": "^1.16.4"
   },
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-gnu": "4.18.0"
+  },
   "browserslist": {
     "production": [
       ">0.2%",

packages/admin-ui/src/api/index.ts

@@ -27,7 +27,7 @@ export { apiRoutes };
 
 // Inject mock API code to have a workable UI offline
 // Usefull for developing and testing UI elements without any server
-if (process.env.REACT_APP_MOCK) {
+if (import.meta.env.VITE_APP_MOCK) {
   import("./mock").then(mock => {
     Object.assign(apiAuth, mock.apiAuth);
     Object.assign(apiRoutes, mock.apiRoutes);

packages/admin-ui/src/index.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { render } from "react-dom";
+import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { Provider } from "react-redux";
 import { BrowserRouter as Router } from "react-router-dom";
 
@@ -18,18 +19,18 @@ import "./light_dark.scss";
 import "./layout.scss";
 
 // This process.env. vars will be substituted at build time
-// The REACT_APP_ prefix is mandatory for the substitution to work
+// The VITE_APP_ prefix is mandatory for the substitution to work
 window.versionData = cleanObj({
-  version: process.env.REACT_APP_VERSION,
-  branch: process.env.REACT_APP_BRANCH,
-  commit: process.env.REACT_APP_COMMIT
+  version: import.meta.env.VITE_APP_VERSION,
+  branch: import.meta.env.VITE_APP_BRANCH,
+  commit: import.meta.env.VITE_APP_COMMIT
 });
+const root = createRoot(document.getElementById("root") as HTMLElement);
 
-render(
+root.render(
   <Provider store={store}>
     <Router>
       <App />
     </Router>
-  </Provider>,
-  document.getElementById("root")
+  </Provider>
 );

packages/admin-ui/src/pages/support/components/activity.scss

@@ -59,22 +59,9 @@
      Using user-logs > x, to win the bootstrap css in specificity
   */
 
-  > .user-log {
-    border-left-width: 0;
-    border-right-width: 0;
-    padding: 0;
+   /* Polish bootstrap style */
 
-    > &:first-child {
-      border-top-width: 0;
-    }
-    > &:last-child {
-      border-bottom-width: 0;
-    }
-
-    /* Polish bootstrap style */
-
-    .badge {
-      margin-right: 0.5rem;
+  .badge {
+    margin-right: 0.5rem;
     }
   }
-}

packages/admin-ui/src/params.ts

@@ -1,7 +1,7 @@
 import { urlJoin } from "utils/url";
 
 // JSON RPC API
-export const apiUrl = process.env.REACT_APP_API_URL || "http://my.dappnode/";
+export const apiUrl = import.meta.env.VITE_APP_API_URL || "http://my.dappnode/";
 export const apiUrls = {
   ping: urlJoin(apiUrl, "ping"),
 
@@ -25,7 +25,7 @@ export const apiUrls = {
 export const socketIoUrl = apiUrl;
 
 // Allow cross-domain cookies
-export const apiTestMode = process.env.REACT_APP_API_TEST;
+export const apiTestMode = import.meta.env.VITE_APP_API_TEST;
 
 // API Auth errors. Must be in sync with the DAPPMANAGER
 export const ERROR_NOT_REGISTERED = "NOT_REGISTERED";

packages/admin-ui/tsconfig.json

@@ -1,12 +1,17 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
+    "target": "ESNext",
     /* Modules */
     "module": "ESNext",
     "moduleResolution": "node",
 
     "baseUrl": "src",
 
+    "types": ["vite/client"],
+
+    "useDefineForClassFields": true,
+
     /* Emit */
     "noEmit": true,
 

packages/admin-ui/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />