Happy Pi Day! In honor of this special occasion, we’re excited to share a tutorial on how to set up a React.js development server in Docker on a Raspberry Pi. With the rise of containerization, Docker has become an increasingly popular tool for managing and deploying web applications, and Raspberry Pi is a versatile and affordable platform that’s perfect for experimenting with new technologies.
In this tutorial, we’ll walk you through the steps of setting up a React.js development environment in Docker on your Raspberry Pi. We’ll cover everything from updating and upgrading your system to installing the necessary dependencies and running a Docker container with your React.js app. Along the way, we’ll provide helpful tips and commands for managing your Docker containers and images.
The first thing that you are going to have to do is use the raspberry pi imageing tool to download and install raspberry pi os on a sd card.
You can now log into your pi or use ssh depending on your setup I will be using ssh today.
the first thing we are going to do is update the system
sudo apt update && sudo apt upgrade -y
now that the system is up to date lets start by installing docker
curl -sSL https://get.docker.com | sh
now that docker is installed lets stop from having to use sudo every time we enter the docker command we do this by adding the user to the docker group with the command
sudo adduser [user name] docker
now we do not have to type sudo every time we run a docker command
lets see if docker is installed
the next piece of software that we will need is called docker-compose but to install that we are going to need some other software to so of this might already be installed for you depending on the OS image that you used
sudo apt install libffi-dev libssl-dev sudo apt install python3-dev sudo apt install -y python3 python3-pip
now we will use pip to install docker compose
sudo pip3 install docker-compose
lets check to see if docker-compose install crackly with the command
with docker and docker-compose installed on your raspberry pi lets get started with the project by making a folder
and use cd to move into the folder
now we are going to use nano to make a file called Dockerfile with no explanation here is the contents of the file
sudo nano Dockerfile
# Use an official Node.js runtime as a parent image FROM node:14-alpine # Set the working directory to /app WORKDIR /app # Install dependencies RUN npm install # Build the React app RUN npx create-react-app my-app # Set the working directory WORKDIR /app/my-app # Set the command to start the server CMD ["npm", "start"]
in this file we are telling docker that we would like to use the base image of node that has a tag of 14-alpine
then we set the work directory to /app and install npm with npm installed we make a new react app called my-app the next line sets a new working directory to /app/my-app the last line starts the server.
now that docker know how to build the image we can run the command
docker build -t [image name] .
this will make the image that we will use in a bit to setup the dev server.
now lets start the image to test and see of it works
docker run -d -p 3000:3000 [image name]
and run the command docker ps to see more info on the ct like the name.
if you dont see a output from docker ps try removing the -d to see and output from the image.
now lets copy so files from the image so that we can start up the image and see a test page.
docker cp [CONTAINER ID]:/app/my-app /home/ve/Reactjs-Docker/my-app
now that we have the files from the image we can stop it with
docker stop [CONTAINER NAME]
now it is time to use docker-compose be we will need a docker-compose.yaml file to do this remember this is a .yaml file so spacing is big!
sudo nano docker-compose.yaml
version: '3' services: [CT-name]: image: [image name] ports: - "3000:3000" volumes: - ./my-app/my-app:/app/my-app
in this file we tell docker-compose that we are using v3 script and that we are making a service then the name of the container that we would like to make. the next line is a call for the image that we made in the steps before. then we tell it that we would like to map port 3000 of the server to port 3000 of the CT so we will talk to the docker CT at server ip addres:3000 with a web browser. The last line is maybe the most impotent tho the last line maps the folder my-app that we places all the files in to the ct folder my-app this is what will let us easily develop in react.js with this server.
now that all of this is done it is finally time to start the server up on your raspberry pi with the command
docker-compose up -d
then go to your web browser
http://[raspberry pi ip address]:3000