Update guide for react demo

homepage/guide_react_deploy.html

@@ -190,27 +190,48 @@ <h5 style="line-height: 49.2px">Step 19:</h5>
             </div>
 
             <h5 style="line-height: 49.2px">Step 20:</h5>
+            <div class="row">
+                Scroll down the page, and click on the 'Add environment variables' button.
+                <img src="./imgs/screenshots/react_demo/img_24_01.png" alt="Deploy app" style="width: 100%; padding: 15px;"/>
+                <br/>
+            </div>
+
+            <h5 style="line-height: 49.2px">Step 21:</h5>
+            <div class="row">
+                Next click on the 'New variable' button that just appeared. This will allow you to add a new environment variable.
+                <img src="./imgs/screenshots/react_demo/img_24_02.png" alt="Deploy app" style="width: 100%; padding: 15px;"/>
+                <br/>
+            </div>
+
+            <h5 style="line-height: 49.2px">Step 22:</h5>
+            <div class="row">
+                A new row will have appeared where you can specify the environment variable. Set the key as <code>PUBLIC_URL</code> and value as <code>.</code> (i.e. just a dot).
+                <img src="./imgs/screenshots/react_demo/img_24_03.png" alt="Deploy app" style="width: 100%; padding: 15px;"/>
+                <br/>
+            </div>
+
+            <h5 style="line-height: 49.2px">Step 23:</h5>
             <div class="row">
                 Finally, click on 'Deploy SITENAME' (i.e. Deploy neoviewerdemo in this case) at the bottom of the page to deploy the app.
                 <img src="./imgs/screenshots/react_demo/img_25.png" alt="Deploy app" style="width: 100%; padding: 15px;"/>
                 <br/>
             </div>
 
-            <h5 style="line-height: 49.2px">Step 21:</h5>
+            <h5 style="line-height: 49.2px">Step 24:</h5>
             <div class="row">
                 This will take a few minutes to complete. You shall see the deploy status go through various stages, such as 'Starting Up', 'Building', and so on. Once completed successfully, the status will be set as 'published', as shown below. You can now visit the URL of your site (in this case: https://neoviewerdemo.netlify.app) to see the deployed app.
                 <img src="./imgs/screenshots/react_demo/img_27.png" alt="Deploy complete" style="width: 100%; padding: 15px;"/>
                 <br/>
             </div>
 
-            <h5 style="line-height: 49.2px">Step 22:</h5>
+            <h5 style="line-height: 49.2px">Step 25:</h5>
             <div class="row">
                 The deployed app is now available at the specified URL. You can share this URL with others to show them your app. You can also make changes to the app, via changes to your fork of the project's GitHub directory, and redeploy it at any time.
                 <img src="./imgs/screenshots/react_demo/img_28.png" alt="Visit app" style="width: 100%; padding: 15px;"/>
                 <br/>
             </div>
 
-            <h5 style="line-height: 49.2px">Step 23:</h5>
+            <h5 style="line-height: 49.2px">Step 26:</h5>
             <div class="row">
                 As you scroll down, you see the familiar visualization example that was seen in the demo app:
                 <img src="./imgs/screenshots/react_demo/img_29.png" alt="Use app" style="width: 100%; padding: 15px;"/>