Move from create-react-app to parcel (#3041)

- Eject CRA and use Parceljs for building the frontend
- Also update to the latest: babel, eslint, jest, typescript

Cuts frontend / docker_build time from ~2:20 to ~1:20, but frontend / test_coverage time is still ~3:20.

Author: imnasnainaec

.dockerignore

@@ -2,15 +2,16 @@
 **
 
 # Except the following.
+!.env
+!.parcelrc
+!dev-requirements.txt
 !docs/user_guide
+!eslint.config.mjs
 !nginx
+!package*.json
 !public
-!scripts/touchPublicScripts.js
+!scripts/parcelResolver.js
 !src
-!.env
-!.eslintrc.cjs
-!dev-requirements.txt
-!package*.json
 !tox.ini
 !tsconfig.json
 

.eslintrc.cjs

@@ -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
@@ -29,9 +32,6 @@ public/scripts/
 .eslintcache
 Session.vim
 scripts/*.js
-!scripts/createBackendLicenses.js
-!scripts/printVersion.js
-!scripts/setRelease.js
 *.log
 *-debug.log*
 *-error.log*

.gitignore

@@ -0,0 +1,13 @@
+{
+  "extends": [
+    "@parcel/config-default"
+  ],
+  "reporters": [
+    "...",
+    "parcel-reporter-static-files-copy"
+  ],
+  "resolvers": [
+    "./scripts/parcelResolver.js",
+    "..."
+  ]
+}

.parcelrc

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

.vscode/launch.json

@@ -32,12 +32,13 @@
   },
   "files.insertFinalNewline": true,
   "cSpell.ignorePaths": [
-    "*.dic.js",
+    "dist",
     "docs/user_guide/docs/*.*.md",
     "node_modules",
     "package-lock.json",
-    "public/locales/",
-    "!public/locales/en/"
+    "public/dictionaries",
+    "public/locales",
+    "!public/locales/en"
   ],
   "cSpell.words": [
     "Adposition",

.vscode/settings.json

@@ -8,6 +8,6 @@ public static class Domain
             Environment.GetEnvironmentVariable("COMBINE_FRONTEND_SERVER_NAME");
 
         public static readonly string FrontendDomain =
-            string.IsNullOrEmpty(_frontendServer) ? "http://localhost:3000" : $"https://{_frontendServer}";
+            string.IsNullOrEmpty(_frontendServer) ? "http://localhost:1234" : $"https://{_frontendServer}";
     }
 }

Backend/Helper/Domain.cs

@@ -114,7 +114,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());
                 });
             }

Backend/Startup.cs

@@ -51,8 +51,9 @@ RUN mkdir ${FRONTEND_HOST_DIR}/url_moved
 
 # Setup web content
 COPY --from=user_guide_builder /app/docs/user_guide/site ${HOST_DIR}/user_guide
-COPY --from=frontend_builder /app/build ${FRONTEND_HOST_DIR}
+COPY --from=frontend_builder /app/dist ${FRONTEND_HOST_DIR}
 COPY public/dictionaries ${HOST_DIR}/dictionaries
+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

Dockerfile

@@ -22,8 +22,7 @@
 [localization-ui-badge]: https://img.shields.io/badge/User%20Interface-Ar%20En%20Es%20Fr%20Pt%20Zh-blue
 [github-actions-frontend]: https://github.com/sillsdev/TheCombine/actions/workflows/frontend.yml
 [github-actions-backend]: https://github.com/sillsdev/TheCombine/actions/workflows/backend.yml
-[localization-sd-badge]:
-  https://img.shields.io/badge/Semantic%20Domains-Ar%20En%20Es%20Fr%20Hi%20Id%20Ml%20My%20Pt%20Ru%20Sw%20Zh-blue
+[localization-sd-badge]: https://img.shields.io/badge/Semantic%20Domains-Ar%20En%20Es%20Fr%20Hi%20Id%20Ml%20My%20Pt%20Ru%20Sw%20Zh-blue
 [localization-ug-badge]: https://img.shields.io/badge/User%20Guide-En%20Es%20Zh-blue
 [localization-crowdin-combine]: https://crowdin.com/project/the-combine
 [localization-crowdin-flex]: https://crowdin.com/project/fieldworks
@@ -278,7 +277,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`
 
@@ -294,7 +293,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.
 
@@ -304,9 +303,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
 
@@ -1175,6 +1174,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 Testing Library](https://testing-library.com/docs/react-testing-library/intro) (unit testing)
+- [Parcel](https://parceljs.org/docs/) (bundler/builder)
 
 ### Kubernetes/Helm