ricado-group / cra-template Goto Github PK

Throughout many of our apps, we have NPM scripts that are repeated such as:

{
  "scripts": {
    "start": "craco start",
    "build": "npm run pre-build && craco build && npm run test",
    "build:ci": "npm run build",
    "test": "craco test --watchAll=false --silent",
    "eject": "craco eject",
    "test-watch": "craco test --silent",
    "pre-build": "npm run generate-version && npm run generate-browser-sunsetter",
    "generate-version": "generate-version -o ./public/version.json",
    "generate-browser-sunsetter": "generate-browser-sunsetter -o ./public/browser-sunsetter.js"
  }
}

This could be centralised into a single CLI project for common commands such as start/build/test. Optionally, we could look to rollup the generate-version and generate-browser-sunsetter tasks as a pre-build file that's part of the core ui package.

Goals

• Created a new repo called @ricado/react-scripts to hold our common App config.
• Abstract the libraries react-scripts and @craco/craco away. Making them dependencies for our new project.
• Centralise the craco config.
• Create a ricado-scripts CLI that implements same craco/react-scripts commands.
• Generate browser sunsetter scripts and version file as part of build.

It appears the PointProvider now comes from @ricado/points-service rather than @ricado/core-ui

To minimize the amount of setup required for a new developer and to reduce the risk of inheriting other developers setups. We'd like to consider removing the .env file from source control and have this pre-configured from new users.

A couple of options may include:

• Taking advantage of VSCode's scripts by using a combination of tasks.json and settings.json to generate these files with the click of a button in the editor.
• Generating the .env file for production during the CI Build (e.g. as part of a Github Action)
• Something else?

As discussed we should release this package under: @ricado/cra-template

PROBLEM
Cannot npm start due to defaultBugsnagConfig not being exported from @ricado/core-ui.

STEPS TO REPRODUCE

npm login
npx create-react-app my-app --template @ricado/cra-template
npm start

This has been removed in recent Gen 4 Apps but is still present in this Template.

It appears the variable REACT_APP_PROVIDER_ID should be included in the .env example (and reflected in the README.md).

This could be defaulted to the RICADO Provider ID since this is the typical use case when creating an App from this Template.

The newer Gen 4 UX Apps based on core-ui and cra-ricado take a very long time to build!
We need to work through the process of getting the build time down to a smaller figure.
Ideally the build times would line up with the older Gen 4 UX Apps which also use the Terser Webpack Plugin

Currently the Makefile has the filename MakeFile which is not picked up by the make cli on most distributions.

Update the name to Makefile

PROBLEM
Cannot npm start due to missing SASS config/dependencies.

STEPS TO REPRODUCE

npm login
npx create-react-app my-app --template @ricado/cra-template
npm start

I resolved missing SASS dependencies npm install sass --save-dev, however it still fails to parse less with error, below.

Failed to compile.

./src/index.less (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-9-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-9-3!./node_modules/less-loader/dist/cjs.js??ref--5-oneOf-9-4!./src/index.less)

.searchInputIcon(@input-height-base, @font-size-base);
^
Operation on an invalid type
      Error in /Users/mike/Desktop/workspace/ricado/gen4-packhouse-reporting-web/node_modules/antd/lib/input/style/search-input.less (line 23, column 0)