nodeshift-blog-examples / frontend-containers Goto Github PK

This is a great article and something I have been looking for in the past. Sadly I cannot get the React example to work (I haven't tried the others.)

Steps to reproduce

1. Checkout the repository
2. cd into the "react-project" folder
3. Execute docker build -t front-end .
4. Execute docker run -d -p 8080:80 --rm --name front -e ENV=prod -e BASE_URL=/api frontend
5. Navigate to http://localhost:8080/

Expected behavior
The values defined as environmental variables in the docker run command are displayed.

Actual behavior

Further remarks
When starting the container the following message is printed: cat: '/usr/share/nginx/html/static/js/*.json': No such file or directory. The message makes sense there is no config.json file present.
I must confess that I also don't understand how the config.json file would end up in there.

I also tried adding the config.json file after the container was created using docker cp src/config.json front:/usr/share/nginx/html/static/js/config.json and restarting the container. This also didn't change whats shown in the UI.

Replacing the variables works. Using a config.json file with the following content (again directly copied into the container)

{
  "ENV": "$ENV",
  "BASE_URL": "$BASE_URL"
}

leads to a config.json file with the values replaced. But they are still not shown in the UI.

File content can be truncated to the first 65535 characters when replacing placeholders.

You should use a tmp file to read from.

#!/usr/bin/env sh
export EXISTING_VARS=$(printenv | awk -F= '{print $1}' | sed 's/^/\$/g' | paste -sd,);
for file in $JSFOLDER;
do
  if [ ! -f $file.tmp ]
  then
    cp $file $file.tmp
  fi
  cat $file.tmp | envsubst $EXISTING_VARS | tee $file
done
nginx -g 'daemon off;'