Improve interface docs (#157)

Improve interface documentation

README.md

@@ -110,25 +110,30 @@ Alternatively run the 'uploadfs' target:
 platformio run -t uploadfs
 ```
 
-### Running the interface locally
+### Developing the interface locally
 
-You can run a development server locally to allow you preview changes to the front end without the need to upload a file system image to the device after each change. 
+UI development is an iterative process so it's best to run a development server locally during interface development (using `npm start`). This can be accomplished by deploying the backend to a device and configuring the interface to point to it:
 
-Change to the ['interface'](interface) directory with your bash shell (or Git Bash) and use the standard commands you would with any react app built with create-react-app:
+![Development Server](/media/devserver.png?raw=true "Development Server")
 
-```bash
-cd interface
-```
+The following steps can get you up and running for local interface development:
 
-Install the npm dependencies, if required and start the development server:
+- [Enable CORS](#enabling-cors) in platformio.ini
+- Deploy firmware to device
+- [Configure endpoint root](#configuring-the-endpoint-root) with device's IP in interface/.env.development
+- [Start the development server](#starting-the-development-server) with "npm start"
+- Develop interface locally
 
-```bash
-npm install
-npm start
+#### Enabling CORS
+
+You can enable CORS on the back end by uncommenting the -D ENABLE_CORS build flag in ['platformio.ini'](platformio.ini) then re-building and uploading the firmware to the device. The default settings assume you will be accessing the development server on the default port on [http://localhost:3000](http://localhost:3000) this can also be changed if required:
+
+```ini
+-D ENABLE_CORS
+-D CORS_ORIGIN=\"http://localhost:3000\"
 ```
-> **Tip**: You can (optionally) speed up the build by commenting out the call to build_interface.py under "extra scripts" during local development. This will prevent the npm process from building the production release every time the firmware is compiled significantly decreasing the build time.
 
-#### Changing the endpoint root
+#### Configuring the endpoint root
 
 The interface has a development environment which is enabled when running the development server using `npm start`. The environment file can be found in ['interface/.env.development'](interface/.env.development) and contains the HTTP root URL and the WebSocket root URL:
 
@@ -141,15 +146,22 @@ The `REACT_APP_HTTP_ROOT` and `REACT_APP_WEB_SOCKET_ROOT` properties can be modi
 
 > **Tip**: You must restart the development server for changes to the environment file to come into effect.
 
-#### Enabling CORS
+#### Starting the development server
 
-You can enable CORS on the back end by uncommenting the -D ENABLE_CORS build flag in ['platformio.ini'](platformio.ini) then re-building and uploading the firmware to the device. The default settings assume you will be accessing the development server on the default port on [http://localhost:3000](http://localhost:3000) this can also be changed if required:
+Change to the ['interface'](interface) directory with your bash shell (or Git Bash) and use the standard commands you would with any react app built with create-react-app:
 
-```ini
--D ENABLE_CORS
--D CORS_ORIGIN=\"http://localhost:3000\"
+```bash
+cd interface
 ```
 
+Install the npm dependencies, if required and start the development server:
+
+```bash
+npm install
+npm start
+```
+> **Tip**: You can (optionally) speed up the build by commenting out the call to build_interface.py under "extra scripts" during local development. This will prevent the npm process from building the production release every time the firmware is compiled significantly decreasing the build time.
+
 ## Selecting features
 
 Many of the framework's built in features may be enabled or disabled as required at compile time. This can help save sketch space and memory if your project does not require the full suite of features. The access point and WiFi management features are "core features" and are always enabled. Feature selection may be controlled with the build flags defined in [features.ini](features.ini).