Replace react-script with vite

[geichelberger]

Vite was chosen because of opencast/opencast-editor#1265

Vite was chosen because:

Straightforward migration
Relatively similar set of opinions as CRA
Optimized for single page applications like ours
Popular

I didn't reimplement the dev mode with the mocks.

[Arnei]

This somewhat silently removes the option to start the admin ui with mock data. While I'm not necessarily against this, I think it could be "possibly controversial"? Furthermore, is this breaking the stuff Lars is working on, like #416?

[geichelberger]

Was the code necessary to deploy it like that?

[Arnei]

I actually have no idea, I've just been reading the comments on Github and it seemed like it might clash with this PR.

[Arnei]

Good riddance CRA, hello Vite!

Works and looks good to me, the comments below are just nitpicks, I am more than willing to approve this. Although we should still discuss if we want to get rid of the mock data. (Personally I never use it so I wouldn't mind if it was gone).

[Arnei]

This seems to be going unused.

[Arnei]

Explicitly importing these seems to be unnecessary?

[Arnei]

Gettring rid of CRA should also mean that we can get rid of babel!

[geichelberger]

As the test deployments are only static files, removing the proxy should not cause any trouble.

[lkiesow]

It's not creaking the test deployment to GitHub pages, but in the current form, it would break the test containers (introduced in #470). At least with the current documentation.

[…] removing the proxy should not cause any trouble.

Does that mean you also cannot proxy API data from Opencast?

[lkiesow]

Misunderstood that:

• Mock data is gone (that just needs a slight text update in Automatically publish conatiner image #470)
• Proxy still exists
• Default target now is https://develop.opencast.org which I like since it should work for most people with the default config

[lkiesow]

Can we explicitly state that the default proxy target is https://develop.opencast.org? That “the internet” is proceed is rather vague 😁

[lkiesow]

Since #470 got merged, can you update the test comment:

opencast-admin-interface/.github/workflows/deploy-container-image.yaml

Lines 53 to 61 in ddfd555

	Local test with mock data
	```
	podman run --rm -it -p 127.0.0.1:3000:3000 ${{ steps.meta.outputs.tags }}
	```
	Proxy data from develop.opencast.org
	```
	podman run --rm -it -p 127.0.0.1:3000:3000 -e PROXY_TARGET=https://develop.opencast.org ${{ steps.meta.outputs.tags }}
	```

This should now probably be something like:

 Run test server using develop.opencast.org as backend:
 ``` 
 podman run --rm -it -p 127.0.0.1:3000:3000 ${{ steps.meta.outputs.tags }} 
 ``` 

 Specify a different backend like stable.opencast.org:
 ``` 
 podman run --rm -it -p 127.0.0.1:3000:3000 -e PROXY_TARGET=https://stable.opencast.org ${{ steps.meta.outputs.tags }} 
 ``` 

[github-actions]

This pull request has conflicts ☹
Please resolve those so we can review the pull request.
Thanks.

[lkiesow]

Sorry for finding another issue 🙈

This causes the container to fail since they do not contain a browser:

❯ podman run --rm -it -p 127.0.0.1:3000:3000 opencast-admin-interface:6dfe2dc                                           

> [email protected] start
> vite

The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.

  VITE v5.2.11  ready in 207 ms

  ➜  Local:   http://localhost:3000/
  ➜  Network: use --host to expose
node:events:497
      throw er; // Unhandled 'error' event
      ^

Error: spawn xdg-open ENOENT
    at ChildProcess._handle.onexit (node:internal/child_process:286:19)
    at onErrorNT (node:internal/child_process:484:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
Emitted 'error' event on ChildProcess instance at:
    at ChildProcess._handle.onexit (node:internal/child_process:292:12)
    at onErrorNT (node:internal/child_process:484:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  errno: -2,
  code: 'ENOENT',
  syscall: 'spawn xdg-open',
  path: 'xdg-open',
  spawnargs: [ 'http://localhost:3000/' ]
}

Node.js v20.13.1

The vite server also listens to localhost only which does not work with the containers.

There may be a better way, but this will fix the issues:

diff --git a/Dockerfile b/Dockerfile
index 2782425b1f..1890183c3c 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -7,4 +7,5 @@ WORKDIR /admin-interface
 RUN npm ci
 
 ENV CI true
+ENV BROWSER none
 CMD [ "npm", "start" ]
diff --git a/package.json b/package.json
index 4a14ced112..c0bd48faa9 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
     "yup": "^1.4.0"
   },
   "scripts": {
-    "start": "vite",
+    "start": "vite --host 0.0.0.0",
     "build": "tsc && vite build",
     "serve": "vite preview",
     "test": "vitest"

[geichelberger]

I did not alter the package.json because I would not expect vite to listen on all addresses in a dev environment. Instead, I added the host option to the CMD instruction.

[lkiesow]

Great. Tried that but without the --. Didn't know that I need to separate that. Thanks. Merging…