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
dom 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.
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