Merge pull request #244 from ORNL-AMO/issue-240

Issue 240 - Use Env files to differentiate dev/prod deploy

.env.development

@@ -0,0 +1 @@
+REACT_APP_SERVER_ENV=development

.env.production

@@ -0,0 +1 @@
+REACT_APP_SERVER_ENV=production

.github/workflows/web.yml

@@ -25,7 +25,12 @@ jobs:
       - name: Install dependencies
         run: npm install
       - name: Build
-        run: CI=false npm run build
+        run: |
+             if [[ ${{ github.ref_name }} == "develop" ]]; then
+               CI=false npm run build:development
+             elif [[ ${{ github.ref_name }} == "main" ]]; then
+               CI=false npm run build:production    
+             fi
       - name: Upload artifact
         uses: actions/upload-artifact@v3
         with:

package.json

@@ -25,6 +25,7 @@
     "concurrently": "^8.0.1",
     "cross-env": "^7.0.3",
     "electron-log": "^4.4.8",
+    "env-cmd": "^10.1.0",
     "mui-image": "^1.0.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -38,6 +39,8 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
+    "build:development": "env-cmd -f .env.development react-scripts build",
+    "build:production": "env-cmd -f .env.production react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "electron:serve": "concurrently -k \"cross-env BROWSER=none npm run start\" \"npm run electron:start\"",

public/index.html

@@ -28,14 +28,14 @@
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-3HGPY51FT0"></script>
     <script>
-      if('%NODE_ENV%' === 'production') {
+      if('%REACT_APP_SERVER_ENV%' === 'production') {
         console.log('production');
         window.dataLayer = window.dataLayer || [];
         function gtag() { dataLayer.push(arguments); }
         gtag('js', new Date());
         gtag('config', 'G-3HGPY51FT0');        
       } else {
-        console.log('develop');
+        console.log('development');
         //don't set ga config        
       }
     </script>

src/App.tsx

@@ -120,9 +120,9 @@ export class App extends React.PureComponent<unknown, AppState> {
 
 	getInitialAppState(): AppState {
 		let startPage = Pages.start; 
-		// if (process.env.NODE_ENV == 'development') {
-		// 	startPage = Pages.selectGameSettings;
-		// }
+		if (process.env.REACT_APP_SERVER_ENV == 'development') {
+			startPage = Pages.selectGameSettings;
+		}
 		let showDashboardAtStart = false;
 		return {
 			currentPage: startPage,

src/Financing.tsx

@@ -175,7 +175,6 @@ export function setCapitalFundingMilestone(capitalFundingState: CapitalFundingSt
         }
 	} else if (!capitalFundingState.roundB.isEarned) {
         let roundBMilestonePercent = 35;
-        // let roundBMilestone = process.env.NODE_ENV == 'development' ? .8: 40;
 		savingsMilestone = checkHasSavingsMilestone(stats, roundBMilestonePercent);
 		if (savingsMilestone) {
             capitalFundingState.roundB.isEarned = true;

src/components/SelectGameSettings.tsx

@@ -82,7 +82,7 @@ export function SelectGameSettings(props: SelectGameSettingsProps) {
                 </DialogTitle>
 
                 <DialogContent>
-                    {/* {process.env.NODE_ENV == 'development' && 
+                    {process.env.REACT_APP_SERVER_ENV == 'development' && 
                         <Box m={2} p='16px' sx={{background: '#ff000052'}}>
                             <FormGroup>
                                 <FormControlLabel control={
@@ -112,7 +112,7 @@ export function SelectGameSettings(props: SelectGameSettingsProps) {
                                 </ListItem>
                             </List>              
                         </Box>
-                    } */}
+                    }
                     <Box m={2}>
                         <DialogContentText id='alert-dialog-slide-description' gutterBottom>
                             You have the option to play through in 1 OR 2-year intervals.
@@ -248,7 +248,6 @@ export function newSelectGameSettingsControl(props: SelectGameSettingsControlPro
 }
 
 export function getFinancingStartYear() {
-    // return process.env.NODE_ENV == 'development' ? 1 : 3;
     return 3;
 }