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

  1. Make sure Docker is running on your computer. I'm using a Mac so I use Docker Desktop.

  2. Create a Dockerfile that 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
    		
  3. Create a docker-compose.yml file.

    		
    version: '3.8'
    
    services:
      web:
        build: .
        volumes:
          - ./project_dir:/code
        ports:
          - "3000:3000"
    		
  4. Build the image.

    
    docker-compose build
    		
  5. 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.

  6. 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
    		
  7. Exit the shell, which will close your image.

  8. 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
    		
  9. Start the image with docker-compose up.

    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.

Posted on by Glenn

Comments

Post a comment

cancel reply