search

soundscape-community / soundscape-web-client

Intelligent navigation on any platform
MIT License
2 stars 2 forks source link

JS packaging #2

Closed steinbro closed 2 days ago

steinbro commented 5 months ago

We currently pull in some third party libraries (Turf.js, Leaflet.js) by linking to CDN-hosted versions, and our own code is split across many separate JS files for modularity. This should really all be packaged up and compiled down to a single JS file. Investigate using Webpack or similar tools.

Consider using for audio assets as well.

ragar3 commented 3 months ago

When you say "compiled to a single JS file" is this referring to a "bundle.js" file (as per Webpack documentation) that is then referenced in index.html? It seems there are a couple different ways to use Webpack so we aren't totally sure what the end goal is.

steinbro commented 3 months ago

Yes, making a single bundle.js was what I had in mind. You'll notice that there are over 15 separate files within app/js/. This modularity is considered good for development but bad for deployment, since each browser would have to make separate HTTP requests for each asset.

The nice part about the current non-bundled setup is that deployment is trivial: on each push, the contents of the repo are pushed to Github Pages. This currently works because there is no build process. Once we add a packaging step, we will need some sort of build automation as part of the deploy. Here's some relevant documentation: https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#creating-a-custom-github-actions-workflow-to-publish-your-site

steinbro commented 2 days ago

We've started using Vite as of #27, so the JS packaging is covered now.