Moving to Vite from Create-React-App and configuring ESLint and Jest

[paazmaya]

Work in progress...

Moving from Create-React-App to Vite, but needed to configure Jest and ESLint separately.

Tests are currently revealing a lot of problems, but it might be due to version mismatches..

Work continues, but here for visibility and discussion.

[paazmaya]

Currently build creates the following bundles:

vite v4.4.2 building for production...
✓ 7026 modules transformed.
build/index.html                        1.00 kB │ gzip:   0.49 kB
build/assets/no-image-8357d694.png     15.80 kB
build/assets/logo-b4500173.png         74.85 kB
build/assets/index-1fa73d97.css         0.15 kB │ gzip:   0.14 kB
build/assets/index-f34bef88.js         79.27 kB │ gzip:  21.56 kB
build/assets/react-cf7ffb75.js        355.08 kB │ gzip: 110.22 kB
build/assets/vendor-3ace2543.js     1,136.06 kB │ gzip: 344.80 kB

I started to split them, as can be seen with react and vendor, but the latter is still too big...

[paazmaya]

Separated Material UI (most of it):

vite v4.4.2 building for production...
✓ 7026 modules transformed.
build/index.html                      1.08 kB │ gzip:   0.51 kB
build/assets/no-image-8357d694.png   15.80 kB
build/assets/logo-b4500173.png       74.85 kB
build/assets/index-1fa73d97.css       0.15 kB │ gzip:   0.14 kB
build/assets/index-82a0392d.js       79.29 kB │ gzip:  21.55 kB
build/assets/react-4a2fe1f5.js      354.40 kB │ gzip: 110.06 kB
build/assets/material-dcbda5c5.js   443.40 kB │ gzip: 128.16 kB
build/assets/vendor-ecc0f051.js     692.09 kB │ gzip: 216.18 kB

I will leave the build like this, unless some comments arrive.

The used libraries could be evaluated once the UI redesign begins...

[pashidlos]

increment node version in Dockerfile, please

[pashidlos]

there is an issue after running in docker that is solved with commenting that part
do you know how to fix it?

material-dcbda5c5.js:1 Uncaught ReferenceError: Cannot access 'Ve' before initialization
    at material-dcbda5c5.js:1:3416

run docker-compose up --build and open localhost:8080

[paazmaya]

This was indeed due to the library chunks, which are now again all in one.
However there are some issues now with react elements after login...

[paazmaya]

@pashidlos about the Dockerfile, are those all chown commands really needed as the image should have the right user already?

[pashidlos]

@pashidlos about the Dockerfile, are those all chown commands really needed as the image should have the right user already?

not sure if it's still valid now
initially it was a problem with default user in nginx image
remove if it works without them, we could always roll it back )

[pashidlos]

LGTM

[pashidlos]

@paazmaya create release after it's merged to build prod image
https://github.com/Visual-Regression-Tracker/frontend/releases

[paazmaya]

@pashidlos now Codacy is stuck, previously it was not finding dependencies... What can we do?

[pashidlos]

@paazmaya I guess it failed due to huge commit number
I started build manually https://app.codacy.com/gh/Visual-Regression-Tracker/frontend/issues?bid=36499867
anyway, this is already complex PR so I would move out fixing code style issues separately
don't forget to squash commits on merge