Skip to content

Commit 810a218

Browse files
eric-nguyen-csalexgarel
eric-nguyen-cs
and
alexgarel
authored
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]>
1 parent 2c508cb commit 810a218

15 files changed

+6823
-1192
lines changed

‎.env

+3-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@ TAXONOMY_EDITOR_EXPOSE=127.0.0.1:8091
1313
# it must either start with : or be empty
1414
PUBLIC_TAXONOMY_EDITOR_PORT=:8091
1515
# this one is used to expose the websocket in dev and shoudl match PUBLIC_TAXONOMY_EDITOR_PORT but without leading ":"
16-
WDS_SOCKET_PORT=8091
16+
VITE_SERVER_PORT=3000
17+
# in docker we want to expose the server on all interfaces for frontend nginx to reach it
18+
VITE_SERVER_HOST=0.0.0.0
1719
# API scheme is useful because, in prod, we have to proxy and already proxied request
1820
# and loose the original scheme
1921
API_SCHEME=http

‎.github/workflows/container-deploy.yml

+3
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,9 @@ jobs:
145145
echo "TAXONOMY_EDITOR_DOMAIN=${{ env.TAXONOMY_EDITOR_DOMAIN }}" >> .env
146146
# should be blank in production
147147
echo "PUBLIC_TAXONOMY_EDITOR_PORT=" >> .env
148+
# in docker we want to expose the server on all interfaces for frontend nginx to reach it
149+
echo "VITE_SERVER_PORT=3000" >> .env
150+
echo "VITE_SERVER_HOST=0.0.0.0" >> .env
148151
# we use https
149152
echo "API_SCHEME=https" >> .env
150153
# the PAT is environment dependant

‎Makefile

+1-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ install: ## Install dependencies
4141

4242
local_frontend: ## Run the frontend locally
4343
@echo "🍜 Running frontend (ctrl+C to stop)"
44-
cd taxonomy-editor-frontend && REACT_APP_API_URL="http://localhost:8080/" npm start
44+
cd taxonomy-editor-frontend && VITE_APP_API_URL="http://localhost:8080/" npm start
4545

4646
local_backend: ## Run the backend locally
4747
@echo "🍜 Running backend (ctrl+C to stop)"

‎docker/dev.yml

+6-6
Original file line numberDiff line numberDiff line change
@@ -49,13 +49,11 @@ services:
4949
USER_UID: ${USER_UID:-1000}
5050
USER_GID: ${USER_GID:-1000}
5151
environment:
52-
- REACT_APP_API_URL=//api.${TAXONOMY_EDITOR_DOMAIN}${PUBLIC_TAXONOMY_EDITOR_PORT:-80}/
53-
- WDS_SOCKET_HOST=ui.${TAXONOMY_EDITOR_DOMAIN}
54-
- WDS_SOCKET_PORT=${WDS_SOCKET_PORT:-80}
52+
- VITE_APP_API_URL=//api.${TAXONOMY_EDITOR_DOMAIN}${PUBLIC_TAXONOMY_EDITOR_PORT:-80}/
53+
- VITE_SERVER_HOST=${VITE_SERVER_HOST:-localhost}
54+
- VITE_SERVER_PORT=${VITE_SERVER_PORT:-80}
5555
- TAXONOMY_EDITOR_DOMAIN
5656
- NODE_ENV=development
57-
# avoid host check in dev
58-
- DANGEROUSLY_DISABLE_HOST_CHECK=true
5957
# this is the command to run dev server
6058
command: ["npm", "start"]
6159
volumes:
@@ -64,8 +62,10 @@ services:
6462
- ./taxonomy-editor-frontend/public:/opt/taxonomy-editor/public
6563
- ./taxonomy-editor-frontend/src:/opt/taxonomy-editor/src
6664
- ./taxonomy-editor-frontend/.eslintrc.json:/opt/taxonomy-editor/.eslintrc.json
67-
- ./taxonomy-editor-frontend/craco.config.js:/opt/taxonomy-editor/craco.config.js
65+
- ./taxonomy-editor-frontend/.prettierrc.json:/opt/taxonomy-editor/.prettierrc.json
66+
- ./taxonomy-editor-frontend/index.html:/opt/taxonomy-editor/index.html
6867
- ./taxonomy-editor-frontend/tsconfig.js:/opt/taxonomy-editor/tsconfig.js
68+
- ./taxonomy-editor-frontend/vite.config.ts:/opt/taxonomy-editor/vite.config.ts
6969
- ./backend/openapi/openapi.json:/opt/backend/openapi/openapi.json
7070
taxonomy_frontend:
7171
image: taxonomy-editor/taxonomy_frontend:dev

‎taxonomy-editor-frontend/Dockerfile

+3-1
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,10 @@ ENV PATH /opt/taxonomy-editor/node_modules/.bin:$PATH
3333
COPY --chown=node:node src /opt/taxonomy-editor/src
3434
COPY --chown=node:node public /opt/taxonomy-editor/public
3535
COPY --chown=node:node .eslintrc.json /opt/taxonomy-editor/.eslintrc.json
36-
COPY --chown=node:node craco.config.js /opt/taxonomy-editor/craco.config.js
36+
COPY --chown=node:node .prettierrc.json /opt/taxonomy-editor/.prettierrc.json
37+
COPY --chown=node:node index.html /opt/taxonomy-editor/index.html
3738
COPY --chown=node:node tsconfig.json /opt/taxonomy-editor/tsconfig.json
39+
COPY --chown=node:node vite.config.ts /opt/taxonomy-editor/vite.config.ts
3840
# build for production
3941
# no need of a public url, we are at the root
4042
RUN npm run build

‎taxonomy-editor-frontend/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ This is the main user interface developed in React, which works in conjunction w
1313
- [Material-UI](https://mui.com/)
1414
- [iso-639-1](https://www.npmjs.com/package/iso-639-1)
1515

16-
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.
16+
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.
1717

1818
## Setup Dev Environment
1919

‎taxonomy-editor-frontend/build/.empty

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
# keep this folder to avoid having docker-compose create it with root owner
1+
# 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)

‎taxonomy-editor-frontend/public/index.html ‎taxonomy-editor-frontend/index.html

+4-9
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
5+
<link rel="icon" href="/favicon.ico" />
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
77
<meta name="theme-color" content="#000000" />
88
<meta name="description" content="Taxonomy Editor for Open Food Facts" />
@@ -12,20 +12,14 @@
1212
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans&display=swap"
1313
rel="stylesheet"
1414
/>
15-
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
15+
<link rel="apple-touch-icon" href="/logo192.png" />
1616
<!--
1717
manifest.json provides metadata used when your web app is installed on a
1818
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
1919
-->
20-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
20+
<link rel="manifest" href="/manifest.json" />
2121
<!--
22-
Notice the use of %PUBLIC_URL% in the tags above.
23-
It will be replaced with the URL of the `public` folder during the build.
2422
Only files inside the `public` folder can be referenced from the HTML.
25-
26-
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
27-
work correctly both with client-side routing and a non-root public URL.
28-
Learn how to configure a non-root public URL by running `npm run build`.
2923
-->
3024
<title>Taxonomy Editor</title>
3125
</head>
@@ -42,5 +36,6 @@
4236
To begin the development, run `npm start` or `yarn start`.
4337
To create a production bundle, use `npm run build` or `yarn build`.
4438
-->
39+
<script type="module" src="/src/index.tsx"></script>
4540
</body>
4641
</html>

0 commit comments

Comments
 (0)