Setup webpack for development and production build

[maxatdetroit]

Fixes #24

This PR introduces webpack which is used to both (1) host a local web server to serve the app during development with hot reload on edit and (2) create a production bundle of HTML, JS, and CSS for hosting in production environment where performance and file size are critical.

Specific things done in this PR:

1. Setup yarn for package management, webpack, and update gitignore with associated unnecessary directories
2. Move source code to src directory to make space for a build director and make webpack config simpler
3. Move CSS imports into related JS files for asset bundling and code minimization provided by webpack
4. Fix unescaped characters in HTML since HTML template engines won't allow them
5. Create an initial production build bundle
6. Creates yarn aliases to run webpack development server and production bundler
7. Update the README.md with development instructions

Testing

I tested locally. I was able to go through the excel upload, modify the budget, download the excel file workflow and see the modified budget info in the downloaded excel file.

2024-07-17.12-57-05.mp4

[maxatdetroit]

Also, @kwheelan this is going to break github pages deployment. I'm not sure how gh-pages is setup on this repo since I don't have permission to check the settings, but if its setup to publish from the main branch, then we'll just need to update the publishing source folder to be build instead of / (root)

[kwheelan]

@maxatdetroit Thank you for setting this up!

I tested locally and ran into an error pretty quickly. The webpack dev/prod builds work fine but there are some JS errors pretty early in app navigation

I think this issue is because I had the 'upload' page read in an excel file on my local machine that isn't in the repo (because it's real city data). #27 should fix this problem by enabling the file upload, so I'll review and merge that branch into dev ASAP. Let me know if the errors persist after that merge.

I'm getting CORS errors when trying to load the index.html file directly. @kwheelan are you running a simple web server locally to test the site without dealing with CORS? What's a good workflow to test on the dev branch right now?

I've been using the 'Live Server' extension in VSCode to avoid the CORS issue.

[kwheelan]

Also, @kwheelan this is going to break github pages deployment. I'm not sure how gh-pages is setup on this repo since I don't have permission to check the settings, but if its setup to publish from the main branch, then we'll just need to update the publishing source folder to be build instead of / (root)

Thanks for flagging; I'll adjust the source folder when I merge this.

[maxatdetroit]

Sounds good :) And thanks for the info on Live Server (TIL!).

I'll wait til #27 is merged in then rebase & test on dev and this branch to make sure nothing is broken. Thanks, Katrina!

[kwheelan]

Thanks! Just merged #27

[maxatdetroit]

@kwheelan I've merged in the latest excel upload/download features into this PR/branch. Testing works well now (see the workflow I followed in the initial comment at the top that was edited). Let me know if you want me to test anything else, otherwise it should be ready to merge.

Also, I made notes about this in the README.md but just so it isn't lost in all the changes:

After this PR, the development process is going to change a bit. Instead of using Live Server on the src/index.html you'll need to either:

(1) (Preferred) Use webpack development server by running yarn start in the project root directory. This will hot reload changes in the browser like Live Server. If a change is made that breaks the build, the yarn start command may exit with an error. Then you'll have to fix it and restart the server. Otherwise, it's pretty much the same as using Live Server.

(1) Use Live Server on build/index.html. Note, however, that build/index.html isn't going to update automatically when changes are made to source files. In order to update build/index.html, yarn build must be run, then Live Server will pick up the changes. Another downside of this approach is that the files in build are heavily minimized so any error messages and file names are going to be gibberish.

[kwheelan]

@maxatdetroit Thank you!