Replace Create React App with Vite

docs/source/dev/front-end.md

@@ -1,5 +1,13 @@
 # Front-end architecture
 
+## Environment variables
+
+Environment variables are defined in file `ui/.env`. To override them, create your own local environment file as explained in the [Vite documentation](https://vitejs.dev/guide/env-and-mode.html#env-files) – e.g. `ui/.env.local` or `ui/.env.production.local`.
+
+The following environment variables are available:
+
+- `VITE_REDUX_LOGGER_ENABLED`: whether to log Redux actions to the browser console (disabled by default); useful if you're unable to install the [Redux devtools](https://github.com/reduxjs/redux-devtools/tree/main/extension#installation) browser extension.
+
 ## Fetching layer
 
 - For each back-end API called by the front-end, there is a file under `src/api/` named after that API (e.g. `beamline.js`, `login.js` ...)

ui/.env

@@ -0,0 +1,8 @@
+#####
+# UI ENVIRONMENT VARIABLEs
+# Copy and configure the variables below in your own `.env.local` or `.env.[mode].local` file
+# https://vitejs.dev/guide/env-and-mode.html#env-files
+#####
+
+# Redux logger ('true' to enable)
+VITE_REDUX_LOGGER_ENABLED=

ui/package.json

@@ -52,6 +52,7 @@
     "react-zoom-pan-pinch": "3.3.0",
     "redux": "4.1.2",
     "redux-form": "^8.3.8",
+    "redux-logger": "3.0.6",
     "redux-thunk": "^2.4.1",
     "slick-carousel": "^1.8.1",
     "socket.io-client": "^4.6.1",

ui/src/store.js

@@ -1,11 +1,19 @@
 import { createStore, applyMiddleware } from 'redux';
+import { createLogger } from 'redux-logger';
 import thunk from 'redux-thunk';
 import rootReducer from './reducers';
 import { composeWithDevTools } from '@redux-devtools/extension';
 
+const middleware = [
+  thunk,
+  ...(import.meta.env.VITE_REDUX_LOGGER_ENABLED === 'true'
+    ? [createLogger()]
+    : []),
+];
+
 export const store = createStore(
   rootReducer,
-  composeWithDevTools(applyMiddleware(thunk)),
+  composeWithDevTools(applyMiddleware(...middleware)),
 );
 
 // Enable Hot Module Replacement for reducers