Update frontend and backend for compatibility with current Backstage versions

[cwhitely]

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I have searched the issue tracker for an issue that matches the one I want to file, without success.

Issue Details

• Backstage Version:
  • 1.32.5
• CCF Plugin Version:
  • Frontend: 0.1.1
  • Backend: 0.2.1
• Node Version:
  • v20.18.0
• Browser:
  • Edge

Expected Behavior

Following the docs results in plugin starting up with minimal, or documented, obstacles.

Actual Behavior

Multiple issues were encountered, affecting both the frontend and the backend. My hunch is that these would all be resolved by releasing a version compatible with the most recent backstage version, but please let me know if I should split them into multiple issues.

• Frontend:
  • Encountered child compilation errors
    • Main error: [app]: Module not found: Error: Can't resolve 'raw-loader' in '/home/chad/git/backstage-service/packages/app'
      • See the additional info section for a log dump.
    • Workaround: Despite having raw-loader already installed, we needed to run yarn --cwd packages/app add raw-loader to resolve this issue.
• Backend
  • Backend needs to be migrated to the new backend system
    • To get around this, an attempt was made to use the legacy plugin environment.
    • This environment is marked as deprecated, and no further development was recommended to use it.
    • Additionally, using the legacy plugin environment resulted in 401 errors between the frontend and backend, which would have necessitated setting up a legacy token flow.

To Reproduce

1. Install latest Backstage version
2. Install current release of CCF plugin frontend and backend

Screenshots

Additional Information

Expand: Log for child compilation error

``` [app]: ERROR in Error: Child compilation failed: [app]: Module not found: Error: Can't resolve 'raw-loader' in '/home/chad/git/backstage-service/packages/app' [app]: ModuleNotFoundError: Module not found: Error: Can't resolve 'raw-loader' in '/home/chad/git/backstage-service/packages/app' [app]: at /home/chad/git/backstage-service/node_modules/@backstage/cli/node_modules/webpack/lib/Compilation.js:2109:28 [app]: at /home/chad/git/backstage-service/node_modules/@backstage/cli/node_modules/webpack/lib/NormalModuleFactory.js:908:13 [app]: at eval (eval at create (/home/chad/git/backstage-service/node_modules/tapable/lib/HookCodeFactory.js:33:10), :10:1) [app]: at /home/chad/git/backstage-service/node_modules/@backstage/cli/node_modules/webpack/lib/NormalModuleFactory.js:333:22 [app]: at eval (eval at create (/home/chad/git/backstage-service/node_modules/tapable/lib/HookCodeFactory.js:33:10), :9:1) [app]: at /home/chad/git/backstage-service/node_modules/@backstage/cli/node_modules/webpack/lib/NormalModuleFactory.js:512:22 [app]: at /home/chad/git/backstage-service/node_modules/@backstage/cli/node_modules/webpack/lib/NormalModuleFactory.js:154:10 [app]: at /home/chad/git/backstage-service/node_modules/@backstage/cli/node_modules/webpack/lib/NormalModuleFactory.js:737:23 [app]: at /home/chad/git/backstage-service/node_modules/neo-async/async.js:2830:7at done (/home/chad/git/backstage-service/node_modules/neo-async/async.js:2925:13) [app]: [app]: - Compilation.js:2109 [app]: [backstage-service]/[cli]/[webpack]/lib/Compilation.js:2109:28 [app]: [app]: - NormalModuleFactory.js:908 [app]: [backstage-service]/[cli]/[webpack]/lib/NormalModuleFactory.js:908:13 [app]: [app]: [app]: - NormalModuleFactory.js:333 [app]: [backstage-service]/[cli]/[webpack]/lib/NormalModuleFactory.js:333:22 [app]: [app]: [app]: - NormalModuleFactory.js:512 [app]: [backstage-service]/[cli]/[webpack]/lib/NormalModuleFactory.js:512:22 [app]: [app]: - NormalModuleFactory.js:154 [app]: [backstage-service]/[cli]/[webpack]/lib/NormalModuleFactory.js:154:10 [app]: [app]: - NormalModuleFactory.js:737 [app]: [backstage-service]/[cli]/[webpack]/lib/NormalModuleFactory.js:737:23 [app]: [app]: - async.js:2830 [app]: [backstage-service]/[neo-async]/async.js:2830:7 [app]: [app]: - async.js:2925 done [app]: [backstage-service]/[neo-async]/async.js:2925:13 [app]: [app]: - child-compiler.js:174 [app]: [backstage-service]/[cli]/[html-webpack-plugin]/lib/child-compiler.js:174:18 [app]: - Compiler.js:627 finalCallback [app]: [backstage-service]/[cli]/[webpack]/lib/Compiler.js:627:5 [app]: [app]: - Compiler.js:662 [app]: [backstage-service]/[cli]/[webpack]/lib/Compiler.js:662:11 [app]: [app]: - Compiler.js:1348 [app]: [backstage-service]/[cli]/[webpack]/lib/Compiler.js:1348:17 [app]: [app]: [app]: - Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync] [app]: [backstage-service]/[tapable]/lib/Hook.js:18:14 [app]: [app]: - Compiler.js:1344 [app]: [backstage-service]/[cli]/[webpack]/lib/Compiler.js:1344:33 [app]: [app]: - Compilation.js:2925 finalCallback [app]: [backstage-service]/[cli]/[webpack]/lib/Compilation.js:2925:11 [app]: [app]: - Compilation.js:3238 [app]: [backstage-service]/[cli]/[webpack]/lib/Compilation.js:3238:11 [app]: [app]: ERROR in Error: Child compilation failed: [app]: Module not found: Error: Can't resolve 'raw-loader' in '/home/chad/git/backstage-service/packages/app' [app]: ModuleNotFoundError: Module not found: Error: Can't resolve 'raw-loader' in '/home/chad/git/backstage-service/packages/app' [app]: at /home/chad/git/backstage-service/node_modules/@backstage/cli/node_modules/webpack/lib/Compilation.js:2109:28 [app]: at /home/chad/git/backstage-service/node_modules/@backstage/cli/node_modules/webpack/lib/NormalModuleFactory.js:908:13 [app]: at eval (eval at create (/home/chad/git/backstage-service/node_modules/tapable/lib/HookCodeFactory.js:33:10), :10:1) [app]: at /home/chad/git/backstage-service/node_modules/@backstage/cli/node_modules/webpack/lib/NormalModuleFactory.js:333:22 [app]: at eval (eval at create (/home/chad/git/backstage-service/node_modules/tapable/lib/HookCodeFactory.js:33:10), :9:1) [app]: at /home/chad/git/backstage-service/node_modules/@backstage/cli/node_modules/webpack/lib/NormalModuleFactory.js:512:22 [app]: at /home/chad/git/backstage-service/node_modules/@backstage/cli/node_modules/webpack/lib/NormalModuleFactory.js:154:10 [app]: at /home/chad/git/backstage-service/node_modules/@backstage/cli/node_modules/webpack/lib/NormalModuleFactory.js:737:23 [app]: at /home/chad/git/backstage-service/node_modules/neo-async/async.js:2830:7at done (/home/chad/git/backstage-service/node_modules/neo-async/async.js:2925:13) [app]: [app]: - Compilation.js:2109 [app]: [backstage-service]/[cli]/[webpack]/lib/Compilation.js:2109:28 [app]: [app]: - NormalModuleFactory.js:908 [app]: [backstage-service]/[cli]/[webpack]/lib/NormalModuleFactory.js:908:13 [app]: [app]: [app]: - NormalModuleFactory.js:333 [app]: [backstage-service]/[cli]/[webpack]/lib/NormalModuleFactory.js:333:22 [app]: [app]: [app]: - NormalModuleFactory.js:512 [app]: [backstage-service]/[cli]/[webpack]/lib/NormalModuleFactory.js:512:22 [app]: [app]: - NormalModuleFactory.js:154 [app]: [backstage-service]/[cli]/[webpack]/lib/NormalModuleFactory.js:154:10 [app]: [app]: - NormalModuleFactory.js:737 [app]: [backstage-service]/[cli]/[webpack]/lib/NormalModuleFactory.js:737:23 [app]: [app]: - async.js:2830 [app]: [backstage-service]/[neo-async]/async.js:2830:7 [app]: [app]: - async.js:2925 done [app]: [backstage-service]/[neo-async]/async.js:2925:13 [app]: [app]: - child-compiler.js:174 [app]: [backstage-service]/[cli]/[html-webpack-plugin]/lib/child-compiler.js:174:18 [app]: - Compiler.js:627 finalCallback [app]: [backstage-service]/[cli]/[webpack]/lib/Compiler.js:627:5 [app]: [app]: - Compiler.js:662 [app]: [backstage-service]/[cli]/[webpack]/lib/Compiler.js:662:11 [app]: [app]: - Compiler.js:1348 [app]: [backstage-service]/[cli]/[webpack]/lib/Compiler.js:1348:17 [app]: [app]: [app]: - Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync] [app]: [backstage-service]/[tapable]/lib/Hook.js:18:14 [app]: [app]: - Compiler.js:1344 [app]: [backstage-service]/[cli]/[webpack]/lib/Compiler.js:1344:33 [app]: [app]: - Compilation.js:2925 finalCallback [app]: [backstage-service]/[cli]/[webpack]/lib/Compilation.js:2925:11 [app]: [app]: - Compilation.js:3238 [app]: [backstage-service]/[cli]/[webpack]/lib/Compilation.js:3238:11 [app]: [app]: 1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details) [app]: webpack compiled with 3 errors ```

© 2022 Thoughtworks, Inc.