Move from create-react-app to parcel + babel

.eslintrc.cjs

@@ -9,7 +9,7 @@ module.exports = {
     "plugin:react-hooks/recommended",
     "plugin:import/recommended",
   ],
-  ignorePatterns: ["*.dic.js"],
+  ignorePatterns: ["*.dic.js", "react-app-env.d.ts"],
   parser: "@typescript-eslint/parser",
   parserOptions: {
     ecmaFeatures: { jsx: true },

.gitignore

@@ -11,14 +11,17 @@
 
 # Production
 build
+/dist
 
 # Generated files for development use
 docker-compose.yml
 .env.*
 !.env.development
 .env*.local
+.parcel-cache
 nginx/scripts
 /backups
+/parcel-bundle-reports
 /restore
 script_conf.json
 backup_conf.json
@@ -31,6 +34,7 @@ public/scripts/config.js
 Session.vim
 scripts/*.js
 !scripts/createBackendLicenses.js
+!scripts/jestTest.js
 !scripts/printVersion.js
 !scripts/setRelease.js
 setup_cluster.log

.parcelrc

@@ -0,0 +1,9 @@
+{
+  "extends": [
+    "@parcel/config-default"
+  ],
+  "reporters": [
+    "...",
+    "parcel-reporter-static-files-copy"
+  ]
+}

.vscode/launch.json

@@ -15,7 +15,7 @@
       "type": "chrome",
       "request": "launch",
       "name": "Launch Chrome against localhost",
-      "url": "http://localhost:3000",
+      "url": "http://localhost:1234",
       "webRoot": "${workspaceFolder}"
     },
     {

.vscode/settings.json

@@ -92,5 +92,14 @@
     "wordlist",
     "wordlists"
   ],
-  "git.branchProtection": ["master", "main"]
+  "git.branchProtection": ["main", "master"],
+  "search.exclude": {
+    ".parcel-cache": true,
+    ".tox": true,
+    "dist": true,
+    "mongo_database": true,
+    "node_modules": true,
+    "parcel-bundle-reports": true,
+    "venv": true
+  }
 }

Backend/Startup.cs

@@ -108,7 +108,7 @@ public void ConfigureServices(IServiceCollection services)
                             .AllowAnyHeader()
                             .AllowAnyMethod()
                             // Add URL for React CLI using during development.
-                            .WithOrigins("http://localhost:3000")
+                            .WithOrigins("http://localhost:1234")
                             .AllowCredentials());
                 });
             }

Dockerfile

@@ -52,11 +52,11 @@ RUN mkdir ${FRONTEND_HOST_DIR}/url_moved
 
 # Setup web content
 COPY --from=user_guide_builder /app/docs/user_guide/site ${USER_GUIDE_HOST_DIR}
-COPY --from=frontend_builder /app/build ${FRONTEND_HOST_DIR}
+COPY --from=frontend_builder /app/dist ${FRONTEND_HOST_DIR}
+COPY public/locales ${FRONTEND_HOST_DIR}/locales
 COPY nginx/pages/url_moved_home.html /etc/nginx/page_templates/url_moved_home.html
 COPY public/favicon.ico ${FRONTEND_HOST_DIR}/url_moved/favicon.ico
 COPY src/resources/tractor.png ${FRONTEND_HOST_DIR}/url_moved/tractor.png
-COPY public/scripts/release.js ${FRONTEND_HOST_DIR}/scripts/release.js
 
 # Setup nginx configuration templates
 COPY nginx/templates/* /etc/nginx/templates/

README.md

@@ -282,7 +282,7 @@ In the project directory, you can run:
 
 Installs the necessary packages and runs the app in the development mode.
 
-Open <http://localhost:3000> to view it in the browser.
+Open <http://localhost:1234> to view it in the browser.
 
 #### `npm run frontend`
 
@@ -298,7 +298,7 @@ Runs only the mongo database.
 
 #### `npm run build`
 
-Builds the app for production to the `build` folder.
+Builds the app for production to the `dist` folder.
 
 It correctly bundles React in production mode and optimizes the build for the best performance.
 
@@ -308,9 +308,9 @@ Your app is ready to be deployed!
 
 See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
 
-#### `npm run analyze`
+#### `npm run build:analyze`
 
-Run after `npm run build` to analyze the contents build bundle chunks.
+Builds then generates a tree map of the bundle chunks.
 
 ### Using OpenAPI
 
@@ -1169,6 +1169,7 @@ The process for configuring and deploying _TheCombine_ for production targets is
 - [React-i18next](https://react.i18next.com/) (text localization)
 - [Jest](https://jestjs.io/docs/getting-started) (unit testing)
 - [React-Test-Renderer](https://reactjs.org/docs/test-renderer.html) (unit testing)
+- [Parcel](https://parceljs.org/docs/) (bundler/builder)
 
 ### Kubernetes/Helm