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:

#!/bin/sh

case $1 in
    dev)
        yarn
        echo "Running development server on 0.0.0.0:3000.."
        yarn start
        ;;
    test)
        echo "Running tests.."
        yarn test
        ;;
    sh)
        /bin/sh
        ;;
esac

Another file named Dockerfile with this content:

FROM node:lts-alpine
ENV HOST 0.0.0.0

WORKDIR /app

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 the

Happy hot-reloading!

🙏🙏🙏

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.

Published 20 Feb 2020