diff --git a/docs/HACKING.md b/docs/HACKING.md
index 36b6ce00..4b00c11f 100644
--- a/docs/HACKING.md
+++ b/docs/HACKING.md
@@ -2,11 +2,17 @@
Topics discussed:
+* Configs
* OAuth ID
* Repository layout
* The library renders within an iframe
* Color palette and themes
+## Configs
+Config files are loaded based on the environment from the `src/config` directory. If you need to override
+some of the values you can create a `development.local.json` that will be ignored by git.
+See [src/config/README.md](./src/config/README.md) for more info.
+
## OAuth ID
The standalone target uses the `oauth_client_id` at [targets/standalone/config/index.js](./targets/standalone/config/index.js) to authenticate requests to WordPress.com.
diff --git a/src/config/README.md b/src/config/README.md
new file mode 100644
index 00000000..7374eb43
--- /dev/null
+++ b/src/config/README.md
@@ -0,0 +1,10 @@
+## Config files
+
+Based on the value of `process.env.NODE_ENV` either `development.json` or `production.json` will be
+loaded.
+
+If you need to use override some configuration fields while developing you can create a `development.local.json`
+file in this folder, which will be ignored by git and will get precedence over the values in `development.json`
+
+If there is a `development.local.json` file it will get merged with the JSON object from `development.json`
+overriding the values for the fields they share.
\ No newline at end of file
diff --git a/src/config/index.js b/src/config/index.js
index 1c34f427..d75d1847 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -1,4 +1,8 @@
/** @format */
+/**
+ * External dependencies
+ */
+import merge from 'lodash/merge';
/**
* Internal dependencies
@@ -8,6 +12,11 @@ import createConfig from 'src/lib/create-config';
let configFile;
if ( 'development' === process.env.NODE_ENV ) {
configFile = require( 'src/config/development.json' );
+ try {
+ // check if we have local git ignored config and use it to override the development.json
+ const localConfig = require( 'src/config/development.local.json' );
+ merge( configFile, localConfig );
+ } catch ( e ) {}
} else {
configFile = require( 'src/config/production.json' );
}
diff --git a/src/index.js b/src/index.js
index e3558115..b8f95f9b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -127,7 +127,15 @@ const createIframe = ( props, assetsLoadedHook = () => {} ) => {
const styleHC = document.createElement( 'link' );
styleHC.setAttribute( 'rel', 'stylesheet' );
styleHC.setAttribute( 'type', 'text/css' );
- styleHC.setAttribute( 'href', 'https://widgets.wp.com/happychat/happychat.css' );
+
+ // while developing load local css
+ if ( process.env.NODE_ENV === 'development' ) {
+ styleHC.setAttribute( 'href', 'happychat.css' );
+ } else {
+ styleHC.setAttribute( 'href', 'https://widgets.wp.com/happychat/happychat.css' );
+ }
+
+ // TODO: rework this to use skills and have local themes loaded
const styleHCPromise = new Promise( resolve => ( styleHC.onload = () => resolve() ) );
const styleHCTheme = document.createElement( 'link' );
diff --git a/targets/standalone/index.html b/targets/standalone/index.html
new file mode 100644
index 00000000..655c8523
--- /dev/null
+++ b/targets/standalone/index.html
@@ -0,0 +1,66 @@
+
+
+
+
+ Happychat Embedded
+
+
+
+
+
+
+
+