Migrated from CRA to Vite and updated NodeJS to v18.x

Azure · Sep 3, 2023 · e38a723 · e38a723
1 parent 31165c4
commit e38a723
Show file tree

Hide file tree

Showing 86 changed files with 5,673 additions and 29,349 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -1,5 +1,6 @@
 node_modules
 build
+dist
 .dockerignore
 Dockerfile
 Dockerfile.prod

diff --git a/.github/workflows/azure-ipam-testing.yml b/.github/workflows/azure-ipam-testing.yml
@@ -3,6 +3,8 @@ name: Azure IPAM Testing
 run-name: Azure IPAM Deployment & Testing
 
 on:
+  push:
+    branches: [ ipam-vite ]
   pull_request:
     branches: [ main ]
 

diff --git a/Dockerfile b/Dockerfile
@@ -1,5 +1,5 @@
 # syntax=docker/dockerfile:1
-FROM node:16-slim AS builder
+FROM node:18-slim AS builder
 
 # Set Working Directory
 WORKDIR /app
@@ -41,7 +41,7 @@ RUN mkdir /var/run/sshd
 
 # Install NodeJS 16.x
 RUN apt install curl -y
-RUN curl -sL https://deb.nodesource.com/setup_16.x -o nodesource_setup.sh
+RUN curl -sL https://deb.nodesource.com/setup_18.x -o nodesource_setup.sh
 RUN bash ./nodesource_setup.sh
 RUN apt install nodejs
 RUN npm install -g react-inject-env

diff --git a/docker-compose.prod.yml b/docker-compose.prod.yml
@@ -2,10 +2,10 @@ version: '3.8'
 services:
   ipam-ui:
     environment:
-      REACT_APP_AZURE_ENV: ${AZURE_ENV}
-      REACT_APP_UI_ID: ${UI_APP_ID}
-      REACT_APP_ENGINE_ID: ${ENGINE_APP_ID}
-      REACT_APP_TENANT_ID: ${TENANT_ID}
+      VITE_AZURE_ENV: ${AZURE_ENV}
+      VITE_UI_ID: ${UI_APP_ID}
+      VITE_ENGINE_ID: ${ENGINE_APP_ID}
+      VITE_TENANT_ID: ${TENANT_ID}
     image: azureipam.azurecr.io/ipam-ui:latest
   ipam-engine:
     environment:

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -7,10 +7,10 @@ services:
       args:
         PORT: 8080
     environment:
-      REACT_APP_AZURE_ENV: ${AZURE_ENV}
-      REACT_APP_UI_ID: ${UI_APP_ID}
-      REACT_APP_ENGINE_ID: ${ENGINE_APP_ID}
-      REACT_APP_TENANT_ID: ${TENANT_ID}
+      VITE_AZURE_ENV: ${AZURE_ENV}
+      VITE_UI_ID: ${UI_APP_ID}
+      VITE_ENGINE_ID: ${ENGINE_APP_ID}
+      VITE_TENANT_ID: ${TENANT_ID}
       WDS_SOCKET_PORT: 3000
     volumes:
       - ./ui:/app

diff --git a/engine/app/main.py b/engine/app/main.py
@@ -46,7 +46,7 @@
 app = FastAPI(
     title = "Azure IPAM",
     description = description,
-    version = "1.0.0",
+    version = "2.0.0",
     contact = {
         "name": "Azure IPAM Team",
         "url": "https://github.com/azure/ipam",

diff --git a/ui/.dockerignore b/ui/.dockerignore
@@ -1,5 +1,6 @@
 node_modules
 build
+dist
 .dockerignore
 Dockerfile.*
 *.example

diff --git a/ui/.gitignore b/ui/.gitignore
@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

diff --git a/ui/Dockerfile.deb b/ui/Dockerfile.deb
@@ -1,4 +1,4 @@
-ARG BASE_IMAGE=node:16-slim
+ARG BASE_IMAGE=node:18-slim
 FROM $BASE_IMAGE
 
 ARG PORT=80

diff --git a/ui/Dockerfile.dev b/ui/Dockerfile.dev
@@ -1,4 +1,4 @@
-ARG VARIANT=16-bullseye
+ARG VARIANT=18-bullseye
 FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:${VARIANT}
 
 ARG PORT=3000
@@ -17,6 +17,9 @@ ENV PORT=$PORT
 COPY package.json ./
 COPY package-lock.json ./
 
+# Upgrade NPM
+RUN npm install npm@latest -g
+
 RUN npm install
 RUN chmod 777 node_modules
 
@@ -27,4 +30,4 @@ COPY . ./
 EXPOSE $PORT
 
 # start app
-CMD ["npm", "start"]
+CMD npx vite --host "0.0.0.0" --port $PORT
diff --git a/ui/Dockerfile.rhel b/ui/Dockerfile.rhel
@@ -1,4 +1,4 @@
-ARG BASE_IMAGE=registry.access.redhat.com/ubi8/nodejs-16
+ARG BASE_IMAGE=registry.access.redhat.com/ubi8/nodejs-18
 FROM $BASE_IMAGE
 
 ARG PORT=8080

diff --git a/ui/public/index.html → ui/index.html b/ui/public/index.html → ui/index.html
@@ -2,30 +2,31 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <script type="text/javascript" src="%PUBLIC_URL%/env.js"></script>
-    <!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
-    <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png">
+    <script type="text/javascript" src="/env.js"></script>
+    <script type="module" src="/src/index.jsx"></script>
+    <!-- <link rel="icon" href="/favicon.ico" /> -->
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
-    <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png">
+    <!-- <link rel="apple-touch-icon" href="/logo192.png" /> -->
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
-    <link rel="manifest" href="%PUBLIC_URL%/site.webmanifest">
+    <!-- <link rel="manifest" href="/manifest.json" /> -->
+    <link rel="manifest" href="/site.webmanifest">
     <!--
-      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`.
     -->

diff --git a/ui/init.sh b/ui/init.sh
@@ -8,5 +8,26 @@ test -e /etc/os-release && os_release='/etc/os-release' || os_release='/usr/lib/
 REACT_APP_CONTAINER_IMAGE=${PRETTY_NAME}
 export REACT_APP_CONTAINER_IMAGE
 
-npx --yes react-inject-env set
-npx --yes http-server -a 0.0.0.0 -P http://localhost:${PORT}? -p ${PORT} build
+printenv | grep REACT_APP_ > /tmp/react_app_
+
+while IFS='=' read -r name value;
+do
+  new_name=$(echo "$name" | sed "s/REACT_APP_/VITE_/g")
+  export "$new_name=$value"
+done < /tmp/react_app_
+
+printenv | grep VITE_ > /tmp/vite_
+
+echo "window.env = {" > env.js
+
+while IFS='=' read -r name value;
+do
+  echo "  \"$name\": \"$value\"," >> env.js
+done < /tmp/vite_
+
+echo "}" >> env.js
+
+mv env.js ./dist/
+
+# npx --yes react-inject-env set
+npx --yes http-server -a 0.0.0.0 -P http://localhost:${PORT}? -p ${PORT} dist