Closed ezio-melotti closed 1 year ago
The files have been uploaded at https://simoc.space/download/simdata/, however I can't access them from the frontend. The issue seems related to CORS, and apparently to fix it the server header Access-Control-Allow-Origin: *
must be added.
@kstaats, can you look into it?
I had to update the simdata files after the changes introduced in e93aa45.
@kstaats can you replace the files you uploaded on simoc.space with these ones (and change the extension from .txt
to .json
)?
simoc-simdata-4-human-garden-preset.txt simoc-simdata-4-human-preset.txt simoc-simdata-1-human-radish-preset.txt simoc-simdata-1-human-preset.txt
This is a rough summary of the tests and findings I did:
Since the simdata files are big, they need to be fetched instead of having them in the repo:
src/assets/simdata/
from run.sh
(run when the container is started) -> donenpm run build
-> done (see https://github.com/overthesun/simoc/pull/127)Some new issues surfaced from this:
Other solutions investigated:
I also spent some time trying to figure out if the webpack bundle could be further optimized, without much success.
I found and installed https://github.com/webpack-contrib/webpack-bundle-analyzer following the instructions in the README. Using it as a plugin inside Vue doesn't seem to work. Using it from the command line doesn't seem to work either. I tried to run webpack --profile --json > stats.json
but it doesn't recognize the command. I installed webpack and it run the command, but it gave the error Entry module not found: Error: Can't resolve './src' in '/frontend'\nresolve './src' in '/frontend'\n using description file: /frontend/package.json (relative path: .)\n
. Even though we have a /src
dir, it apparently expects an index.js
in it, so I added it (see https://stackoverflow.com/a/49772864). The command succeeded but then webpack-bundle-analyzer bundle/output/path/stats.json
failed, because it can't find the command. Apparently npx webpack-bundle-analyzer dist/stats.json
works (see https://stackoverflow.com/a/50060552), but in the meanwhile I also found https://github.com/statoscope/statoscope/ and uploaded the stats file at https://statoscope.tech/#&hash=9068ee5518a5819783bf, but apparently it just created the stats for the empty index.js
I added. Then I found and installed https://github.com/mrbbot/vue-cli-plugin-webpack-bundle-analyzer which seems specific to Vue, and even though I followed the README to enable the plugin, it doesn't say what to do to see the output.
Another option is to enable gzip compression, and to do that it seems that:
However I think in production we use traefik instead of nginx. I think it might be worth testing a frontend plugin with nginx, and if it works try to deploy it in production. Traefik might use gzip out of the box, but if not, we can figure out how to enable it.
This got fixed in:
See also:
Since the results for presets are known, it would be better to cache them instead of recalculating them every time.
This can be done by having the sim-data files on a fixed location (e.g.
simoc.space/sim-data/xxx.json
) and downloading them from there when a user selects one of the presets and clicks onLaunch simulation
.We could also use GitHub actions to download the files and include them in the container before building the frontend, so that they end up being hosted on and server through GCP (including them directly in the repo is technically easier, but it will end up bloating the repo). Compressing the files will also make the download faster.
@kstaats I attached the 4 sim data files, one for each of the 4 presets. I had to change the extension from
.json
to.txt
because apparently GitHub doesn't like JSON files, but if you can change it back to.json
it would be better. I think we should have a dir (such assim-data/
orsimdata/
) for these files, and in future another dir (such aspresets/
) for the presets.simoc-simdata-4-human-garden-preset.txt simoc-simdata-4-human-preset.txt simoc-simdata-1-human-radish-preset.txt simoc-simdata-1-human-preset.txt