Add spinner text and updated README file

Author: ujjavaldesai07

.env-sample

@@ -13,13 +13,13 @@ REACT_APP_GOOGLE_AUTH_CLIENT_ID=23432543654-m4s23i3dsf72938gubrj32n8932ro9knqudv
 REACT_APP_PORT=3000
 
 REACT_CLIENT_URL=http://localhost:3000
-REACT_APP_ENVIRONMENT=<prod/dev>
-ACTIVE_PROFILE=<dev/prod>
+REACT_APP_ENVIRONMENT=dev
+ACTIVE_PROFILE=dev
 
 REDIS_PASSWORD=mypass
 REDIS_PORT=6379
 
 AUTHENTICATION_SERVICE_PORT=7000
 PAYMENT_SERVICE_PORT=9050
 COMMON_DATA_SERVICE_PORT=9000
-SEARCH_SUGGESTION_SERVICE_PORT=10000
+SEARCH_SUGGESTION_SERVICE_PORT=10000

README.md

@@ -51,21 +51,36 @@ eCommerce application based on the microservices architecture built using Spring
 **Steps for executing the application using docker-compose:**
 1. Clone/Download the repository.
 
+
 2. Set the environmental variables which will be impacted on docker-compose.yml.
-   You can checkthe .env-sample file. Most of the variables are already set.
-   You need to modify the variable and rename the file to ".env".
-   You need to create a Stripe account and Google OAuth credentials.
-   These accounts doesn't charge you anything and are absolutely free.
- 
-   You need to set below two env variables.
- 
-   REACT_APP_STRIPE_PUBLISH_KEY=<Your Stripe Publishable Key>
- 
-   Go [Here](https://dashboard.stripe.com/register) to create a Stripe account.
- 
-   REACT_APP_GOOGLE_AUTH_CLIENT_ID=<Your Google AUTH Client ID> 
- 
-   Go [Here](https://console.developers.google.com) to create Google OAuth Credentials.
+   
+    1. You can check the .env-sample file. Most of the variables are already set.
+       You need to rename the file ".env-sample" to ".env".
+       <br/><br/>
+    2. In addition, You need to create a Stripe account and Google OAuth credentials.
+       The application works even if you don't create this account, only the payment and OAuth functionality will not work.
+       These accounts doesn't charge you anything and are absolutely free.<br/><br/>
+
+       You need to set below two env variables.<br/><br/>
+
+       REACT_APP_STRIPE_PUBLISH_KEY=<Your Stripe Publishable Key>
+
+       Go [Here](https://dashboard.stripe.com/register) to create a Stripe account.
+       <br/><br/>
+       REACT_APP_GOOGLE_AUTH_CLIENT_ID=<Your Google AUTH Client ID>
+
+       Go [Here](https://console.developers.google.com) to create Google OAuth Credentials.
+
+
+3. Set the CORS in the backend service as shown below.
+   ```
+      go to file on this path => server/common-data-service/src/main/java/com/ujjaval/ecommerce/commondataservice/config/CorsConfig.java
+      
+      public void addCorsMappings(CorsRegistry registry) {
+        registry.addMapping("/**").allowedOrigins(<Add your client host URL string here>)
+                .allowedMethods("GET", "POST");
+      }
+   ```
 
 3. Build all the microservices and run the app using docker-compose. This is done using ./start-all.sh script which creates the network and set the container dependencies based on the config mention in the docker-compose.yml. 
    This will build all the jar files and run all the services.
@@ -74,7 +89,7 @@ eCommerce application based on the microservices architecture built using Spring
    ```
 
 4. If you are making any change in the code then you need to you ./stop-all.sh to clean up the jars created by ./start-all.sh script. Also, you need to remove the images from the docker otherwise it will occupy the image spaces unnecessarily.
- 
+   <br/><br/>
    You can check docker images with below command
    ```
       docker images
@@ -86,22 +101,25 @@ eCommerce application based on the microservices architecture built using Spring
 
 **Payment Service Test Details:**
 
-Credit card no.: 4242 4242 4242 4242
-Expiry: Any future date
-CVV: Any 3-digit number
+    Credit card no.: 4242 4242 4242 4242
+    Expiry: Any future date
+    CVV: Any 3-digit number
 
 **Steps to deploy on Heroku using docker-compose:**
 
 1. create heroku.yml as docker-compose.yml is not invoked on Heroku.
 
+
 2. If the application contains a database then install MySQL or any other database 
-   from Heroku marketplace[https://elements.heroku.com]. 
- 
+   from Heroku marketplace[https://elements.heroku.com].
+   <br/><br/>
    Note: Before installing you need to add credit/debit card info. Without this it 
    won't allow you to install the database.
 
+
 3. Set the config vars based on the database URL.
 
+
 4. Set the stack:container for the application in order to build with docker-compose.
    ```
       heroku stack:set container -a <application-name>

client/public/index.html

@@ -26,7 +26,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Welcome to Shoppers</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

client/src/components/routes/home/home.js

@@ -18,6 +18,7 @@ import {HOME_PAGE_DATA_API} from "../../../constants/api_routes";
 import {HOME_PAGE_API_OBJECT_LEN} from "../../../constants/constants"
 import {authServiceAPI} from "../../../api/service_api";
 import axios from "axios";
+import {Grid} from "@material-ui/core";
 
 const Home = props => {
     const {hover} = useSelector(state => state.tabHoverEventReducer)
@@ -32,22 +33,23 @@ const Home = props => {
         // Heroku so that it serves the requests quickly.
         // This should be removed when the app is deployed on actual server.
         props.setDefaultSearchSuggestions()
-        authServiceAPI.post('/authenticate').catch(err => {})
-        if(process.env.REACT_APP_PAYMENT_SERVICE_URL) {
+        authServiceAPI.post('/authenticate').catch(err => {
+        })
+        if (process.env.REACT_APP_PAYMENT_SERVICE_URL) {
             axios({
                 method: 'post',
-                url:  `${process.env.REACT_APP_PAYMENT_SERVICE_URL}/payment`,
+                url: `${process.env.REACT_APP_PAYMENT_SERVICE_URL}/payment`,
                 headers: {
                     'Content-Type': 'application/json',
                 },
                 data: "xyz"
-            }).catch(err => {})
+            }).catch(err => {
+            })
         }
         ///////////////////////////////////////////////////////////
 
 
-
-        if(!homeAPIData.hasOwnProperty("data")) {
+        if (!homeAPIData.hasOwnProperty("data")) {
             props.getDataViaAPI(LOAD_HOME_PAGE, HOME_PAGE_DATA_API, null, false);
         }
 
@@ -57,7 +59,19 @@ const Home = props => {
     // we will be showing spinner till we get the data via API
     if (homeAPIData.isLoading) {
         log.info("[Home]: loading")
-        return <Spinner/>
+        return <Spinner textComponent={
+            <Grid container direction="column" spacing={1} style={{
+                alignItems: "center", fontSize: "1.1rem", fontWeight: "bold"}}>
+                <Grid item>
+                    Please wait! This will take 1-2 minutes to load page for the first time.
+                </Grid>
+                <Grid item>
+                    The backend service on heroku was in sleep mode and now its started.
+                </Grid>
+                <Grid item>
+                    It will sleep again if the backend service is inactive for 30 minutes.
+                </Grid>
+            </Grid>}/>
     } else {
 
         // check if we got the data from the API
@@ -97,4 +111,4 @@ const Home = props => {
     )
 }
 
-export default connect(null, {getDataViaAPI, setDefaultSearchSuggestions})(Home);
+export default connect(null, {getDataViaAPI, setDefaultSearchSuggestions})(Home);

client/src/components/ui/spinner.js

@@ -2,10 +2,13 @@ import React from 'react';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import {Box} from "@material-ui/core";
 
-export default function Spinner() {
+export default function Spinner({textComponent = null}) {
     return (
-        <Box display="flex" justifyContent="center" alignItems="center" css={{ minHeight: "60vh"}}>
-            <CircularProgress color="secondary"/>
+        <Box display="flex" justifyContent="center" alignItems="center"
+             css={{minHeight: "60vh", flexDirection: "column"}}>
+
+            <CircularProgress color="secondary" style={{marginBottom: 20}}/>
+            {textComponent}
         </Box>
     );
 }

server/common-data-service/src/main/java/com/ujjaval/ecommerce/commondataservice/config/CorsConfig.java

@@ -11,7 +11,7 @@ public class CorsConfig implements WebMvcConfigurer
 {
     @Override
     public void addCorsMappings(CorsRegistry registry) {
-        registry.addMapping("/**").allowedOrigins(System.getenv("REACT_CLIENT_URL"))
+        registry.addMapping("/**").allowedOrigins("https://shoppers-ecom-app.herokuapp.com")
                 .allowedMethods("GET", "POST");
     }
 }