- Create React App. Getting Started
- How to install Docker on MacOS
- How to Docker with create-react-app
- and last but not least we've added hot reloading via suggestions in Michael Herman's Dockerizing a React App
- Set up a Create React App dev environment running locally in docker
- Hot reload our way through any local dev tasks we have at hand
- Make sure you have docker installed Just follow the first article on how to install Docker (with Docker Machine instead of Docker Desktop). If you're on a Mac but you prefer Docker Desktop, that will work fine. Also, no matter what system you're on, if you have docker running, we're good to go.
- So in my case, I have docker-machine running, but not as a service, just ... there.
So I gear up VS Code in a directory, and do the following
- See if docker-machine is running
-
% docker-machine ip Error getting IP address: Host is not running % docker-machine start Starting "default"... (default) Check network to re-create if needed... (default) Waiting for an IP... Machine "default" was started. Waiting for SSH to be available... Detecting the provisioner... Started machines may have new IP addresses. You may need to re-run the `docker-machine env` command. victorkane@Victors-MacBook-Air how to docker-with-css-styles-in-cra % docker-machine env export DOCKER_TLS_VERIFY="1" export DOCKER_HOST="tcp://192.168.99.101:2376" export DOCKER_CERT_PATH="/Users/victorkane/.docker/machine/machines/default" export DOCKER_MACHINE_NAME="default" # Run this command to configure your shell: # eval $(docker-machine env) % eval $(docker-machine env) % docker-machine ip default 192.168.99.101
-
- So as not to have to go through this every time
I have this set up in my shell
rcfile-
tail ~/.zshrc # check if `docker-machine` command exists if command -v docker-machine > /dev/null; then # fetch the first running machine name local machine=$(docker-machine ls | grep "Running" | head -n 1 | awk '{ print $1 }') if [ "$machine" != "" ]; then eval "$(docker-machine env $machine)" fi fi
-
- See if docker-machine is running
-
Create a repo and run
create-react-appWe're going to runcreate-react-appin an unconventional manner by first creating a directory with our own README and initializing a git repo, instead of creating the whole app in a subdirectory -
creating the repo and
create-react-appfrom the command line-
mkdir docker-for-cra-dev-with-hot-reloading cd docker-for-cra-dev-with-hot-reloading git init npx create-react-app . mv README.md README.cra.md mv README.old.md README.md git add --all git commit -m "initial commit"
-
-
We cleaned up and made our initial commit (since CRA created its own README and shunned ours over to a different name)
-
We run the default app and make sure it's running ok
-
We successfully point our browser at http://localhost:3000/
- Now let's dockerize everything.
- Including hot reloading!
- We create
Dockerfile - We create .dockerignore
- We do
rm -rf node_modulessince we won't be running locally, but in the docker container - Now build in the current directory and run
-
docker build -t work:cra . Successfully built 53d3ebb0de6e Successfully tagged work:cra docker run -it --rm -v ${PWD}:/app -v /app/node_modules -p 3001:3000 -e CHOKIDAR_USEPOLLING=true work:cra
-
- Point your browser at http://localdev:3001/
where
localdevis the ip returned bydocker-machine ip(or else uselocalhostif you're using Docker Desktop or what have you)
- When you execute the docker command,
a container is executed based on the image we built
-
docker ps CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 177be52c5868 work:cra "docker-entrypoint.s…" 8 minutes ago Up 8 minutes 0.0.0.0:3001->3000/tcp keen_haslett
-
- Change something in
src/App.jsand the browser should hot load with the changes
- For example, this recent article on checking out different approaches towards CSS styling in React How to CSS Style in React And you can just do that so easily with a local development environment in docker