You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
- C++ defines group by filetypes: Should we be able to check if a given file name or number of files is correct? For this, we should find C++ defines in the generated code.
# Convert Svelte (or React/Angular/Vue) JS application to serve it from ESP32/ESP8266 webserver
4
6
5
7
### Forget SPIFFS and LittleFS now
@@ -10,11 +12,13 @@ In order to be able to easily update OTA, it is important - from the users' poin
10
12
11
13
This npm package provides a solution for **inserting any JS client application into the ESP web server** (PsychicHttp and also ESPAsyncWebServer available, PsychicHttp is the default). For this, JS, html, css, font, assets, etc. files must be converted to binary byte array. Npm mode is easy to use and easy to **integrate into your CI/CD pipeline**.
12
14
13
-
> Starting with version v1.1.0, the ETag header is also supported.
15
+
> Version v1.4.0 has a breaking change! --no-gzip changed to --gzip. Starting with this version c++ compiler directives are available to setup operation in project level.
16
+
17
+
> Starting with version v1.3.0, c++ defines can be used.
14
18
15
19
> Starting with version v1.2.0, ESP8266/ESP8285 is also supported.
16
20
17
-
> Starting with version v1.3.0, c++ defines can be used.
21
+
> Starting with version v1.1.0, the ETag header is also supported.
18
22
19
23
### Usage
20
24
@@ -28,29 +32,20 @@ After a successful Svelte build (rollup/webpack/vite) **create an includeable c+
@@ -158,17 +153,21 @@ If you **only work on ESP32**, I recommend using PsychicHttpServer, which uses t
158
153
159
154
All modern browsers have been able to handle gzip-compressed content for years. For this reason, there is no question that the easily compressed JS and CSS files are stored compressed in the ESP32/ESP8266 and sent to the browser.
160
155
161
-
During the translation process, data in gzip format is generated and will be used if the **size is greater than 100 bytes** and we experience a **reduction of at least 15%**. In such a case, the compressed data is unconditionally sent to the browser with the appropriate **Content-Encoding** header information.
156
+
During the translation process, data in gzip format is generated and will be used if the **size is greater than 1024 bytes** and we experience a **reduction of at least 15%**. In such a case, the compressed data is unconditionally sent to the browser with the appropriate **Content-Encoding** header information.
157
+
158
+
Automatic compression can be turned off with the `--gzip=false` option.
162
159
163
-
Automatic compression can be turned off with the `--no-gzip` option.
160
+
> This setting has three states: yes, no, and compiler mode is available. In compiler mode, you can disable/enable Gzip by setting the `SVELTEESP32_ENABLE_GZIP` c++ compiler directive. For example, if using platformio, just write `-D SVELTEESP32_ENABLE_GZIP`.
164
161
165
162
### ETag
166
163
167
164
The ETag HTTP header can be used to significantly reduce network traffic. If the server sends ETag information, the client can check the integrity of the file by sending back this ETag (in `If-None-Match` header) without sending the data back again. All browsers use this function, the 304 HTTP response code is clearly visible in the network traffic.
168
165
169
166
Since microcontroller data traffic is moderately expensive, it is an individual decision whether to use the ETag or not. We **recommend using ETag**, which adds a bit more code (about 1-3%) but results in a much cleaner operation.
170
167
171
-
The use of ETag is **not enabled by default**, this can be achieved with the `--etag` switch.
168
+
The use of ETag is **not enabled by default**, this can be achieved with the `--etag=true` switch.
169
+
170
+
> This setting has three states: yes, no, and compiler mode is available. In compiler mode, you can disable/enable ETag by setting the `SVELTEESP32_ENABLE_ETAG` c++ compiler directive. For example, if using platformio, just type `-D SVELTEESP32_ENABLE_ETAG`.
172
171
173
172
### Main entry point - index.html
174
173
@@ -214,27 +213,35 @@ You can include a blocker error if a named file accidentally missing from the bu
214
213
...
215
214
```
216
215
216
+
You can use the following c++ directives at the project level if you want to configure the usage there: `SVELTEESP32_ENABLE_ETAG` and `SVELTEESP32_ENABLE_GZIP`. (Do not forget `--etag=compiler` or `--gzip=compiler` command line arg!)
|`-s`|**Source dist folder contains compiled web files**||
223
+
|`-e`| The engine for which the include file is created (psychic/async) | psychic |
224
+
|`-o`| Generated output file with path |`svelteesp32.h`|
225
+
|`--etag`| Use ETag header for cache (true/false/compiler) | false |
226
+
|`--gzip`| Compress content with gzip (true/false/compiler) | true |
227
+
|`--created`| Include creation time | false |
228
+
|`--version`| Include a version string, `--version=v$npm_package_version`| '' |
229
+
|`--espmethod`| Name of generated method |`initSvelteStaticFiles`|
230
+
|`--define`| Prefix of c++ defines |`SVELTEESP32`|
231
+
|`-h`| Show help ||
229
232
230
233
### Q&A
231
234
232
235
-**How big a frontend application can be placed?** If you compress the content with gzip, even a 3-4Mb assets directory can be placed. This is a serious enough amount to serve a complete application.
233
236
234
-
-**How fast is cpp file compilation?** The cpp file can be large, but it can be compiled in a few seconds on any machine. If you don't modify your svelte/react app, it will use the already compiled cpp file (not recompile). This does not increase the speed of ESP32/ESP8266 development.
237
+
-**How fast is cpp file compilation?** The cpp (.h) file can be large, but it can be compiled in a few seconds on any machine. If you don't modify your svelte/react app, it will use the already compiled cpp file (not recompile). This does not increase the speed of ESP32/ESP8266 development.
235
238
236
239
-**Does the solution use PROGMEM?** No and yes. ESP32 no longer has PROGMEM. (Exists, but does not affect the translation). Instead, if we use a const array in the global namespace, its content will be placed in the code area, i.e. it will not be used from the heap or the stack, so the content of the files to be served will be placed next to the code. When working on ESP8266, PROGMEM will actually be used.
237
240
238
-
-**Is this safe to use in production?** I suggest you give it a try! If you find it useful and safe in several different situations, feel free to use it, just like any other free library.
241
+
-**Why is the .h file so big?** The source files are always larger than the binary compiled from them. Does the size information in the header (SVELTEESP32_SIZE, SVELTEESP32_SIZE_GZIP) show the actual memory allocation.
242
+
243
+
-**Is collaboration between groups supported?** Yes, the Frontend team produces the application, the use of svelteesp32 is part of the build process. Then, provided with a version number, the .h file is placed in git, which the ESP team translates into the platformio application.
239
244
240
245
-**Will you develop it further?** Since I use it myself, I will do my best to make the solution better and better.
246
+
247
+
-**Is this safe to use in production?** I suggest you give it a try! If you find it useful and safe in several different situations, feel free to use it, just like any other free library.
0 commit comments