Merge pull request #21 from topcoderinc/dev

Dev

Author: kbowerma

README.md

@@ -1,7 +1,35 @@
 react-app
 ---
 
+# Local Deployment
+Copy `envSample` as `.env`.
 Install node dependencies using `npm install`
 Run the development server using `npm run start`
 
-The react app is deployed to heroku `https://react-app-drones-spanhawk.herokuapp.com`
+
+# Local Configuration Variables
+You can edit them in `.env` file.
+
+# Heroku Deployment
+```
+git init
+git add .
+git commit -m "react-create-app on Heroku"
+# make sure commit all codes and usuaully you do not need to run above command if you are sure your codes in git repo is latest.
+heroku create -b https://github.com/mars/create-react-app-buildpack.git
+# set variables defined in .env
+heroku config:set REACT_APP_API_BASE_PATH=base url
+heroku config:set REACT_APP_SOCKET_URL=socket url
+heroku config:set REACT_APP_AUTH0_CLIEND_ID=auth0 client id
+heroku config:set REACT_APP_AUTH0_DOMAIN=auth0 domain
+heroku config:set REACT_APP_GOOGLE_API_KEY=google api key
+git push heroku HEAD:master
+heroku open
+```
+
+You can use new configuration with below commands from [set-vars-on-heroku](https://github.com/mars/create-react-app-buildpack#set-vars-on-heroku).
+```
+heroku config:set REACT_APP_API_BASE_PATH=new base url
+git commit --allow-empty -m "Set REACT_APP_API_BASE_PATH config var"
+git push heroku HEAD:master
+```

envSample

@@ -0,0 +1,5 @@
+REACT_APP_API_BASE_PATH=https://kb-dsp-server.herokuapp.com
+REACT_APP_SOCKET_URL=https://kb-dsp-server.herokuapp.com
+REACT_APP_AUTH0_CLIEND_ID=XXXXzjS2nVSqHxHHE64RhvvKY6e0TYpK
+REACT_APP_AUTH0_DOMAIN=dronetest.auth0.com
+REACT_APP_GOOGLE_API_KEY=XXXXSyCR3jfBdv9prCBYBOf-fPUDhjPP4K05YjE

src/App.js

@@ -9,7 +9,7 @@
  * @author       TCSCODER
  * @version      1.0.0
  */
-
+import config from './config';
 import React, { Component } from 'react';
 import './styles/App.css';
 import scriptLoader from 'react-async-script-loader';
@@ -83,5 +83,5 @@ class App extends Component {
 }
 
 export default scriptLoader(
-  ['https://maps.googleapis.com/maps/api/js?key=AIzaSyCR3jfBdv9prCBYBOf-fPUDhjPP4K05YjE', 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js']
+  [`https://maps.googleapis.com/maps/api/js?key=${config.google.apiKey}`, 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js']
 )(App);

src/config/index.js

@@ -11,13 +11,16 @@
 
 const config = {
   api: {
-    basePath: 'https://kb-dsp-server.herokuapp.com',
+    basePath: process.env.REACT_APP_API_BASE_PATH,
   },
   socket: {
-    url: 'https://kb-dsp-server.herokuapp.com',
+    url: process.env.REACT_APP_SOCKET_URL,
   },
-  AUTH0_CLIEND_ID: '3CGKzjS2nVSqHxHHE64RhvvKY6e0TYpK',
-  AUTH0_DOMAIN: 'dronetest.auth0.com',
+  google: {
+    apiKey: process.env.REACT_APP_GOOGLE_API_KEY
+  },
+  AUTH0_CLIEND_ID: process.env.REACT_APP_AUTH0_CLIEND_ID,
+  AUTH0_DOMAIN: process.env.REACT_APP_AUTH0_DOMAIN,
 };
 
 export default config;