Dynamically changing PUBLIC_URL in the CD step of CI/CD pipeline

[DanoThom]

My requirements are:
1.) to build the create-react-app in Docker in the build phase of the pipeline
2.) to dynamically pass in environment variables on deployment at run-time
3.) to change the PUBLIC_URL in the release phase in order to host the app in a sub-directory

I've got 1.) and 2.) working. I'm just really struggling with 3.)

I'm struggling to see how it's at all possible to host the app at a sub-directory with the above (not unreasonable in my opinion) requirements. (i.e. host at test.com/subfolder.)

I'm fully clued up on the nuances of using 'homepage' and 'process.env.PUBLIC_URL' and '%PUBLIC_URL' and where to use them etc.

However, since all the compilation magic and chunking happens in the build stage, which would need to stick the '/subfolder' prefix in every relevant place in the index.html and other files in the build folder, is this even possible considering I'm trying to only build once and then deploy dynamically multiple times?

Been struggling with this for a while now so any input on the matter would be much appreciated!

[pavinthan]

You can set PUBLIC_URL=https://example.com/subfolder/another-subfolder/ envirement variable like this at build time.

[DanoThom]

@pavinthan Negative. I don't think you fully understand what I'm asking. The whole point of my question was to not hard core values at build time.

If I build my app as a docker image I don't want to have to have my pipeline build and store a different image for each app that needs to be hosted at a different sub-directory.

[ianschmitz]

Have you tried the instructions for serving from different paths: https://create-react-app.dev/docs/deployment/#serving-the-same-build-from-different-paths

It doesn't work for all use cases as documented such as client side routing.

[DanoThom]

Thanks yes, we're using client-side routing. I've had to settle on 1 of 2 hacky work arounds but I feel like while CRA is useful to get up and running - once you get to doing the actual deployment and setting up release pipelines for anything slightly outside of the scope of the Hello World examples, you find yourself in a world of hurt.

[pscanf]

@DanoThom: check out staticdeploy/app-server (project and docker image). One of its goals is to make PUBLIC_URL dynamically configurable (it also allows you to inject runtime environment variables, a somewhat similar problem).

app-server works by setting PUBLIC_URL to ./ during the build stage, so that all generated links are relative. At serve time, the asset-serving algorithm is smart enough to figure out which asset to serve, even if requests do not perfectly match its path (detailed explaination).

[DanoThom]

@pscanf sounds like exactly what I'm after. I'll definitely take a look. Thanks for the heads-up!

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.