feat: and boy, what a feat!

[ChasNelson1990]

Description

TL;DR - please clone this repository as a new folder on your computer, checkout this branch and test the app to hell and back (see Testing below). I totally expect there to be things that need fixing. Please raise issues for them and I will fix them. I will also be testing it myself but I am sure I will miss things.

This has been something I have wanted to do for a while and I finally got the time slash energy to do it.

Basically, we wave goodbye to webpack and hello to vite. We also wave goodbye to react-scripts as I have moved us over to the electron-vite template for a React + Electron app.

Benefits:

• faster spin up of dev server (with npm run dev)
• one command to spin up both Electron and React apps
• faster build time (on Linux at least) - it's not the fastest in the world but it's fine
• in theory small build files too
• Vite is much better at catching transpile and runtime errors in Typescript and much easier to work with
• completely hot dev server - change something in the Electron it reloads, change something in the React it reloads... change an environment file - it damn well reloads! And quickly too.
• Move to using the latest LTS for NPM and the latest electron-builder

On top of this, I have added:

• proper .env and system environment variable support in both Electron and React app
• colours, server URLs and log settings that depend on mode
• improved readme file
• Prettier - configured and run on the entire repo
• ESLint config (and all errors resolved)
• Created a quick fix command for a common error using better-sqlite3 and electron (we had this error in the previous set up too but less frequently)
• Remove several unnecessary dependencies
• Not experienced #65 at any point (despite still experiencing it with the development branch version of the app that I also has running)
• Massively improved logging - as well as console logging in dev mode we also have file logging in all modes that should make debugging people's field issues simpler
• Converted the backend into typescript
• Added a GitHub action that runs the linter and also checks the build (on Ubuntu for now) on every PR

closes #32 closes #65 maybe?

Dependency Changes

I have added the following dependencies:

• winston for better logging
• vite and related devDependencies inc. eslint and prettier

I have made major-version upgrades to the following dependencies (alongside lots of minor and patch version upgrades):

• @date-io/date-fns
• @fortawesome (all)
• axios
• electron-updater
• reactstrap (although I intend to remove this as soon as possible)
• typescript

I have removed the following dependencies which (unless otherwise stated) appeared not to be being used:

• @fortawesome/free-brands-svg-icons
• @fortawesome/react-fontawesome
• @material-ui/icons
• @onaio/connected-private-route
• @onaio/loaders
• @onaio/redux-reducer-registry
• @onaio/superset-connector
• bootstrap (as we should just use material-ui)
• classnames
• client-oauth2 (we may well re-add this when we get to upgrading the auth)
• cross-blob
• cross-env
• date-fns
• electron-is-dev (as we now use Vite's "mode")
• fetch-mock
• form-data
• fs-extra
• history
• image-downloader
• jest-fetch-mock
• lodash-es
• macaddress (I have actually removed all the macaddress logic because it has never worked; I need to confirm no backend changes are needed because of this)
• moment
• prop-types
• react-datepicker (as we were using the material-ui one anyway)
• react-export-excel
• react-js-pagination
• react-loader-spinner (I have turned off a lot of loader / loading related logic - it wasn't doing much and there seem to be three different sets of logic for it. I think we just build this from scratch when somebody asks us to)
• react-loading-overlay (see above)
• react-redux (I think this is actually pulled in indirectly by the @onaio stuff)
• react-router (see above or by react-router-dom)
• react-scripts :tada:
• react-select
• react-spinners
• react-typist (used by one of the now disabled loading logics)
• redux (see react-redux)
• redux-thunk
• seamless-immutable (again, this is pulled in indirectly by something else)
• three-dots (used by a different one of the now disabled loading logics)
• to-array-buffer
• typeface-roboto

And moved the following into devDependencies:

• eslint
• typescript

I have removed the following devDependencies which (unless otherwise stated) appeared not to be being used (I have also removed several "types" but not listed them here):

• concurrently
• electron-devtools-installer (no longer needed with an upgraded electron)
• enzyme (we have no tests so no idea why this was here)
• enzyme-adapter-react
• enzyme-to-json
• eslint-config-prettier
• eslint-plugin-prettier
• eslint-plugin-react (pulled in elsewhere)
• husky
• lint-staged
• react-devtools
• react-test-renderer
• redux-testkit
• source-map-explorer
• wait-on

Testing

Things we should test:

• [ ] Can you run the dev mode (npm run dev) and does it work as expected? I.e. can you sync, navigate, compelte forms, sync again, change user, etc.
• [ ] Can you run the build mode (npm run build) on Windows and does it work as expected? I.e. can you sync, navigate, compelte forms, sync again, change user, etc. Do you get different colours?

Lol. That's very broad... because quite frankly everything needs testing.

Documentation

I have done a major update of the README.md file. Please let me know if anything doesn't make sense.

Database Changes

New databases will no longer be initialised with a mac address field - old databases should not be impacted by this change.

Checklist

• [x] I have read the road86 Contribution Guide.
• [x] I have checked all commit message styles match the requested structure.
• [x] My code follows the style guidelines of this project.
• [x] I have performed a self-review of my own code.
• [x] I have assigned at least one reviewer.
• [ ] New and existing unit tests pass locally with my changes.
• [ ] I have added tests that prove my fix is effective or that my feature works.
• [x] My changes generate no new warnings.
• [x] I have made corresponding changes to the documentation.
• [x] New database changes have been committed.

[ChasNelson1990]

Oh, just as a note - a fresh npm install takes a short while because we have two git repos in our dependencies. One can be removed when an upstream PR is merged (better-sqlite3). The other is our old friend odk-form-renderer-v2... which I dream to replace soon!

[ChasNelson1990]

I have converted this to draft as I seem to have broken something during the PR creation process - it was all working fine earlier but now I have an inifinite rerendering issue

[ChasNelson1990]

Fixed that issue!

[ChasNelson1990]

BTW to test vite in production mode use npm run preview on a Windows PC

[ChasNelson1990]

• Massively improved logging - as well as console logging in dev mode we also have file logging in all modes that should make debugging people's field issues simpler

These are stored as electron-debug.log and react-debug.log at the root folder. Not sure where they are stored for a production build TBH.

[ChasNelson1990]

Not sure how do I specify which version to build.

Vite has a --mode flag; however, that is not how I suggest you do it. To run dev use npm run dev; to preview prod use npm run preview; to build prod use npm run build. At the moment this set up doesn't really use staging but I would perhaps suggest that staging is npm run preview... one to discuss.

For some reason a built release didn't work on macos. But that might be specific to the os.

Uncaught Exception:
Error: Cannot find module '/node_modules/better-sqlite3/build/Release/better_sqlite3.node'

better_sqlite3 does have some know problems with electron so perhaps it's worse for the MacOS electron? However, I think I did see this at some point and resolved it on Linux... if it becomes a problem I will look into it.