build: use vite env variables

johhnry · johhnry · commit 7512876b2e96 · 2023-04-20T01:45:37.000+02:00
diff --git a/.env.example b/.env.example
@@ -1,13 +1,20 @@
-REACT_APP_VERSION=$npm_package_version
-REACT_APP_NAME=$npm_package_name
+# Url of the Zou server
+VITE_ZOU_API=
 
-REACT_APP_ZOU_API=
-REACT_APP_WS_SERVER=
+# Url of the silex websocket server
+VITE_WS_SERVER=http://localhost:5118
 
-REACT_APP_TRACTOR_URL=
-REACT_APP_TRACTOR_BLADE=
-REACT_APP_TRACTOR_LOG_URL=
+# Url of the tractor interface
+VITE_TRACTOR_URL=
 
-REACT_APP_TICKET_URL=
+# Url of the Tractor blade api
+VITE_TRACTOR_BLADE=
 
-REACT_APP_HARVEST_URL=
+# Url for Tractor logs retrieval
+VITE_TRACTOR_LOG_URL=
+
+# Url of your ticket system
+VITE_TICKET_URL=
+
+# Url of Harvest
+VITE_HARVEST_URL=
diff --git a/.gitignore b/.gitignore
@@ -25,3 +25,4 @@ yarn-error.log*
 .env
 
 *.tsbuildinfo
+dist
diff --git a/index.html b/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" />
     <title>Silex</title>
diff --git a/package.json b/package.json
@@ -11,10 +11,10 @@
     "@emotion/styled": "^11.3.0",
     "@mui/icons-material": "^5.8.3",
     "@mui/material": "^5.2.1",
-    "axios": "^1.3.5",
+    "axios": "^1.3.6",
     "color-hash": "^2.0.1",
     "deepmerge": "^4.2.2",
-    "graphql": "^15.6.0",
+    "graphql": "^16.6.0",
     "is-electron": "^2.2.0",
     "notistack": "^3.0.1",
     "react": "^18.2.0",
@@ -53,7 +53,7 @@
     "@commitlint/cli": "^17.6.1",
     "@commitlint/config-conventional": "^17.6.1",
     "@types/color-hash": "^1.0.1",
-    "@types/node": "^18.15.11",
+    "@types/node": "^18.15.12",
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
     "@types/react-router-dom": "^5.1.9",
diff --git a/src/components/pages/DCCClientsPage/DCCClientsPage.tsx b/src/components/pages/DCCClientsPage/DCCClientsPage.tsx
@@ -20,7 +20,7 @@ const DCCClientsPage = (): JSX.Element => {
         <Alert severity="error">
           <AlertTitle>Connection error</AlertTitle>
           Can{"'"}t connect to the Silex WS server at{" "}
-          {process.env.REACT_APP_WS_SERVER} —{" "}
+          {import.meta.env.VITE_WS_SERVER} —{" "}
           <strong>make sure it{"'"}s running or restart it</strong>
         </Alert>
       );
diff --git a/src/components/pages/HarvestPage/HarvestPage.tsx b/src/components/pages/HarvestPage/HarvestPage.tsx
@@ -4,9 +4,8 @@ const HarvestPage = (): JSX.Element => {
       title="Harvest"
       width="100%"
       height="100%"
-      src={process.env.REACT_APP_HARVEST_URL}
-      frameBorder="0"
-      style={{ height: "100vh" }}
+      src={import.meta.env.VITE_HARVEST_URL}
+      style={{ height: "100vh", border: "0px" }}
     ></iframe>
   );
 };
diff --git a/src/components/pages/LoginPage/LoginPage.tsx b/src/components/pages/LoginPage/LoginPage.tsx
@@ -81,7 +81,9 @@ const LoginPage = (): JSX.Element => {
           );
         } else {
           setError(
-            `Zou server at ${process.env.REACT_APP_ZOU_API} is not reachable, check your internet connection or retry later`
+            `Zou server at ${
+              import.meta.env.VITE_ZOU_API
+            } is not reachable, check your internet connection or retry later`
           );
         }
       });
diff --git a/src/components/pages/LogsPage/LogsPage.tsx b/src/components/pages/LogsPage/LogsPage.tsx
@@ -26,7 +26,7 @@ const LogFile = ({ fileName, title }: LogFileProps) => {
   const fetchLogs = useCallback(() => {
     axios
       .get<{ totalLines: number; lines: string[] }>(
-        `${process.env.REACT_APP_WS_SERVER}/log/${fileName}?fromEnd=${lines}`
+        `${import.meta.env.VITE_WS_SERVER}/log/${fileName}?fromEnd=${lines}`
       )
       .then((response) => {
         setLogs({
@@ -44,7 +44,7 @@ const LogFile = ({ fileName, title }: LogFileProps) => {
 
   const handleClearLog = () => {
     axios
-      .delete(`${process.env.REACT_APP_WS_SERVER}/log/${fileName}`)
+      .delete(`${import.meta.env.VITE_WS_SERVER}/log/${fileName}`)
       .then(() => {
         enqueueSnackbar(`Cleared logfile ${fileName}`, { variant: "success" });
         fetchLogs();
diff --git a/src/components/pages/RunningJobsPage/ProcessRow.tsx b/src/components/pages/RunningJobsPage/ProcessRow.tsx
@@ -15,7 +15,9 @@ const ProcessRow = ({ p }: { p: RunningJob }): JSX.Element => {
 
   useEffect(() => {
     const fetchLogs = () => {
-      const logsURL = `${process.env.REACT_APP_TRACTOR_LOG_URL}/${p.login}/J${p.jid}/T${p.tid}.log`;
+      const logsURL = `${import.meta.env.VITE_TRACTOR_LOG_URL}/${p.login}/J${
+        p.jid
+      }/T${p.tid}.log`;
       axios
         .get<string>(logsURL)
         .then((response) =>
diff --git a/src/components/pages/TicketPage/TicketPage.tsx b/src/components/pages/TicketPage/TicketPage.tsx
@@ -4,7 +4,7 @@ const TicketPage = (): JSX.Element => {
   return (
     <PageWrapper title="Ticket" goBack fullHeight>
       <webview
-        src={process.env.REACT_APP_TICKET_URL}
+        src={import.meta.env.VITE_TICKET_URL}
         style={{ width: "100%", height: "100%" }}
       ></webview>
     </PageWrapper>
diff --git a/src/components/pages/TractorPage/TractorPage.tsx b/src/components/pages/TractorPage/TractorPage.tsx
@@ -4,9 +4,8 @@ const TractorPage = (): JSX.Element => {
       title="Tractor"
       width="100%"
       height="100%"
-      src={process.env.REACT_APP_TRACTOR_URL}
-      frameBorder="0"
-      style={{ height: "100vh" }}
+      src={import.meta.env.VITE_TRACTOR_URL}
+      style={{ height: "100vh", border: "0px" }}
     ></iframe>
   );
 };
diff --git a/src/components/structure/Menu/Menu.tsx b/src/components/structure/Menu/Menu.tsx
@@ -37,21 +37,21 @@ const links = [
     to: "/tractor",
     exact: true,
     openInNewWindow: true,
-    openTo: process.env.REACT_APP_TRACTOR_URL,
+    openTo: import.meta.env.VITE_TRACTOR_URL,
   },
   {
     text: "👨‍🌾 Harvest",
     to: "/harvest",
     exact: true,
     openInNewWindow: true,
-    openTo: process.env.REACT_APP_HARVEST_URL,
+    openTo: import.meta.env.VITE_HARVEST_URL,
   },
   {
     text: "Ticket",
     to: "/ticket",
     exact: true,
     openInNewWindow: true,
-    openTo: process.env.REACT_APP_TICKET_URL,
+    openTo: import.meta.env.VITE_TICKET_URL,
   },
 ];
 
@@ -170,7 +170,7 @@ const Menu = ({ closeMenu, open }: MenuProps): JSX.Element => {
         }}
       >
         <Typography sx={{ color: "rgba(150, 149, 149, 0.5)" }} fontSize={12}>
-          {process.env.REACT_APP_NAME} v{process.env.REACT_APP_VERSION}
+          {import.meta.env.VITE_APP_NAME} v{import.meta.env.VITE_APP_VERSION}
         </Typography>
 
         <div style={{ marginLeft: "10px" }}>
diff --git a/src/context/GraphQLClientContext.tsx b/src/context/GraphQLClientContext.tsx
@@ -26,7 +26,7 @@ export const ProvideGraphQLClient = ({
 }: ProvideGraphQLClientProps): JSX.Element => {
   const [client] = useState(
     new ApolloClient({
-      uri: process.env.REACT_APP_ZOU_API + "/api/graphql",
+      uri: import.meta.env.VITE_ZOU_API + "/api/graphql",
       cache: new InMemoryCache(),
     })
   );
diff --git a/src/context/SocketContext.tsx b/src/context/SocketContext.tsx
@@ -30,7 +30,7 @@ interface ProvideSocketProps {
 
 // Initialize a global socket instance
 export const uiSocket: UINamespaceSocket = io(
-  `${process.env.REACT_APP_WS_SERVER}/ui`,
+  `${import.meta.env.VITE_WS_SERVER}/ui`,
   { reconnectionDelay: 2000 }
 );
 
@@ -61,7 +61,7 @@ export const ProvideSocket = ({
       });
 
       enqueueSnackbar(
-        `Connected to ${process.env.REACT_APP_WS_SERVER} (${response.msg})`,
+        `Connected to ${import.meta.env.VITE_WS_SERVER} (${response.msg})`,
         {
           variant: "success",
         }
@@ -77,7 +77,7 @@ export const ProvideSocket = ({
     setDCCClients([]);
 
     enqueueSnackbar(
-      `WS server ${process.env.REACT_APP_WS_SERVER} disconnected`,
+      `WS server ${import.meta.env.VITE_WS_SERVER} disconnected`,
       {
         variant: "error",
       }
diff --git a/src/env.d.ts b/src/env.d.ts
@@ -0,0 +1,31 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_APP_NAME: string;
+  readonly VITE_APP_VERSION: string;
+
+  /** Url of the Zou server */
+  readonly VITE_ZOU_API: string;
+
+  /** Url of the silex websocket server */
+  readonly VITE_WS_SERVER: string;
+
+  /** Url of the Tractor blade api */
+  readonly VITE_TRACTOR_BLADE: string;
+
+  /** Url of the tractor TV */
+  readonly VITE_TRACTOR_URL: string;
+
+  /** Url for Tractor logs retrieval */
+  readonly VITE_TRACTOR_LOG_URL: string;
+
+  /** Url of your ticket system */
+  readonly VITE_TICKET_URL: string;
+
+  /** Url of Harvest */
+  readonly VITE_HARVEST_URL: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/src/types/modules/nodejs.d.ts b/src/types/modules/nodejs.d.ts
diff --git a/src/utils/zou.ts b/src/utils/zou.ts
@@ -22,7 +22,7 @@ type PromiseResponse<T> = Promise<AxiosResponse<T>>;
  * @param path
  */
 export function zouURL(path: string): string {
-  return `${process.env.REACT_APP_ZOU_API}/${path}`;
+  return `${import.meta.env.VITE_ZOU_API}/${path}`;
 }
 
 /**
@@ -87,7 +87,7 @@ export function isAuthenticated(): PromiseResponse<{
   return new Promise((resolve, reject) => {
     // Check if the token is on the socket server side
     axios
-      .get(`${process.env.REACT_APP_WS_SERVER}/auth/token`)
+      .get(`${import.meta.env.VITE_WS_SERVER}/auth/token`)
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       .then((_token) => {
         // Check if authenticated on the zou side
@@ -131,7 +131,7 @@ export function login(data: LoginInput): LoginResponse {
   return new Promise((resolve, reject) => {
     // Login to the WS server first
     axios
-      .post(`${process.env.REACT_APP_WS_SERVER}/auth/login`, data)
+      .post(`${import.meta.env.VITE_WS_SERVER}/auth/login`, data)
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       .then((_response) => {
         // Login directly to Zou for cookies
@@ -149,7 +149,7 @@ export function login(data: LoginInput): LoginResponse {
  * @returns logout if successfull
  */
 export function logout(): PromiseResponse<{ logout: boolean }> {
-  axios.post(`${process.env.REACT_APP_WS_SERVER}/auth/logout`);
+  axios.post(`${import.meta.env.VITE_WS_SERVER}/auth/logout`);
   return getWithCredentials("auth/logout");
 }
 
diff --git a/vite.config.ts b/vite.config.ts
@@ -10,4 +10,8 @@ export default defineConfig({
     },
   },
   plugins: [react()],
+  define: {
+    VITE_APP_NAME: JSON.stringify(process.env.npm_package_name),
+    VITE_APP_VERSION: JSON.stringify(process.env.npm_package_version),
+  },
 });
diff --git a/yarn.lock b/yarn.lock
@@ -947,11 +947,16 @@
   resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.2.tgz#ee771e2ba4b3dc5b372935d549fd9617bf345b8c"
   integrity sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==
 
-"@types/node@*", "@types/node@^18.15.11":
+"@types/node@*":
   version "18.15.11"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.15.11.tgz#b3b790f09cb1696cffcec605de025b088fa4225f"
   integrity sha512-E5Kwq2n4SbMzQOn6wnmBjuK9ouqlURrcZDVfbo9ftDDTFt3nk7ZKK4GMOzoYgnpQJKcxwQw+lGaBvvlMo0qN/Q==
 
+"@types/node@^18.15.12":
+  version "18.15.12"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.15.12.tgz#833756634e78c829e1254db006468dadbb0c696b"
+  integrity sha512-Wha1UwsB3CYdqUm2PPzh/1gujGCNtWVUYF0mB00fJFoR4gTyWTDPjSm+zBF787Ahw8vSGgBja90MkgFwvB86Dg==
+
 "@types/normalize-package-data@^2.4.0":
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"
@@ -1332,10 +1337,10 @@ available-typed-arrays@^1.0.5:
   resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz#92f95616501069d07d10edb2fc37d3e1c65123b7"
   integrity sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==
 
-axios@^1.3.5:
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-1.3.5.tgz#e07209b39a0d11848e3e341fa087acd71dadc542"
-  integrity sha512-glL/PvG/E+xCWwV8S6nCHcrfg1exGx7vxyUIivIA1iL7BIh6bePylCfVHwp6k13ao7SATxB6imau2kqY+I67kw==
+axios@^1.3.6:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.3.6.tgz#1ace9a9fb994314b5f6327960918406fa92c6646"
+  integrity sha512-PEcdkk7JcdPiMDkvM4K6ZBRYq9keuVJsToxm2zQIM70Qqo2WHTdJZMXcG9X+RmRp2VPNUQC8W1RAGbgt6b1yMg==
   dependencies:
     follow-redirects "^1.15.0"
     form-data "^4.0.0"
@@ -2463,10 +2468,10 @@ graphql-tag@^2.12.6:
   dependencies:
     tslib "^2.1.0"
 
-graphql@^15.6.0:
-  version "15.8.0"
-  resolved "https://registry.yarnpkg.com/graphql/-/graphql-15.8.0.tgz#33410e96b012fa3bdb1091cc99a94769db212b38"
-  integrity sha512-5gghUc24tP9HRznNpV2+FIoq3xKkj5dTQqf4v0CpdPbFVwFkWoxOM+o+2OC9ZSvjEMTjfmG9QT+gcvggTwW1zw==
+graphql@^16.6.0:
+  version "16.6.0"
+  resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.6.0.tgz#c2dcffa4649db149f6282af726c8c83f1c7c5fdb"
+  integrity sha512-KPIBPDlW7NxrbT/eh4qPXz5FiFdL5UbaA0XUNz2Rp3Z3hqBSkbj0GVjwFDztsWVauZUWsbKHgMg++sk8UX0bkw==
 
 hard-rejection@^2.1.0:
   version "2.1.0"

Original file line number	Diff line number	Diff line change
`@@ -25,3 +25,4 @@ yarn-error.log*`
`25`	`25`	`.env`
`26`	`26`
`27`	`27`	`*.tsbuildinfo`
	`28`	`+dist`
Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@ interface ProvideSocketProps {`
`30`	`30`
`31`	`31`	`// Initialize a global socket instance`
`32`	`32`	`export const uiSocket: UINamespaceSocket = io(`
`33`		- `${process.env.REACT_APP_WS_SERVER}/ui`,
	`33`	+ `${import.meta.env.VITE_WS_SERVER}/ui`,
`34`	`34`	`{ reconnectionDelay: 2000 }`
`35`	`35`	`);`
`36`	`36`
`@@ -61,7 +61,7 @@ export const ProvideSocket = ({`
`61`	`61`	`});`
`62`	`62`
`63`	`63`	`enqueueSnackbar(`
`64`		- `Connected to ${process.env.REACT_APP_WS_SERVER} (${response.msg})`,
	`64`	+ `Connected to ${import.meta.env.VITE_WS_SERVER} (${response.msg})`,
`65`	`65`	`{`
`66`	`66`	`variant: "success",`
`67`	`67`	`}`
`@@ -77,7 +77,7 @@ export const ProvideSocket = ({`
`77`	`77`	`setDCCClients([]);`
`78`	`78`
`79`	`79`	`enqueueSnackbar(`
`80`		- `WS server ${process.env.REACT_APP_WS_SERVER} disconnected`,
	`80`	+ `WS server ${import.meta.env.VITE_WS_SERVER} disconnected`,
`81`	`81`	`{`
`82`	`82`	`variant: "error",`
`83`	`83`	`}`