Dynamic PUBLIC_URL

[jfairley]

I'm testing the waters for interest here. I worked up a solution for PUBLIC_URL, though I'm not sure if it's right for everyone. I'll discuss it, then see the sample Dockerfile at the end.

This solution has two special steps.

1. First, before building, I set PUBLIC_URL to something I can find later, in my case {{base_url}}.
2. Next, I add my own command to entrypoint.sh to find and replace that variable with the runtime environment.

This solution does have limitations, though solvable.

1. Changing the value of $REACT_APP_BASE_URL across container restart has no effect, because the files are already written.
   • However, I could easily amend my sed command to create .bak files and there could be an attempt to restore any .bak files on boot, anticipating a potential need to find-and-replace again.
2. My apps are pretty vanilla CRA apps, so I don't know if there are people using any fancy plugins for which this may not work.

If there's interest in making this part of react-env, I can whip up a pull request. I expect all the dev work would be isolated to the entrypoint.sh, and of course there'd be documentation updates.

---

#
# Stage 1
#
FROM node:12-alpine AS build

ENV PUBLIC_URL="{{base_url}}"

# Create app directory
WORKDIR /usr/src/app

# Bundle app source
COPY . .

# Install dependencies and build the app
RUN npm install --production && npm run build


#
# Stage 2
#
FROM beamaustralia/react-env:2.1.2

RUN sed -i "5ifind \/var\/www\/ -type f -exec sed -i'' -e 's|{{base_url}}|'\"\$REACT_APP_BASE_URL\"'|g' {} \\\;" /var/entrypoint.sh
RUN cat /var/entrypoint.sh

WORKDIR /var/www

# Copy app files from Stage 1
COPY --from=build /usr/src/app/build /var/www

---

In case it's not clear, my RUN command:

1. is a sed command
2. which inserts a find command into entrypoint.sh
3. which runs a sed command on every file in /var/www
4. which replaces {{base_url}} with the value of $REACT_APP_BASE_URL.

Fun right? 😀

---

BTW, I do not see this as a breaking change. It is fully opt-in. For my containers, the $REACT_APP_BASE_URL is commonly undefined in dev.

[andrewmclagan]

Hey, thanks for the idea. Just to be clear, it seems that your making PUBLIC_URL a build-time env-var? This package is specifically for runtime env-vars. Also not sure including a specific env variable called PUBLIC_URL is within the scope of this package. Closing for now

[jfairley]

@andrewmclagan

No, this makes CRA's PUBLIC_URL a runtime variable.

[RobertHeim]

@andrewmclagan I think you misunderstood his solution. Yes, he FIRST replaces PUBLIC_URL with a specific string at BUILD TIME. But in the SECOND step he replaces that specific string again AT RUNTIME in the entrypoint.sh.

[jfairley]

This guy gets it. 💯 @RobertHeim