Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate from Create React App to Vite #158

Merged
merged 16 commits into from
Jul 2, 2024
Merged

Migrate from Create React App to Vite #158

merged 16 commits into from
Jul 2, 2024

Conversation

jafeltra
Copy link
Collaborator

@jafeltra jafeltra commented May 31, 2024

This PR removes the Create React App framework and migrates to the Vite framework. This will (hopefully) make maintenance going forward easier to manage with a lighter weight, currently maintained framework. There were quite a few things that changed and I tried to keep them in relatively separate commits, but I've included a brief summary of the changes here:

  • Moved AppRouter out of utils since it didn't really make sense as a util
  • Switched all source and test files with React component to be .jsx files
  • Removed react-scripts, react-app-rewired, and the serviceWorker code since they are CRA specific
  • Added and configured a vite.config.mjs file
  • Moved index.html and updated it for Vite
  • Renamed env vars to have VITE_ prefix and used import.meta in place of process.env
  • Stubbed out packages that are file system specific that FSH Online does not need and fhir/fhir because it is used by SUSHI but will never be needed in FSH Online
  • Updated ESLint configuration to no longer rely on CRA
  • Switched to React 17
  • Switched to Node 20
  • Switched from Jest (included with react-scripts) to Vitest
  • Updated the README to remove references to CRA
  • Removed the bitly dependency and just make the two calls we need with fetch directly

To test this, you should

  • npm install (it might be good to first delete node_modules if you have it to start fresh)
    • I regenerated the package-lock.json a few times to make sure it was up to date, so make sure there are no changes after you do an install
  • use npm start to run the development server
  • test the app to make sure it works as expected
    • Try using SUSHI, using GoFSH, loading a Share link, saving FSH/JSON/all files, and using the Examples.
    • Also, remove any saved definitions from your browser's storage in IndexedDB and then try to run SUSHI/GoFSH to ensure packages can still be loaded properly
  • use npm run build to build a static, production build (this will be in dist now, not build, since that's the Vite default)
  • use npm run preview to serve the static build and test this out in the same way as above
  • use npm test to make sure the tests run and pass
  • use npm run lint and npm run prettier to ensure the updated configuration works as expected

Two other things to note:

  • To get the "format on save" to work in VS Code, I did have to add a File Association in my editor settings. Let me know if you run into the same thing and I can help.
  • I think I used the base property in the vite.config.mjs file properly so that the deployment will work, but if anyone notices anything that might specifically be off there, please let me know.

jafeltra added 8 commits May 22, 2024 18:00
- Add vite.config.mjs to configure Vite
- Remove react-scripts and react-app-rewired
- Rename env vars to be VITE_ and switch from proces.env. to
  import.meta.
- Move index.html file to root (out of public/)
- Remove %PUBLIC_URL% in index.html file
- Add script to src/index.jsx
- Remove homepage property from package.json (now managed in vite config)
- Remove eslint-config-react-app and reconfigure ESLint
  with plugins
- Add dist/ folder to ignore files since that's Vite's default
- Remove serve-build.js script in favor of vite preview
- Remove serviceWorker code (from CRA)
- Add empty stub for packages that Vite should not try to load (e.g. fs-extra)
- Switch to React 17
- Switch to Node 20
- Regenerate package-lock.json

Note: tests are still not working. Coming soon!
- Mock fhir/fhir because it takes up a lot of space in prod build
- Use full path.resolve in aliases to avoid logged warnings in console
- Remove unused dependencies
- Move testing dependencies to devDependencies
- Polyfill additional node libraries
- Remove reference to long deleted image
Copy link
Member

@cmoesel cmoesel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have not tested this yet, but I did a sweep through the code changes. Everything looks pretty awesome. I like it!

I did find one thing that I'm pretty sure needs changing (the deploy action). I also left a few comments and questions -- many of which probably don't require changes.

Thanks for working this all out. I am personally convinced that it will be easier to maintain in the future. So thank you.

.github/workflows/deploy-workflow.yaml Show resolved Hide resolved
.github/workflows/deploy-workflow.yaml Show resolved Hide resolved
index.html Show resolved Hide resolved
src/components/CodeMirrorComponent.jsx Show resolved Hide resolved
src/components/JSONOutput.jsx Show resolved Hide resolved
src/tests/components/ShareLink.test.jsx Show resolved Hide resolved
src/tests/utils/Load.test.js Show resolved Hide resolved
src/utils/BitlyWorker.js Show resolved Hide resolved
Copy link
Member

@cmoesel cmoesel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The changes looks good.

This works great when I run npm start.

When I run npm run build, followed by npm run preview, however, it doesn't work so well. When I load it in my browser, I get a blank white screen and the following error in my browser console:

vendor-DGUO_56M.js:905 Uncaught TypeError: Object.defineProperty called on non-object
    at Function.defineProperty (<anonymous>)
    at p5t (vendor-DGUO_56M.js:905:8567)
    at vendor-DGUO_56M.js:906:1693
    at oW (vendor-DGUO_56M.js:906:1710)
    at vendor-DGUO_56M.js:646:1463
    at n3t (vendor-DGUO_56M.js:711:1483)
    at vendor-DGUO_56M.js:711:5258
    at yl (vendor-DGUO_56M.js:711:5294)
    at vendor-DGUO_56M.js:711:5473
    at vendor-DGUO_56M.js:712:6144

Looking at the first location in the stack, it's trying define __esModule on something -- but it's hard to tell what that something is due to code minimization. It seems to be somewhere in the package loading code.

CleanShot 2024-06-07 at 15 00 55

@jafeltra
Copy link
Collaborator Author

@cmoesel - thanks for noticing the build issue. I was able to reproduce it, but I wasn't able to reliable reproduce it. I could run the build and preview tasks, and it would break only about 1 out of 3 times. I tried a few different ways around this, and the only way I've found so far is defining the variable that is sometimes undefined globally in the configuration (d9c06c8). I'm not super satisfied with this fix, but it seems to reliable build and I haven't found anything else that did that. Do you mind taking a look and letting me know what you think?

I also updated a few dependencies that had gotten out of date (899593c), ran an npm audit fix (3686de8), and updated to the latest SUSHI (8d42241).

Copy link
Member

@cmoesel cmoesel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you, Julia, for this monumental effort. It looks great and works great. Good riddance, CRA!

Copy link
Collaborator

@mint-thompson mint-thompson left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hooray for vite!

@jafeltra jafeltra merged commit b1affa7 into master Jul 2, 2024
4 checks passed
@jafeltra jafeltra deleted the switch-to-vite branch July 2, 2024 18:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants