Add env variables and scripts to start it

.env

@@ -0,0 +1 @@
+REACT_APP_VERSION=$npm_package_version

.env.dev

@@ -0,0 +1 @@
+REACT_APP_ENVIRONMENT_NAME=dev

.env.prod

@@ -0,0 +1 @@
+REACT_APP_ENVIRONMENT_NAME=prod

package-lock.json

@@ -16,6 +16,7 @@
         "@testing-library/react": "^13.2.0",
         "@testing-library/user-event": "^13.5.0",
         "dayjs": "^1.11.3",
+        "env-cmd": "^10.1.0",
         "html-react-parser": "^3.0.4",
         "react": "^18.1.0",
         "react-dom": "^18.1.0",
@@ -6448,6 +6449,29 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/env-cmd": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/env-cmd/-/env-cmd-10.1.0.tgz",
+      "integrity": "sha512-mMdWTT9XKN7yNth/6N6g2GuKuJTsKMDHlQFUDacb/heQRRWOTIZ42t1rMHnQu4jYxU1ajdTeJM+9eEETlqToMA==",
+      "dependencies": {
+        "commander": "^4.0.0",
+        "cross-spawn": "^7.0.0"
+      },
+      "bin": {
+        "env-cmd": "bin/env-cmd.js"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/env-cmd/node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -19891,6 +19915,22 @@
       "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
       "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A=="
     },
+    "env-cmd": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/env-cmd/-/env-cmd-10.1.0.tgz",
+      "integrity": "sha512-mMdWTT9XKN7yNth/6N6g2GuKuJTsKMDHlQFUDacb/heQRRWOTIZ42t1rMHnQu4jYxU1ajdTeJM+9eEETlqToMA==",
+      "requires": {
+        "commander": "^4.0.0",
+        "cross-spawn": "^7.0.0"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+          "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA=="
+        }
+      }
+    },
     "error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",

package.json

@@ -11,6 +11,7 @@
     "@testing-library/react": "^13.2.0",
     "@testing-library/user-event": "^13.5.0",
     "dayjs": "^1.11.3",
+    "env-cmd": "^10.1.0",
     "html-react-parser": "^3.0.4",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
@@ -26,6 +27,8 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
+    "start:dev": "env-cmd -f .env.dev npm run start",
+    "start:prod": "env-cmd -f .env.prod npm run start ",
     "deploy:prod": "rsync -avz --progress build/ ifsalas:/home/ifsalas/web/prod --delete",
     "deploy:dev": "rsync -avz --progress build/ ifsalas:/home/ifsalas/web/dev --delete"
   },

src/components/MainMenu/index.js

@@ -10,13 +10,16 @@ import {
   ListItemIcon,
   ListItemText,
   Toolbar,
+  Typography,
 } from '@mui/material';
 import { NavLink, useNavigate } from 'react-router-dom';
 import logoImage from '../../assets/if-salas-logo.svg';
 import styles from './styles';
+import { environmentNameDashAppVersion } from '../../utils/env';
 
 function MainMenu({ options, layoutType }) {
-  const { menuContainer, navigator, item, itemIcon } = styles[layoutType];
+  const { menuContainer, envDashVersionTypography, navigator, item, itemIcon } =
+    styles[layoutType];
   const navigate = useNavigate();
   const [selectedOption, setSelectedOption] = useState(
     options.find(option => option.isActive)
@@ -42,6 +45,10 @@ function MainMenu({ options, layoutType }) {
             </ListItem>
           ))}
         </List>
+
+        <Typography sx={envDashVersionTypography} variant="body2">
+          {environmentNameDashAppVersion()}
+        </Typography>
       </Drawer>
     );
   } else if (layoutType === 'mobile') {

src/components/MainMenu/styles.js

@@ -8,6 +8,16 @@ const desktopMenuContainer = {
     boxSizing: 'border-box',
     backgroundColor: 'secondary.main',
   },
+  position: 'relative',
+};
+
+const desktopEnvDashVersionTypography = {
+  position: 'absolute',
+  bottom: '0',
+  textAlign: 'center',
+  color: '#ffffff',
+  width: '100%',
+  marginBottom: '20px',
 };
 
 const desktopToolbar = {
@@ -35,6 +45,7 @@ const desktopListItemIcon = {
 
 const desktop = {
   menuContainer: desktopMenuContainer,
+  envDashVersionTypography: desktopEnvDashVersionTypography,
   navigator: desktopToolbar,
   item: desktopListItem,
   itemIcon: desktopListItemIcon,
@@ -50,6 +61,7 @@ const mobileMenuContainer = {
 
 const mobile = {
   menuContainer: mobileMenuContainer,
+  envDashVersionTypography: null,
   navigator: null,
   item: null,
   itemIcon: null,
@@ -58,6 +70,7 @@ const mobile = {
 // ========== Unset ==========
 const unset = {
   menuContainer: null,
+  envDashVersionTypography: null,
   navigator: null,
   item: null,
   itemIcon: null,

src/utils/env.js

@@ -0,0 +1,13 @@
+function appVersion() {
+  return process.env.REACT_APP_VERSION;
+}
+
+function environmentName() {
+  return process.env.REACT_APP_ENVIRONMENT_NAME;
+}
+
+function environmentNameDashAppVersion() {
+  return `${environmentName()}-${appVersion()}`;
+}
+
+export { environmentNameDashAppVersion };