8000 Improve interface docs (#157) · thisiscam/esp8266-react@f045e4d · GitHub
[go: up one dir, main page]
Skip to content

Commit f045e4d

Browse files
rjwatsrjwats
authored
Improve interface docs (rjwats#157)
Improve interface documentation
1 parent 0bea2fd commit f045e4d

File tree

2 files changed

+29
-17
lines changed

2 files changed

+29
-17
lines changed

‎README.md

Lines changed: 29 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -110,25 +110,30 @@ Alternatively run the 'uploadfs' target:
110110
platformio run -t uploadfs
111111
```
112112

113-
### Running the interface locally
113+
### Developing the interface locally
114114

115-
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.
115+
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:
116116

117-
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:
117+
![Development Server](/media/devserver.png?raw=true "Development Server")
118118

119-
```bash
120-
cd interface
121-
```
119+
The following steps can get you up and running for local interface development:
122120

123-
Install the npm dependencies, if required and start the development server:
121+
- [Enable CORS](#enabling-cors) in platformio.ini
122+
- Deploy firmware to device
123+
- [Configure endpoint root](#configuring-the-endpoint-root) with device's IP in interface/.env.development
124+
- [Start the development server](#starting-the-development-server) with "npm start"
125+
- Develop interface locally
124126

125-
```bash
126-
npm install
127-
npm start
127+
#### Enabling CORS
128+
129+
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:
130+
131+
```ini
132+
-D ENABLE_CORS
133+
-D CORS_ORIGIN=\"http://localhost:3000\"
128134
```
129-
> **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.
130135

131-
#### Changing the endpoint root
136+
#### Configuring the endpoint root
132137

133138
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:
134139

@@ -141,15 +146,22 @@ The `REACT_APP_HTTP_ROOT` and `REACT_APP_WEB_SOCKET_ROOT` properties can be modi
141146

142147
> **Tip**: You must restart the development server for changes to the environment file to come into effect.
143148
144-
#### Enabling CORS
149+
#### Starting the development server
145150

146-
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:
151+
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:
147152

148-
```ini
149-
-D ENABLE_CORS
150-
-D CORS_ORIGIN=\"http://localhost:3000\"
153+
```bash
154+
cd interface
151155
```
152156

157+
Install the npm dependencies, if required and start the development server:
158+
159+
```bash
160+
npm install
161+
npm start
162+
```
163+
> **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.
164+
153165
## Selecting features
154166

155167
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).

‎media/devserver.png

71.5 KB
Loading

0 30AA commit comments

Comments
 (0)
0