That's a great question! It has to do with the multi-stage build in Docker.
In the first FROM statement (first stage), you copy the source code to the container and run the build command (yarn run build). The build command generates everything that you need to run the app (JS, HTML, etc.)
In the second FROM statement (second stage of the build), on line 9, you copy the contents of the /app/build folder from the first container to the current one.
So the second image actually contains the built artifacts (HTML, JS, ...) and the serve package - it does not contain any of the node_modules or source code either.
Another advantage of using multi-stage builds is the size. The first image in the example is ~198MB, while the second one is only 86.7 MB.
Hope this explains it - I'll update the article to clarify this more as well.
That's a great question! It has to do with the multi-stage build in Docker.
In the first FROM statement (first stage), you copy the source code to the container and run the build command (
yarn run build). The build command generates everything that you need to run the app (JS, HTML, etc.)In the second FROM statement (second stage of the build), on line 9, you copy the contents of the /app/build folder from the first container to the current one.
So the second image actually contains the built artifacts (HTML, JS, ...) and the serve package - it does not contain any of the node_modules or source code either.
Another advantage of using multi-stage builds is the size. The first image in the example is ~198MB, while the second one is only 86.7 MB.
Hope this explains it - I'll update the article to clarify this more as well.
Thanks very much fro the info.