The real TL;DR, clone the repo, run the example, then jump to the Build and Run section:
git clone https://github.com/serafdev/livemount-react-app react-app && cd react-app
Setup the development environment
Create a new React project if you don’t already have one:
npx create-react-app react-app && cd react-app
Put a file on the root of the project named docker-entrypoint.sh with content:
case $1 in
echo "Running development server on 0.0.0.0:3000.."
echo "Running tests.."
Another file named Dockerfile with this content:
ENV HOST 0.0.0.0
COPY package.json /app
COPY docker-entrypoint.sh /docker-entrypoint.sh
RUN chmod +x /docker-entrypoint.sh
ENTRYPOINT ["docker-entrypoint.sh", "dev"]
Build and run! #
You’re ready to test! Run your docker command to build the image:
docker build . -t react-app:local
Now you can run it by mounting your code to the machine and exposing the node port to your host:
docker run -v $(pwd):/app -p 3000:3000 react-app:local
Visit the url on your browser: localhost:3000, you should be able to see the React default page
Test Reloading #
Now let’s modify some code and reload the page, open src/App.js with your favourite editor and modify the content of thedom to: Noice (or anything, really). Now if you reload you should have:
A more detailed article will be coming soon. If you have issues or find difficulties, do not hesitate leaving a comment.
Since you've made it this far, sharing this article on your favorite social media network would be highly appreciated 💖! For feedback, please ping me on Twitter.