[ISSUE-44] Refactor .envs for Scripts

.env.development

@@ -0,0 +1,2 @@
+REACT_APP_BASE_URL_STATE=http://localhost:3001/
+REACT_APP_BASE_URL_PATH=api

.env.production

@@ -0,0 +1,2 @@
+REACT_APP_BASE_URL_STATE=/
+REACT_APP_BASE_URL_PATH=api

README.md

@@ -29,41 +29,41 @@
 - `npx create-react-app PROJECT_NAME --template ui5-webcomponents-react-seed`;
 - cd into `PROJECT_NAME`;
 - (no need to run `yarn install` since it already installs it for you);
-- run the available scripts;
+- run the available scripts.
 
 PS.: It is important to add the `--template ui5-webcomponents-react-seed` at the end to get our template.
 
 # Configuration Included
 
-- JEST Up & Runnning.
+- JEST Up & Runnning;
 
-- ESLint & EditorConfig Up & Running.
+- ESLint & EditorConfig Up & Running;
 
-- CommitLint Up & Running.
+- CommitLint Up & Running;
 
-- Enviroment Variables Up & Running.
+- Enviroment Variables Up & Running;
 
-- Internalization Up & Running.
+- Internalization Up & Running;
 
-- PR Template.
+- PR Template;
 
-- IE Support.
+- IE Support;
 
 - Multiple Scripts.
 
 # Engine Included
 
-- Fallback Engine (`<ErrorBoundary />`, `<NotFound />` and `<Error />`).
+- Fallback Engine (`<ErrorBoundary />`, `<NotFound />` and `<Error />`);
 
-- MockServer Engine (w/ `json-server`).
+- MockServer Engine (w/ `json-server`);
 
-- HTTP Request Engine (w/ `Request` and `URLProvider`).
+- HTTP Request Engine (w/ `Request` and `URLProvider`);
 
-- Permission Engine (w/ `RouteValidator` and `ComponentValidator`)
+- Permission Engine (w/ `RouteValidator` and `ComponentValidator`).
 
 # Hooks Included
 
-- `useRequest`: Which includes `get`, `post`, `patch`, `delete`, `put` HTTP helpers.
+- `useRequest`: Which includes `get`, `post`, `patch`, `delete`, `put` HTTP helpers;
 
 - `useAuthority`: Which includes `hasAccess` helpers.
 
@@ -75,7 +75,9 @@ In the project directory, you can run:
 
 ### `yarn start`
 
-Runs the app in the development mode @ [http://localhost:3000](http://localhost:3000) (⚠️ currently not supported).
+Runs the app in the development mode @ [http://localhost:3000](http://localhost:3000).
+
+⚠️ It requires an AppRouter or a BackEnd up & running @ `<domain>:<port>/api`.
 
 ### `yarn mock`
 

package.json

@@ -70,8 +70,8 @@
   },
   "scripts": {
     "build": "react-scripts build",
-    "mock": "env-cmd -f .env npm-run-all --parallel start:mock start:react",
-    "start": "env-cmd -f .env npm-run-all --parallel start:react",
+    "mock": "env-cmd -f .env.development npm-run-all --parallel start:mock start:react",
+    "start": "env-cmd -f .env.production npm-run-all --parallel start:react",
     "start:react": "react-scripts start",
     "start:mock": "nodemon --watch server/data --exec npx json-server --p 3001 server/mockserver.js --routes server/routes.json",
     "test": "react-scripts test --silent --env=jest-environment-jsdom-sixteen",

src/util/Request.js

@@ -1,7 +1,7 @@
 import axios from 'axios';
 
 const Request = axios.create({
-  baseURL: process.env.REACT_APP_API_URL,
+  baseURL: process.env.REACT_APP_BASE_URL_STATE + process.env.REACT_APP_BASE_URL_PATH,
 });
 
 export default Request;

template.json

@@ -36,8 +36,8 @@
     },
     "scripts": {
       "build": "react-scripts build",
-      "mock": "env-cmd -f .env npm-run-all --parallel start:mock start:react",
-      "start": "env-cmd -f .env npm-run-all --parallel start:react",
+      "mock": "env-cmd -f .env.development npm-run-all --parallel start:mock start:react",
+      "start": "env-cmd -f .env.production npm-run-all --parallel start:react",
       "start:react": "react-scripts start",
       "start:mock": "nodemon --watch server/data --exec npx json-server --p 3001 server/mockserver.js --routes server/routes.json",
       "test": "react-scripts test --silent --env=jest-environment-jsdom-sixteen",