How to make distinct versions (development and production) of JS code?

I develop small web application, distributed in Docker container, based on nginx image. It contains plain html and js code, without frameworks.

In JS code there is access to remote host via WebSockets. There is difference in environments: during testing on localhost, it works via http, on production server it uses https. So URL, which is passed to WebSocket, starts either with ws:// or wss://

  • Couchbase - How to change “max_kv_size_per_doc”?
  • PDAL: filters.outlier: Unexpected argument 'extract'
  • AWS ECS - Images from S3
  • How can I expose a Docker container port only to localhost so that it is also accessible via an ssh tunnel?
  • Docker containers handling more load
  • How can I know why Docker container stopped?
  • What is reliable solution to maintain two versions of these URL in code, considering I want to keep single Docker image for both development and production, and just use different Docker Compose configuration scripts?

    There is example of work with WebSockets:

    // This is for testing in localhost environment
    var url = "ws://" + + window.location.pathname + "bridge/";
    // This is for working in production environment
    var url = "wss://" + + window.location.pathname + "bridge/";
    BRIDGE.socket = new WebSocket(url);

  • Docker not able to connect via host IP or localhost
  • Can not pull docker image
  • SBT docker:publish authentication issue
  • Access a service from one container to other
  • 404 when pulling a private Docker repo from Hub
  • Can't connect to Postgres container with Docker Compose from Sequelize
  • One Solution collect form web for “How to make distinct versions (development and production) of JS code?”

    Here is a simpler “template substitution at runtime” idea that could work.

    The base nginx image from Docker Hub actually has a utility from the gettext package called envsubst. It can substitute environment variables inside files. We can leverage this at runtime by making a quick shell script as an entrypoint to do the substitution for us.

    First, let’s create the script:

    if [ -n "$BASEURL" ]; then
      envsubst '$BASEURL' < /my.js.template > /my.js
      exec nginx -g "daemon off;"
      echo "you must specify \$BASEURL as en environment variable"

    This will look for a file at /my.js.template. My example file looks like:

    var url = "$BASEURL" + window.location.pathname + "bridge/";

    We’ll need to wrap this up in a new Docker image based on the original nginx. The Dockerfile will look something like:

    FROM nginx
    COPY /
    COPY my.js.template /my.js.template
    ENTRYPOINT ["/"]

    Now, assuming that /my.js was the file you wanted to replace the URL per environment, you can start this image like:

    docker run -d -e BASEURL=wss://myhost mynewnginximage

    It will replace the $BASEURL int eh template and write it out to /my.js and then execute nginx as PID 1 just as the original base image does.

    Of course, you’d have to adapt the shell script paths to your actual code. But in theory, you can now use the same image, and just change the BASEURL environment variable per environment. In Docker Compose, you can specify a blank environment variable like:


    This will instruct docker-compose to use the BASEURL that is set on your local shell and pass it through to the container. So, you wouldn do docker-compose up like:

    export BASEURL=ws://myhostfordev
    docker-compose up

    Let me know if something doesn’t make sense and I can try to clarify. Alternatives to envsubst for more templating could be something like instead which is a bit more powerful and can also take environment variables as input for templates.

    Docker will be the best open platform for developers and sysadmins to build, ship, and run distributed applications.