Getting started with React on Docker
I recently started to learn React, and I wanted to set up a basic Docker container for learning. It was a little tricky to figure out initially because most of the getting-started tutorials for Docker and React are more complex than I needed to just start learning, so I thought I would share my simplified process.
This is just a beginnger level set up. I'm sure you can do something fancier, but basically I wanted a way to do all my development in Docker, without having to set up node, etc on my local machine.
I'm using docker compose, because sometimes projects involve multiple images (like adding a database) and docker-compose makes that easy.
I have glossed over starting and stopping Docker. If you need more on that, probably best to learn Docker basics first.
Here's how it works
Make sure Docker is running on your computer. I'm using a Mac so I use Docker Desktop.
Dockerfilethat installs node and gets the server ready.
FROM python:3 ENV PYTHONUNBUFFERED 1 WORKDIR /code ADD ./project_dir /code/ RUN apt-get update RUN apt-get install libssl-dev libffi-dev RUN apt-get install git RUN curl -sL https://deb.nodesource.com/setup_15.x | bash - RUN apt-get install -y nodejs
Create a docker-compose.yml file.
version: '3.8' services: web: build: . volumes: - ./project_dir:/code ports: - "3000:3000"
Build the image.
Start up the new container with this command:
docker-compose run web bash
This should run the image and give you a bash prompt in your new container.
Create your react app. Run the node development server (npm start) and make sure it works.
npx create-react-app my-app cd my-app npm start
Exit the shell, which will close your image.
Edit your docker-compose file and add the npm start command.
version: '3.8' services: web: build: . volumes: - ./project_dir:/code ports: - "3000:3000" command: npm start --prefix /code/my-app
Start the image with
This should run the image and start the dev server automatically.
You can now use docker exec to open an interactive terminal to do work on the "server" or you can just edit the files locally (because the directory is mounted as a volume).
That's it. Just an easy way to get React up and running on Docker.