Skip to content

Commit

Permalink
Pull the static file server into the CRA proxy as well
Browse files Browse the repository at this point in the history
With this, the outer npm-project is finally obsolete.
See the updated `README` for how to use it and the proxy server.
I abstained from restructuring the project any further
to keep the PR focused, but a PR that will do nothing
but move things around is in the pipeline.

Note, this is based on opencast#394.
  • Loading branch information
JulianKniephoff committed May 22, 2024
1 parent 75105d5 commit ce0f942
Show file tree
Hide file tree
Showing 7 changed files with 58 additions and 954 deletions.
8 changes: 0 additions & 8 deletions .github/dependabot.yml
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,6 @@ updates:
interval: monthly

# Javascript
- package-ecosystem: npm
directory: "/"
schedule:
interval: monthly
time: "04:00"
open-pull-requests-limit: 15
labels:
- dependencies
- package-ecosystem: npm
directory: "/app"
schedule:
Expand Down
3 changes: 0 additions & 3 deletions .github/workflows/test.yml
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,6 @@ jobs:
with:
node-version: 20

- name: download tooling dependencies
run: npm ci

- name: download dependencies
working-directory: ./app
run: npm ci
Expand Down
46 changes: 22 additions & 24 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,8 @@ To get a local copy of the admin UI to test or develop on, you can do the follow
git clone [email protected]:opencast/opencast-admin-interface.git opencast-admin-interface-demo
cd opencast-admin-interface-demo
git switch my-branch # or otherwise check out, pull, merge, etc. whatever branch you want to test/hack on
npm ci
cd app
npm ci
cd ..
```

You can now run a local instance of the UI by saying
Expand All @@ -25,17 +23,29 @@ You can now run a local instance of the UI by saying
npm start
```

This runs a static file server in the background replying mock data to the various requests
This runs a development server at `http://localhost:3000`, serving a development build
of the admin UI, and automatically opens a browser tab pointed to it.
The build and the browser tab should automatically refresh on every change you make
to the codebase.
By default, this server also replies mock data to the various requests
the UI would normally send to the Opencast backend.
It also runs an autoreloading development server delivering the admin UI itself,
and automatically open a browser tab pointing to it.

Not all functionality of the admin UI works in this mode. If you need to test with real data,
or need the ability to change it, you can rely on the proxy functionality of said development server,
instead of running the static file server. Run:
Not all functionality of the admin UI works in this mode. If you need to test
with real data, or need the ability to change it, you can rely on the
proxy functionality of said development server, instead of running the static file server. Run:

```sh
PROXY_TARGET=https://develop.opencast.org npm run client
PROXY=1 npm start
```

This assumes you have an Opencast instance running at `http://localhost:8080`
to which the development server will then proxy all the backend request,
authenticating them as user `admin` with password `opencast`.

If you want to work with a different Opencast and/or user, you can change the command thusly:

```sh
PROXY_TARGET=https://develop.opencast.org npm start
```

Here, `PROXY_TARGET` is the target URL of the Opencast instance you want to test against.
Expand All @@ -50,22 +60,10 @@ in the `PROXY_AUTH` variable in the format `user:password`, as in
PROXY_TARGET=http://localhost:8080 PROXY_AUTH=jdoe:aligator3 npm run client
```

### Ports

By default, the development server runs on port `3000`, and the static server on port `5000`.
If you need to change these ports, you have to do the following:

```sh
PORT=5001 npm run server
```

This runs the static server only, serving assets under `http://localhost:5001`. Now, in a second terminal, run:

```sh
PORT=3001 PROXY_TARGET=http://localhost:5001 npm run client
```
Note that `PROXY=1` is not required if you specify either `PROXY_TARGET` or `PROXY_AUTH`.

This runs the development server on port `3001` and tells it about the alternative file server location.
Similarly, if you want to change the port the development server itself runs at,
you can specify an alternative port in the `PORT` environment variable.

How to cut a release for Opencast
---------------------------------
Expand Down
53 changes: 36 additions & 17 deletions app/src/setupProxy.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,40 @@
const { createProxyMiddleware } = require("http-proxy-middleware");
const express = require("express");
const path = require("path");

module.exports = app => {
app.use(
[
"/acl-manager",
"/admin-ng",
"/api",
"/info",
"/services",
"/staticfiles",
"/sysinfo",
"/ui",
],
createProxyMiddleware({
target: process.env.PROXY_TARGET || "http://localhost:8080",
changeOrigin: true,
auth: process.env.PROXY_AUTH || "admin:opencast",
}),
);
app.use([
"/acl-manager",
"/admin-ng",
"/api",
"/info",
"/services",
"/staticfiles",
"/sysinfo",
"/ui",
], middleware);
};

const middleware = process.env.PROXY || process.env.PROXY_TARGET || process.env.PROXY_AUTH
? createProxyMiddleware({
target: process.env.PROXY_TARGET || "http://localhost:8080",
changeOrigin: true,
auth: process.env.PROXY_AUTH || "admin:opencast",
})
: (req, res, next) => {
if (req.method === "POST") {
res.status(201);
}

req.url = `/${req.method}${req.originalUrl}`;

if (req.method !== "GET") {
req.originalMethod = req.method;
req.method = "GET";
setTimeout(testFiles, 1000, req, res, next);
} else {
testFiles(req, res, next);
}
};

const testFiles = express.static(`${__dirname}/../../test/app`);
Loading

0 comments on commit ce0f942

Please sign in to comment.