Configurable dev ports

[toy]

What are you trying to accomplish?

Make it possible to configure both backend and frontend host/port using environment variables (or .env file).

Merge checklist

• Added/updated tests
• Added/updated documentation in Lookbook (patterns, previews, etc)
• Tested major browsers (Chrome, Firefox, Edge, ...)

[cbliard]

I love it 👏

I will happily replace my crappy aliases to use these variables instead when starting my dev servers

[machisuji]

@toy

On this branch when accessing localhost:4200 - which usually works just fine just the same as localhost:3000 - I get a proxy error:

11:17:20 angular.1 | <e> [webpack-dev-server] [HPM] Error occurred while proxying request localhost:4200/ to http://localhost:3100/ [ECONNREFUSED] (https://nodejs.org/api/errors.html#errors_common_system_errors)

I'm not sure how the localhost:3100 comes about, but this seems to be specific to this branch as it still works perfectly fine on the dev branch.

[machisuji]

@toy

On this branch when accessing localhost:4200 - which usually works just fine just the same as localhost:3000 - I get a proxy error:

11:17:20 angular.1 | <e> [webpack-dev-server] [HPM] Error occurred while proxying request localhost:4200/ to http://localhost:3100/ [ECONNREFUSED] (https://nodejs.org/api/errors.html#errors_common_system_errors)

I'm not sure how the localhost:3100 comes about, but this seems to be specific to this branch as it still works perfectly fine on the dev branch.

I have fixed the proxy issue by amending the .env.example file. It must use the FE_PORT in the OPENPROJECT_DEV_URL.

I have also amended the docker-compose.yml to expose the backend and frontend ports. This is technically unrelated to the PR and a separate bug that we ever removed the exposed ports which made it impossible to use the docker setup locally with http directly.

Either way this fix needed to align with your PR, however, which is why I made it on this branch.

I've tested both the direct and docker setups and they both work as expected for me now. So from my perspective this is good to be merged.

But it would indeed be a good idea to ask someone from the @opf/titan team to double check their docker setup with TLS is still working with these changes.

[machisuji]

👍

[akabiru]

Looking great - Please hold merging until @Kharonus / @apfohl have a look as they're more familiar with the Titan docker setup.

I couldn't get this PR to work with the Docker TLS setup out of the box with the following env: I'm likely missing sth obvious.

# Local backend development host and port
HOST=openproject.local
PORT=3000
# Local frontend development host and port
FE_HOST=openproject.local
FE_PORT=4200

Kapture.2024-09-19.at.13.25.30.mp4