chore: Migrate to vite (#421)

* chore: migrate to vite * docs: update frontend docs * chore: re-add .empty * fix: do not open browser when starting server * fix: in docker expose node to all interfaces so that nginx frontend can reach it --------- Co-authored-by: Alex Garel <[email protected]>
openfoodfacts · Mar 7, 2024 · 810a218 · 810a218
1 parent 2c508cb
commit 810a218
Show file tree

Hide file tree

Showing 15 changed files with 6,823 additions and 1,192 deletions.
diff --git a/.env b/.env
@@ -13,7 +13,9 @@ TAXONOMY_EDITOR_EXPOSE=127.0.0.1:8091
 # it must either start with : or be empty
 PUBLIC_TAXONOMY_EDITOR_PORT=:8091
 # this one is used to expose the websocket in dev and shoudl match PUBLIC_TAXONOMY_EDITOR_PORT but without leading ":"
-WDS_SOCKET_PORT=8091
+VITE_SERVER_PORT=3000
+# in docker we want to expose the server on all interfaces for frontend nginx to reach it
+VITE_SERVER_HOST=0.0.0.0
 # API scheme is useful because, in prod, we have to proxy and already proxied request
 # and loose the original scheme
 API_SCHEME=http

diff --git a/.github/workflows/container-deploy.yml b/.github/workflows/container-deploy.yml
@@ -145,6 +145,9 @@ jobs:
             echo "TAXONOMY_EDITOR_DOMAIN=${{ env.TAXONOMY_EDITOR_DOMAIN }}" >> .env
             # should be blank in production
             echo "PUBLIC_TAXONOMY_EDITOR_PORT=" >> .env
+            # in docker we want to expose the server on all interfaces for frontend nginx to reach it
+            echo "VITE_SERVER_PORT=3000" >> .env
+            echo "VITE_SERVER_HOST=0.0.0.0" >> .env
             # we use https
             echo "API_SCHEME=https" >> .env
             # the PAT is environment dependant

diff --git a/Makefile b/Makefile
@@ -41,7 +41,7 @@ install: ## Install dependencies
 
 local_frontend: ## Run the frontend locally
 	@echo "🍜 Running frontend (ctrl+C to stop)"
-	cd taxonomy-editor-frontend && REACT_APP_API_URL="http://localhost:8080/" npm start
+	cd taxonomy-editor-frontend && VITE_APP_API_URL="http://localhost:8080/" npm start
 
 local_backend: ## Run the backend locally
 	@echo "🍜 Running backend (ctrl+C to stop)"

diff --git a/docker/dev.yml b/docker/dev.yml
@@ -49,13 +49,11 @@ services:
         USER_UID: ${USER_UID:-1000}
         USER_GID: ${USER_GID:-1000}
     environment:
-      - REACT_APP_API_URL=//api.${TAXONOMY_EDITOR_DOMAIN}${PUBLIC_TAXONOMY_EDITOR_PORT:-80}/
-      - WDS_SOCKET_HOST=ui.${TAXONOMY_EDITOR_DOMAIN}
-      - WDS_SOCKET_PORT=${WDS_SOCKET_PORT:-80}
+      - VITE_APP_API_URL=//api.${TAXONOMY_EDITOR_DOMAIN}${PUBLIC_TAXONOMY_EDITOR_PORT:-80}/
+      - VITE_SERVER_HOST=${VITE_SERVER_HOST:-localhost}
+      - VITE_SERVER_PORT=${VITE_SERVER_PORT:-80}
       - TAXONOMY_EDITOR_DOMAIN
       - NODE_ENV=development
-      # avoid host check in dev
-      - DANGEROUSLY_DISABLE_HOST_CHECK=true
     # this is the command to run dev server
     command: ["npm", "start"]
     volumes:
@@ -64,8 +62,10 @@ services:
       - ./taxonomy-editor-frontend/public:/opt/taxonomy-editor/public
       - ./taxonomy-editor-frontend/src:/opt/taxonomy-editor/src
       - ./taxonomy-editor-frontend/.eslintrc.json:/opt/taxonomy-editor/.eslintrc.json
-      - ./taxonomy-editor-frontend/craco.config.js:/opt/taxonomy-editor/craco.config.js
+      - ./taxonomy-editor-frontend/.prettierrc.json:/opt/taxonomy-editor/.prettierrc.json
+      - ./taxonomy-editor-frontend/index.html:/opt/taxonomy-editor/index.html
       - ./taxonomy-editor-frontend/tsconfig.js:/opt/taxonomy-editor/tsconfig.js
+      - ./taxonomy-editor-frontend/vite.config.ts:/opt/taxonomy-editor/vite.config.ts
       - ./backend/openapi/openapi.json:/opt/backend/openapi/openapi.json
   taxonomy_frontend:
     image: taxonomy-editor/taxonomy_frontend:dev

diff --git a/taxonomy-editor-frontend/Dockerfile b/taxonomy-editor-frontend/Dockerfile
@@ -33,8 +33,10 @@ ENV PATH /opt/taxonomy-editor/node_modules/.bin:$PATH
 COPY --chown=node:node src /opt/taxonomy-editor/src
 COPY --chown=node:node public /opt/taxonomy-editor/public
 COPY --chown=node:node .eslintrc.json /opt/taxonomy-editor/.eslintrc.json
-COPY --chown=node:node craco.config.js /opt/taxonomy-editor/craco.config.js
+COPY --chown=node:node .prettierrc.json /opt/taxonomy-editor/.prettierrc.json
+COPY --chown=node:node index.html /opt/taxonomy-editor/index.html
 COPY --chown=node:node tsconfig.json /opt/taxonomy-editor/tsconfig.json
+COPY --chown=node:node vite.config.ts /opt/taxonomy-editor/vite.config.ts
 # build for production
 # no need of a public url, we are at the root
 RUN npm run build

diff --git a/taxonomy-editor-frontend/README.md b/taxonomy-editor-frontend/README.md
@@ -13,7 +13,7 @@ This is the main user interface developed in React, which works in conjunction w
 - [Material-UI](https://mui.com/)
 - [iso-639-1](https://www.npmjs.com/package/iso-639-1)
 
-This project was initially setup using [Create React App](https://github.com/facebook/create-react-app), [the documentation](https://create-react-app.dev/) might be useful.
+This project was initially setup using [Create React App](https://github.com/facebook/create-react-app), but was migrated to Vite. [Its documentation](https://vitejs.dev) might be useful.
 
 ## Setup Dev Environment
 

diff --git a/taxonomy-editor-frontend/build/.empty b/taxonomy-editor-frontend/build/.empty
@@ -1 +1 @@
-# keep this folder to avoid having docker-compose create it with root owner
+# This file is used to ensure that the build folder is included in git and in the docker image (to avoid having docker-compose create the build folder with root owner)
diff --git a/taxonomy-editor-frontend/public/index.html → taxonomy-editor-frontend/index.html b/taxonomy-editor-frontend/public/index.html → taxonomy-editor-frontend/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Taxonomy Editor for Open Food Facts" />
@@ -12,20 +12,14 @@
       href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans&display=swap"
       rel="stylesheet"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="/logo192.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="/manifest.json" />
     <!--
-      Notice the use of %PUBLIC_URL% 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
-      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`.
     -->
     <title>Taxonomy Editor</title>
   </head>
@@ -42,5 +36,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>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		# keep this folder to avoid having docker-compose create it with root owner
		# This file is used to ensure that the build folder is included in git and in the docker image (to avoid having docker-compose create the build folder with root owner)