Move from create-react-app to parcel

.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
 

.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
@@ -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*

.parcelrc

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

.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

@@ -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",

Backend/Helper/Domain.cs

@@ -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/Startup.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());
                 });
             }

Dockerfile

@@ -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

README.md

@@ -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
 

deploy/scripts/app_release.py

@@ -40,7 +40,7 @@ def get_release() -> str:
 def set_release(release_id: str, dest_file: Path) -> None:
     """Create a release.js file to hold the release name of The Combine."""
     if not dest_file.parent.exists():
-        dest_file.parent.mkdir()
+        dest_file.parent.mkdir(parents=True)
     dest_file.write_text(f'window["release"] = "{release_id}";\n')
 
 

docs/user_guide/assets/licenses/frontend_licenses.txt

@@ -1467,7 +1467,7 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 
 
-axios 1.13.0
+axios 1.13.1
 MIT
 # Copyright (c) 2014-present Matt Zabriskie & Collaborators
 
@@ -3894,7 +3894,7 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 
 
-react-chartjs-2 5.3.0
+react-chartjs-2 5.3.1
 MIT
 Copyright 2020 Jeremy Ayerst
 
@@ -4447,7 +4447,7 @@ ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
 IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
 
 
-set-cookie-parser 2.7.1
+set-cookie-parser 2.7.2
 MIT
 The MIT License (MIT)
 

eslint.config.mjs

@@ -0,0 +1,61 @@
+import pluginImport from "eslint-plugin-import";
+import pluginReact from "eslint-plugin-react";
+import pluginUnusedImports from "eslint-plugin-unused-imports";
+import globals from "globals";
+import typescriptEslint from "typescript-eslint";
+
+export default [
+  {
+    ignores: ["**/*.dic.js", "**/api/**/*", "**/react-app-env.d.ts"],
+  },
+  {
+    languageOptions: {
+      globals: { ...globals.browser, ...globals.jest, ...globals.node },
+      parser: typescriptEslint.parser,
+      parserOptions: { project: true, tsconfigRootDir: import.meta.dirname },
+    },
+    plugins: {
+      import: pluginImport,
+      react: pluginReact,
+      "unused-imports": pluginUnusedImports,
+    },
+    rules: {
+      "import/first": "warn",
+      "import/newline-after-import": "warn",
+      "import/no-duplicates": "warn",
+      "import/order": [
+        "warn",
+        {
+          alphabetize: { order: "asc" },
+          groups: [
+            "builtin",
+            "external",
+            ["internal", "parent", "sibling", "index", "object", "type"],
+          ],
+          "newlines-between": "always",
+        },
+      ],
+      "prefer-const": "warn",
+      "react/jsx-boolean-value": "warn",
+      "unused-imports/no-unused-imports": "warn",
+    },
+    settings: {
+      react: { version: "detect" },
+      "import/resolver": { typescript: { alwaysTryTypes: true } },
+    },
+  },
+  ...typescriptEslint.config({
+    extends: [typescriptEslint.configs.strict],
+    files: ["**/*.ts", "**/*.tsx"],
+    rules: {
+      "@typescript-eslint/explicit-function-return-type": [
+        "warn",
+        { allowExpressions: true },
+      ],
+      "@typescript-eslint/no-dynamic-delete": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-inferrable-types": "warn",
+      "@typescript-eslint/no-non-null-assertion": "off",
+    },
+  }),
+];

jest.config.json

@@ -0,0 +1,33 @@
+{
+  "//": "See https://jestjs.io/docs/configuration for config option details.",
+  "collectCoverageFrom": [
+    "src/**/*.{js,jsx,ts,tsx}",
+    "!src/api/**/*",
+    "!src/backend/index.ts",
+    "!src/resources/**/*",
+    "!src/types/**/*",
+    "!**/*Mock.ts",
+    "!**/*Types.ts"
+  ],
+  "coverageReporters": ["cobertura", "lcov", "text", "text-summary"],
+  "moduleFileExtensions": ["js", "ts", "tsx", "json", "jsx", "node"],
+  "moduleNameMapper": {
+    "^.+\\.css$": "identity-obj-proxy"
+  },
+  "modulePaths": ["<rootDir>/src"],
+  "resetMocks": true,
+  "roots": ["<rootDir>/src"],
+  "setupFiles": ["react-app-polyfill/jsdom"],
+  "setupFilesAfterEnv": ["<rootDir>/src/setupTests.js"],
+  "testEnvironment": "jsdom",
+  "testMatch": ["<rootDir>/src/**/*.test.{js,jsx,ts,tsx}"],
+  "transform": {
+    "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/scripts/jestTransform/babelTransform.js",
+    "^(?!.*\\.(cjs|css|js|json|jsx|mjs|ts|tsx)$)": "<rootDir>/scripts/jestTransform/fileTransform.js"
+  },
+  "transformIgnorePatterns": ["/node_modules/(!(axios))"],
+  "watchPlugins": [
+    "jest-watch-typeahead/filename",
+    "jest-watch-typeahead/testname"
+  ]
+}