Add Craco and Prettier #1271
Add Craco and Prettier #1271
Conversation
There was a problem hiding this comment.
Nice work sticking with this and completing a successful overhaul of our client side build system. I was able to successfully update and browse the app.
We are taking a small, hopefully temporary step back by switching to full page refreshes, but the workflow benefits of prettier are, in my opinion, worth it. We have discussed the possibility of running projects without Vagrant, and I was able to boot the services on my host Docker, but failed to browse either 6543 or 8081. Getting that sorted out may allow us to turn on fast refresh.
I would like to hold back on merging this until we deploy a release to production. We have a lot of features pending and want to avoid increasing the already large surface area of changes.
|
I am sorry for merging a dependabot PR before finishing this. The I merged this branch with master and resolved the |
Images which are in the Public folder and are imported into CSS are no longer correctly importing following the React-Scripts update. Moves the images into the Styles/Images folder to allow access.
Adds Craco and Prettier config. Updates some dependencies to work with the new libraries, including notably React-Scripts and React. The update to React-Scripts introduces fast-reloading; therefore the previous add-on setup for hot-reloading has been removed. Prettier settings ported from our similar projects.
Fix items which are caught by lint but cannot be automatically fixed by Prettier.
When running `./scripts/server`, files will now be autoformatted with Prettier. This commit is the results of running formatting on all js/jsx files in the client app.
Overview
Move to the standard Craco/Prettier configuration we have in other projects, allowing for partially automated code formatting. Upgrade to React-Scripts 4.0.2 and React 16.
Connects #1266, #1252
Notes
Fast-reloading is enabled by default in CRA 4, but while it is correctly compiling the updated code it is not auto-refreshing. This might be due to Vagrant settings. Turning off the fast reloading allows for the hot-module reloading, which restores the previous behavior of auto-refreshes in the React app. We should continue to look into how to enable the fast refresh within the Vagrant environment.
Testing Instructions
vagrant sshandvagrant update./scripts/lintand confirm no necessary changes are found./scripts/serverand confirm that the website behavior hasn't changedChecklist
fixup!commits have been squashed