yaptide · NiEkOKsU · Aug 6, 2024 · Aug 8, 2024 · Aug 12, 2024 · Aug 13, 2024
diff --git a/Dockerfile b/Dockerfile
@@ -82,7 +82,7 @@ RUN rm /etc/nginx/conf.d/default.conf
 COPY --from=cert-gen /certs /etc/nginx/conf.d
 
 # Copy the build folder from the build stage
-COPY --from=build /usr/src/app/build /usr/share/nginx/html
+COPY --from=build /usr/src/app/dist /usr/share/nginx/html
 
 # Copy the custom Nginx configuration
 COPY nginx.conf /etc/nginx/conf.d/app.conf

diff --git a/README.md b/README.md
@@ -49,7 +49,7 @@ The page will reload if you make edits.
 Currently, app can be configured by setting the following environment variables in .env file in the main project directory (same as `package.json` is located).
 
 #### Setting communication with backend
-UI can be deployed on different machine (with different IP) than a backend. During build phase the UI can be configured to talk to given backend instance via `REACT_APP_BACKEND_URL` environmental variable. To adjust it put following line in the `.env` file:
+UI can be deployed on different machine (with different IP) than a backend. During build phase the UI can be configured to talk to given backend instance via `VITE_REACT_APP_BACKEND_URL` environmental variable. To adjust it put following line in the `.env` file:
 
 If the backend is deployed as a set of docker containers, then Flask is listening on port **6000** for HTTP requests (HTTPS is supported only via NGINX proxy) on a host called `yaptide_flask`. 
 Additionally, the main NGINX proxy server listens on port **5000** for plain HTTP and **8443** for HTTPS. Relevant configuration can be found in this [config file](https://github.com/yaptide/yaptide/blob/master/nginx.conf) of backend 
@@ -58,9 +58,9 @@ Additionally, the main NGINX proxy server listens on port **5000** for plain HTT
 
 
 #### Other configuration options are:
-- `REACT_APP_TARGET` - if set to `demo`, app will not require authentication and will be preloaded with demo results (this version is available at <https://yaptide.github.io/web_dev/>)
-- `REACT_APP_ALT_AUTH` - if set to `plg`, app will use plgrid authentication
-- `REACT_APP_DEPLOYMENT` - if set to `dev`, configuration wil be editable from the browser console. For example, you can change the backend URL by typing `window.BACKEND_URL="http://mynew.url"` in the browser console.
+- `VITE_REACT_APP_TARGET` - if set to `demo`, app will not require authentication and will be preloaded with demo results (this version is available at <https://yaptide.github.io/web_dev/>)
+- `VITE_REACT_APP_ALT_AUTH` - if set to `plg`, app will use plgrid authentication
+- `VITE_REACT_APP_DEPLOYMENT` - if set to `dev`, configuration wil be editable from the browser console. For example, you can change the backend URL by typing `window.BACKEND_URL="http://mynew.url"` in the browser console.
 
 ### Useful commands
 

diff --git a/global.d.ts b/global.d.ts
@@ -0,0 +1,5 @@
+// global.d.ts
+declare module '*.json' {
+	const value: any;
+	export default value;
+}
diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -1,10 +1,10 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
 		<link
 			rel="icon"
-			href="%PUBLIC_URL%/favicon.ico" />
+			href="/favicon.ico" />
 		<meta
 			name="viewport"
 			content="width=device-width, initial-scale=1" />
@@ -16,14 +16,14 @@
 			content="Yaptide web user interface" />
 		<link
 			rel="apple-touch-icon"
-			href="%PUBLIC_URL%/logo192.png" />
+			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" />
+			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.
@@ -39,6 +39,9 @@
 
 	<body>
 		<div id="root"></div>
+		<script
+			type="module"
+			src="/src/index.tsx"></script>
 		<!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.