Create a Docker container

[gbowne1]

Create a Docker container/image.

Create a .devcontainer for VSCode

These can be done separately or together

[gbowne1]

@meleneth

[meleneth]

I asked an AI about this, since last time I got the container building just fine but we never solved env var -> backend URL configuration.

in index.html, we want

<script>
window.RUNTIME_BACKEND_URL = "__BACKEND_URL__";
</script>
in the header.

Then, we need a env.sh in the container startup that will replace the value in index.html before starting the webserver
#!/bin/sh

# Replace placeholder in index.html with actual environment variable
BACKEND_URL=${REACT_APP_BACKEND_URL:-http://localhost:3000}

# Replace the placeholder in the built React files
sed -i "s|__BACKEND_URL__|$BACKEND_URL|g" /usr/share/nginx/html/index.html

# Execute the original CMD
exec "$@"

which will allow us in the Dockerfile to

# Run the env.sh script before starting Nginx
CMD ["/docker-entrypoint.d/env.sh", "nginx", "-g", "daemon off;"]

which end up with the env var attached to the global window object, allowing us finally in the react app to
const backendUrl = window.RUNTIME_BACKEND_URL || "http://localhost:3000";
console.log("Backend URL:", backendUrl);

[gbowne1]

@meleneth this particular project has a lot of problems. I did not set up the backend on "Codebooker" myself. The same with "ReactSocialNetwork".

I'm about a month off from having a good Docker system available.

That's a great idea too for this project.