diff --git a/README.md b/README.md
index 7802023..dbee18e 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
> Opinionated Create React App template with all the important stuff1
-1: [PWA](https://web.dev/progressive-web-apps/), [eslint](https://eslint.org/), [Material UI](https://material-ui.com/), [react-router](https://reactrouter.com/), [cypress](https://www.cypress.io/), [Google Analytics](https://analytics.google.com/), [Sentry](https://sentry.io/welcome/), [swr](https://swr.vercel.app/), [zustand](https://zustand.surge.sh/), [react-app-rewired](https://github.com/timarney/react-app-rewired), [sass](https://sass-lang.com/) and other bits and bobs.
+1: [PWA](https://web.dev/progressive-web-apps/), [eslint](https://eslint.org/), [Material UI](https://material-ui.com/), [react-router](https://reactrouter.com/), [cypress](https://www.cypress.io/), [Google Analytics](https://analytics.google.com/), [Sentry](https://sentry.io/welcome/), [swr](https://swr.vercel.app/), [zustand](https://zustand.surge.sh/), [craco](https://github.com/gsoft-inc/craco), [sass](https://sass-lang.com/) and other bits and bobs.
[](https://www.npmjs.com/package/@iamnapo/cra-template) [](https://iamnapo.me)
diff --git a/template.json b/template.json
index 727e65e..8d01671 100644
--- a/template.json
+++ b/template.json
@@ -3,20 +3,15 @@
"private": true,
"scripts": {
"analyze": "source-map-explorer 'build/static/js/*.js'",
- "build": "react-app-rewired build",
+ "build": "craco build",
"cypress:open": "cypress open",
"cypress:run": "cypress run",
"generate-coverage-report": "nyc report --reporter=text-lcov > coverage.lcov",
"lint": "eslint . --cache",
- "start": "react-app-rewired start",
- "start:for-cypress": "react-app-rewired -r @cypress/instrument-cra start",
+ "start": "craco start",
+ "start:for-cypress": "craco -r @cypress/instrument-cra start",
"test": "npm run lint && start-server-and-test start:for-cypress :3000 cypress:run"
},
- "husky": {
- "hooks": {
- "pre-commit": "npm run lint"
- }
- },
"browserslist": {
"production": [
">1%",
@@ -56,60 +51,58 @@
]
},
"dependencies": {
- "@emotion/react": "^11.1.4",
- "@emotion/styled": "^11.0.0",
- "@fontsource/roboto": "^4.1.0",
+ "@craco/craco": "^6.1.1",
+ "@emotion/react": "^11.1.5",
+ "@emotion/styled": "^11.1.5",
+ "@fontsource/roboto": "^4.2.2",
"@iamnapo/construct-url": "^2.0.0",
- "@material-ui/core": "^5.0.0-alpha.24",
- "@material-ui/icons": "^5.0.0-alpha.24",
- "@material-ui/lab": "^5.0.0-alpha.24",
- "@sentry/browser": "^6.1.0",
+ "@material-ui/core": "^5.0.0-alpha.27",
+ "@material-ui/icons": "^5.0.0-alpha.27",
+ "@material-ui/lab": "^5.0.0-alpha.27",
+ "@sentry/browser": "^6.2.3",
"clsx": "^1.1.1",
- "customize-cra": "^1.0.0",
- "date-fns": "^2.16.1",
+ "date-fns": "^2.19.0",
"history": "^4.10.1",
- "ky": "^0.26.0",
- "notistack": "^1.0.3",
+ "ky": "^0.27.0",
+ "notistack": "^1.0.5",
"prop-types": "^15.7.2",
- "query-string": "^6.13.8",
+ "query-string": "^7.0.0",
"react-ga": "^3.3.0",
"react-router-dom": "^5.2.0",
- "swr": "^0.4.1",
- "web-vitals": "^1.1.0",
- "workbox-background-sync": "^6.1.0",
- "workbox-broadcast-update": "^6.1.0",
- "workbox-cacheable-response": "^6.1.0",
- "workbox-core": "^6.1.0",
- "workbox-expiration": "^6.1.0",
- "workbox-google-analytics": "^6.1.0",
- "workbox-navigation-preload": "^6.1.0",
- "workbox-precaching": "^6.1.0",
- "workbox-range-requests": "^6.1.0",
- "workbox-routing": "^6.1.0",
- "workbox-strategies": "^6.1.0",
- "workbox-streams": "^6.1.0",
- "zustand": "^3.3.1"
+ "swr": "^0.5.4",
+ "web-vitals": "^1.1.1",
+ "workbox-background-sync": "^6.1.2",
+ "workbox-broadcast-update": "^6.1.2",
+ "workbox-cacheable-response": "^6.1.2",
+ "workbox-core": "^6.1.2",
+ "workbox-expiration": "^6.1.2",
+ "workbox-google-analytics": "^6.1.2",
+ "workbox-navigation-preload": "^6.1.2",
+ "workbox-precaching": "^6.1.2",
+ "workbox-range-requests": "^6.1.2",
+ "workbox-routing": "^6.1.2",
+ "workbox-strategies": "^6.1.2",
+ "workbox-streams": "^6.1.2",
+ "zustand": "^3.3.3"
},
"devDependencies": {
"@cypress/code-coverage": "^3.9.2",
"@cypress/instrument-cra": "^1.4.0",
"@iamnapo/prettier-config": "^1.0.2",
"babel-plugin-import": "^1.13.3",
- "cypress": "^6.4.0",
+ "cypress": "^6.8.0",
"dotenv": "^8.2.0",
- "eslint": "^7.19.0",
- "eslint-config-iamnapo": "^12.0.0",
+ "eslint": "^7.22.0",
+ "eslint-config-iamnapo": "^12.0.1",
"eslint-plugin-cypress": "^2.11.2",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
- "eslint-plugin-unicorn": "^27.0.0",
- "husky": "^4.3.8",
- "react-app-rewired": "^2.1.8",
- "sass": "^1.32.6",
+ "eslint-plugin-unicorn": "^28.0.2",
+ "sass": "^1.32.8",
"source-map-explorer": "^2.5.2",
- "start-server-and-test": "^1.12.0"
+ "start-server-and-test": "^1.12.1"
},
"engines": {
"node": ">=14"
diff --git a/template/.env b/template/.env
index f6a81d8..bb29e09 100644
--- a/template/.env
+++ b/template/.env
@@ -3,6 +3,4 @@ REACT_APP_SENTRY_DSN=
REACT_APP_SENTRY_ENVIRONMENT="local"
REACT_APP_SERVER_URL="http://localhost:4000"
-DISABLE_ESLINT_PLUGIN=true
-SKIP_PREFLIGHT_CHECK=true
BROWSER="none"
diff --git a/template/.env.sample b/template/.env.sample
index 71be3b1..7635dcc 100644
--- a/template/.env.sample
+++ b/template/.env.sample
@@ -3,6 +3,4 @@ REACT_APP_SENTRY_DSN=
REACT_APP_SENTRY_ENVIRONMENT=
REACT_APP_SERVER_URL=
-DISABLE_ESLINT_PLUGIN=true
-SKIP_PREFLIGHT_CHECK=true
BROWSER="none"
diff --git a/template/.github/workflows/ci.yml b/template/.github/workflows/ci.yml
index 5a7661b..d4385d5 100644
--- a/template/.github/workflows/ci.yml
+++ b/template/.github/workflows/ci.yml
@@ -6,7 +6,6 @@ jobs:
ci:
runs-on: ubuntu-latest
env:
- SKIP_PREFLIGHT_CHECK: true
REACT_APP_SENTRY_DSN:
REACT_APP_SENTRY_ENVIRONMENT: ci
REACT_APP_GA:
diff --git a/template/config-overrides.js b/template/config-overrides.js
deleted file mode 100644
index 4fe4263..0000000
--- a/template/config-overrides.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const { fixBabelImports, override } = require("customize-cra");
-
-module.exports = override(
- fixBabelImports("@material-ui/core", { libraryDirectory: ".", camel2DashComponentName: false }),
- fixBabelImports("@material-ui/icons", { libraryDirectory: ".", camel2DashComponentName: false }),
- fixBabelImports("@material-ui/lab", { libraryDirectory: ".", camel2DashComponentName: false }),
-);
diff --git a/template/craco.config.js b/template/craco.config.js
new file mode 100644
index 0000000..657a1ef
--- /dev/null
+++ b/template/craco.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+ babel: {
+ plugins: [
+ ["import", { libraryName: "@material-ui/core", libraryDirectory: "", camel2DashComponentName: false }, "core"],
+ ["import", { libraryName: "@material-ui/icons", libraryDirectory: "", camel2DashComponentName: false }, "icons"],
+ ["import", { libraryName: "@material-ui/lab", libraryDirectory: "", camel2DashComponentName: false }, "lab"],
+ ],
+ },
+ eslint: {
+ enable: false,
+ },
+};
diff --git a/template/cypress/integration/initial.spec.js b/template/cypress/integration/initial.spec.js
index e6d25fd..67eb9d6 100644
--- a/template/cypress/integration/initial.spec.js
+++ b/template/cypress/integration/initial.spec.js
@@ -1,4 +1,6 @@
-describe("Initial Visits", () => {
+///
+
+context("Initial Visits", () => {
it("navigates to the initial screen", () => {
cy.visit("/");
cy.contains(/learn react/i).should("exist");
diff --git a/template/cypress/plugins/index.js b/template/cypress/plugins/index.js
index eecc4e3..77f03e4 100644
--- a/template/cypress/plugins/index.js
+++ b/template/cypress/plugins/index.js
@@ -1,5 +1,10 @@
+///
+
require("dotenv").config();
+/**
+ * @type {Cypress.PluginConfig}
+ */
module.exports = (on, config) => {
require("@cypress/code-coverage/task")(on, config);
diff --git a/template/cypress/support/index.js b/template/cypress/support/index.js
index f739289..181a710 100644
--- a/template/cypress/support/index.js
+++ b/template/cypress/support/index.js
@@ -1,3 +1,5 @@
+///
+
import "@cypress/code-coverage/support";
Cypress.on("window:before:load", (win) => {
diff --git a/template/netlify.toml b/template/netlify.toml
index 059dbdb..9f5f655 100644
--- a/template/netlify.toml
+++ b/template/netlify.toml
@@ -13,7 +13,6 @@ for = "/*.pdf"
values = { Cache-Control = "no-store" }
[build.environment]
-SKIP_PREFLIGHT_CHECK = "true"
REACT_APP_SENTRY_DSN = ""
REACT_APP_GA = ""
REACT_APP_SENTRY_ENVIRONMENT = "develop"