I’m working with a React application that was created using Create React App and I’ve set it up to run in Docker. My current Docker setup works fine for development and testing. Here’s what my Dockerfile looks like:
FROM node:16
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
EXPOSE 3000
ENTRYPOINT ["npm", "run"]
CMD ["start"]
I want to use Docker for creating production builds to ensure they are consistent across different environments. When I execute docker run my-react-app build, the build process completes successfully inside the container and creates the production files.
The issue I’m facing is that these built files remain trapped inside the container. I need a way to automatically transfer these build outputs to my local filesystem, ideally into my current directory. What’s the best approach to accomplish this file extraction from the container to my host machine?
Easiest approach I’ve found: use docker cp after building. Run your container with docker run --name temp-build my-react-app build, then docker cp temp-build:/app/build ./build to grab everything. Clean up with docker rm temp-build when you’re done. Works every time without touching your Dockerfile.
Multi-stage builds handle this perfectly without any manual copying. Set up your Dockerfile with two stages - one builds, one serves. In the build stage, run npm run build and copy the output somewhere predictable. Then use docker build --target build-stage . to stop at just the build step. You can pull files straight out during the build with docker build --output type=local,dest=./build . if you’ve got BuildKit enabled. This bakes the extraction right into your build pipeline instead of juggling separate containers. I’ve done this on tons of React projects and it beats tracking temporary containers or remembering docker cp commands every time.
Docker workflows turn into a nightmare when you’re constantly extracting files by hand or messing with volume mounts.
I had the same problem until I automated everything. My current setup watches the repo, auto-triggers Docker builds when code changes, dumps build files where they belong, and switches environments based on which branch you’re on.
Best part? You never run Docker commands again. Just push your code and everything else happens - containers spin up, builds run, files get extracted to your local machine or wherever you need them, then cleanup. Perfect for React apps since the build output never changes.
You can trigger builds on git pushes, schedule them, or run manually. The system drops your build folder exactly where you want without dealing with volume mount syntax or docker cp nonsense.
Latenode handles this exact workflow automation. Set it up once and your Docker builds run themselves.
You’re building a React application with Create React App and Docker, and the production build artifacts are staying inside the Docker container after running docker run my-react-app build. You need a way to get these files (located in the /app/build directory within the container) to your local machine’s current directory.
Understanding the “Why” (The Root Cause):
The problem is that the build process happens in isolation within the Docker container. The /app/build directory inside the container is separate from your local filesystem. To access the build files on your host machine, you need a mechanism to transfer them. Simply running the build inside the container doesn’t automatically copy the results to your local system.
Step-by-Step Guide:
Volume Mounting During the Build: This is the cleanest and most efficient method. Instead of running the container and then copying the files, you’ll create a volume mount that directly links a directory on your local machine to a directory inside the container during the build process. This avoids the need for any post-build file transfer.
Create a local directory: In your terminal, navigate to the root directory of your React project and create a directory for the build output. For example: mkdir build
Run the Docker build with volume mounting: Execute this command:
docker run -v $(pwd)/build:/app/build my-react-app build
This command does the following:
* -v $(pwd)/build:/app/build: This creates a volume mount. $(pwd) represents your current working directory, so $(pwd)/build is the path to the build directory you just created. This is mapped to /app/build inside the container. Any files written to /app/build within the container will appear in ./build on your local filesystem.
* my-react-app: This is the name of your Docker image.
* build: This is the command to run inside the container (the npm run build script defined in your package.json).
Verification: After the build process completes, check your local build directory. The production-ready files from your React application should be there.
Alternative (If Volume Mounting Fails): Using docker cp (Less Efficient): If for some reason volume mounting doesn’t work (e.g., due to permissions issues on your host), you can use the docker cp command. This is less efficient because it requires creating and removing a temporary container.
Run the container: Run the build process in a named container:
docker run --name temp-build my-react-app build
Copy the files: Once the build completes, copy the files from the container to your local machine:
docker cp temp-build:/app/build ./build
Remove the container: Clean up the temporary container:
docker rm temp-build
Common Pitfalls & What to Check Next:
Permissions: Ensure that the build directory on your local machine has the correct write permissions. If you encounter permission errors, you might need to adjust the permissions of this directory using chmod (Linux/macOS) or changing permissions through Windows Explorer.
Dockerfile Errors: Double-check your Dockerfile to make sure the build process correctly outputs files to the /app/build directory within the container. Examine your package.json to verify the build script’s accuracy.
Incorrect Image Name: Verify that my-react-app is the correct name of your Docker image. Use docker images to list available images.
Docker Context: Confirm you are in the correct directory when running these commands. The path $(pwd)/build:/app/build depends on your current working directory.
Still running into issues? Share your (sanitized) config files, the exact command you ran, and any other relevant details. The community is here to help!
Been through this exact scenario tons of times with containerized builds. The manual docker cp approach works but gets old quick.
You could mount a volume like docker run -v $(pwd)/build:/app/build my-react-app build but then you’re tweaking container setup constantly.
I ended up automating the whole thing. Now when devs push code, our system spins up the Docker container, runs the build, extracts files where they need to go, and handles deployment if needed.
My workflow covers everything - triggering Docker builds, copying files to specific directories by branch name. Saves hours weekly and kills those “works on my machine” problems.
For React apps, you can automate builds on git pushes, auto-extract the build folder, even sync to your hosting provider. The automation handles all the docker run and docker cp commands so you don’t need to remember syntax.
This workflow automation is what Latenode does best. Set it up once and never manually extract files again.
Understanding the “Why” (The Root Cause):
Step-by-Step Guide:
Common Pitfalls & What to Check Next:
Still running into issues? Share your (sanitized) config files, the exact command you ran, and any other relevant details. The community is here to help!