made it easier to run repo locally

README.md

@@ -5,7 +5,10 @@
 Install Dependencies:
 `npm install`
 
-You will get an error installing the package [wlan-cloud-ui-library](https://github.com/Telecominfraproject/wlan-cloud-ui-library) because it is in a private npm registry. Run
+You will get an error installing the package [wlan-cloud-ui-library](https://github.com/Telecominfraproject/wlan-cloud-ui-library) because it is in a private npm registry.
+You can either install the package with the commands below or clone the repo [wlan-cloud-ui-library](https://github.com/Telecominfraproject/wlan-cloud-ui-library) and skip to the section Set up Full Development.
+
+Run
 
 ```
 npm login --registry=https://tip.jfrog.io/artifactory/api/npm/tip-wlan-cloud-npm-repo/
@@ -19,7 +22,7 @@ Install package:
 npm i --registry=https://tip.jfrog.io/artifactory/api/npm/tip-wlan-cloud-npm-repo/ @tip-wlan/wlan-cloud-ui-library
 ```
 
-### Set up with local wlan-cloud-ui-library
+### Set up Full Development
 
 _Skip this section if you are not using a local [wlan-cloud-ui-library](https://github.com/Telecominfraproject/wlan-cloud-ui-library)_
 
@@ -43,15 +46,25 @@ If `npm link` fails due to Permissions run with `sudo`
 sudo npm link ../wlan-cloud-ui-library
 ```
 
+To run Full Development you must clone [wlan-cloud-graphql-gw](https://github.com/Telecominfraproject/wlan-cloud-graphql-gw), follow it's README, and run it. Or you use the live production build by setting the environment variable `API` to the GraphQL domain.
+
 ## Run:
 
-### Development
+### Bare Development
+
+This is if you only want to run this repo locally, and want to use the live production builds of [wlan-cloud-ui-library](https://github.com/Telecominfraproject/wlan-cloud-ui-library) and [wlan-cloud-graphql-gw](https://github.com/Telecominfraproject/wlan-cloud-graphql-gw)
+
+`npm run start:bare`
+
+### Full Development
+
+If you have cloned [wlan-cloud-ui-library](https://github.com/Telecominfraproject/wlan-cloud-ui-library) and [wlan-cloud-graphql-gw](https://github.com/Telecominfraproject/wlan-cloud-graphql-gw)
 
 `npm start`
 
 ### Tests
 
-`npm run test`
+`npm test`
 
 ### Production
 

app/config.js

@@ -1 +0,0 @@
-window.REACT_APP_API = undefined;

app/index.js

@@ -15,10 +15,7 @@ import { REFRESH_TOKEN } from 'graphql/mutations';
 import { getItem, setItem, removeItem } from 'utils/localStorage';
 import history from 'utils/history';
 
-const API_URI =
-  process.env.NODE_ENV === 'development'
-    ? 'https://wlan-graphql.zone3.lab.connectus.ai'
-    : window.REACT_APP_API;
+const API_URI = process.env.NODE_ENV === 'production' ? window.REACT_APP_API : process.env.API;
 const MOUNT_NODE = document.getElementById('root');
 
 const cache = new InMemoryCache();

package.json

@@ -10,6 +10,7 @@
   "scripts": {
     "test": "jest --passWithNoTests --coverage",
     "start": "cross-env NODE_ENV=development webpack-dev-server",
+    "start:bare": "cross-env API=https://wlan-graphql.zone3.lab.connectus.ai NODE_ENV=bare webpack-dev-server",
     "build": "webpack --mode=production",
     "format": "prettier --write \"app/**/*.js\"",
     "eslint-fix": "eslint --fix \"app/**/*.js\"",

webpack.config.js

@@ -4,6 +4,7 @@ const common = require('./webpack/webpack.common');
 const envs = {
   development: 'dev',
   production: 'prod',
+  bare: 'bare',
 };
 /* eslint-disable global-require,import/no-dynamic-require */
 const env = envs[process.env.NODE_ENV || 'production'];

webpack/webpack.bare.js

@@ -0,0 +1,51 @@
+const path = require('path');
+
+const commonPaths = require('./paths');
+
+module.exports = {
+  mode: 'development',
+  output: {
+    path: commonPaths.outputPath,
+    publicPath: '/',
+    filename: '[name].js',
+    chunkFilename: '[name].js',
+  },
+  devtool: 'inline-source-map',
+  devServer: {
+    port: 3000,
+    historyApiFallback: true,
+    contentBase: commonPaths.outputPath,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(css|scss)$/,
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              modules: {
+                localIdentName: '[name]__[local]___[hash:base64:5]',
+              },
+              sourceMap: true,
+            },
+          },
+          {
+            loader: 'sass-loader',
+          },
+        ],
+      },
+    ],
+  },
+  resolve: {
+    modules: ['node_modules', 'app'],
+    alias: {
+      app: path.resolve(__dirname, '../', 'app'),
+      react: path.resolve(__dirname, '../', 'node_modules', 'react'),
+      'react-router-dom': path.resolve('./node_modules/react-router-dom'),
+    },
+  },
+};

webpack/webpack.common.js

@@ -47,7 +47,7 @@ module.exports = {
       favicon: './app/images/favicon.ico',
     }),
     new webpack.DefinePlugin({
-      'process.env.GRAPHQL_URL': JSON.stringify(process.env.GRAPHQL_URL),
+      'process.env.API': JSON.stringify(process.env.API || 'http://localhost:4000'),
     }),
   ],
 };