diff --git a/.env b/.env new file mode 100644 index 0000000..0454adf --- /dev/null +++ b/.env @@ -0,0 +1 @@ +REACT_APP_VERSION=$npm_package_version diff --git a/.env.dev b/.env.dev new file mode 100644 index 0000000..7c0da2a --- /dev/null +++ b/.env.dev @@ -0,0 +1 @@ +REACT_APP_ENVIRONMENT_NAME=dev diff --git a/.env.prod b/.env.prod new file mode 100644 index 0000000..96fd137 --- /dev/null +++ b/.env.prod @@ -0,0 +1 @@ +REACT_APP_ENVIRONMENT_NAME=prod diff --git a/.github/workflows/deploy-dev.yml b/.github/workflows/deploy-dev.yml new file mode 100644 index 0000000..0e2f590 --- /dev/null +++ b/.github/workflows/deploy-dev.yml @@ -0,0 +1,28 @@ +name: Deploy to Development + +on: + push: + branches: [ "development" ] + +jobs: + build-and-deploy: + + runs-on: ubuntu-latest + + env: + SSH_KEY: ${{secrets.SSH_KEY}} + + steps: + - uses: actions/checkout@v3 + - name: Use Node.js 16 + uses: actions/setup-node@v3 + with: + node-version: 16 + cache: 'npm' + - run: mkdir ~/.ssh + - run: 'echo "$SSH_KEY" >> ~/.ssh/id_rsa_ifsalas' + - run: chmod 400 ~/.ssh/id_rsa_ifsalas + - run: echo -e "Host ifsalas\n\tUser ifsalas\n\tHostname 45.76.5.44\n\tIdentityFile ~/.ssh/id_rsa_ifsalas\n\tStrictHostKeyChecking No" >> ~/.ssh/config + - run: npm install + - run: npm run build:dev + - run: npm run deploy:dev diff --git a/.github/workflows/deploy-prod.yml b/.github/workflows/deploy-prod.yml index 6fa76db..179ee2b 100644 --- a/.github/workflows/deploy-prod.yml +++ b/.github/workflows/deploy-prod.yml @@ -24,5 +24,5 @@ jobs: - run: chmod 400 ~/.ssh/id_rsa_ifsalas - run: echo -e "Host ifsalas\n\tUser ifsalas\n\tHostname 45.76.5.44\n\tIdentityFile ~/.ssh/id_rsa_ifsalas\n\tStrictHostKeyChecking No" >> ~/.ssh/config - run: npm install - - run: npm run build + - run: npm run build:prod - run: npm run deploy:prod diff --git a/package-lock.json b/package-lock.json index 19157e9..041b2a8 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index ef39df4..bf5f7b6 100644 --- a/package.json +++ b/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,7 +27,12 @@ "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", - "deploy:prod": "rsync -avz --progress build/ ifsalas:/home/ifsalas/web/prod --delete" + "start:dev": "env-cmd -f .env.dev npm run start", + "start:prod": "env-cmd -f .env.prod npm run start ", + "build:dev": "env-cmd -f .env.dev npm run build", + "build:prod": "env-cmd -f .env.prod npm run build", + "deploy:prod": "rsync -avz --progress build/ ifsalas:/home/ifsalas/web/prod --delete", + "deploy:dev": "rsync -avz --progress build/ ifsalas:/home/ifsalas/web/dev --delete" }, "eslintConfig": { "extends": [ diff --git a/src/components/MainMenu/index.js b/src/components/MainMenu/index.js index ab07d76..54c59bc 100644 --- a/src/components/MainMenu/index.js +++ b/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 }) { ))} + + + {environmentNameDashAppVersion()} + ); } else if (layoutType === 'mobile') { diff --git a/src/components/MainMenu/styles.js b/src/components/MainMenu/styles.js index 5ba666e..3cbbd2d 100644 --- a/src/components/MainMenu/styles.js +++ b/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, diff --git a/src/utils/env.js b/src/utils/env.js new file mode 100644 index 0000000..604c319 --- /dev/null +++ b/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 };