react multi stage

[susahin80]

I want to try your solution, but I am having difficulty to make it work in a multi stage dockerfile.

Can you please show a full dockerfile for react multi stage?

[susahin80]

I made it work (windows 10 docker desktop - wsl2 ) by changing backticks to single quotes in the following code block:

      window.$$env = {
        var0: '${REACT_APP_BASE_API_URL}',
        var1: '${REACT_APP_USING_DOCKER}',
        var2: '${REACT_APP_WHICH_ENV}'
      };

Because yarn build affects here, and sets the default values previously defined in the html, causing the template not effect at all.

If it helps to anybody, here is the full dockerfile:

FROM node:14-alpine as build

WORKDIR /app

COPY package.json yarn.lock ./

RUN yarn install --silent --frozen-lockfile

COPY . .

RUN yarn build

# Pin exact version to have repeatable builds (see more https://12factor.net/dependencies)
FROM nginx:1.19.2

COPY --from=build /app/build /usr/share/nginx/html

WORKDIR /usr/share/nginx/html

# # entry point from nginx image executes all *.sh files
# # from /docker-entrypoint.d folder on every start of container
COPY envsubst-on-index.html.sh /docker-entrypoint.d/00-envsubst-on-index.html.sh

# # we save index.html as index.html.template
RUN mv index.html index.html.template

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

[zaverden]

@susahin80 thank you for sharing your experience.

I've never met this behavior of build process before. Let me check if I got your issue right:
You have put this JS to your index.html

const REACT_APP_BASE_API_URL = 'http://locahost:8080/api';
window.$$env = {
  var0: `${REACT_APP_BASE_API_URL}`, // <- backticks here
}

and after you run yarn build index.html in out directory has default value "inlined"

window.$$env = {
  var0: 'http://locahost:8080/api',
}

if this is right description, then could you please share more details about build process in your application. Generally it should not happen, so it may be some webpack plugin that "optimizes" this code on build.

[petermarcoen]

I had this same exact issue while using create-react-app, single quotes instead of backticks solved it for me as well

[zaverden]

@petermarcoen thank you for update. I will look