Pi Day special React.js Dev Server in Docker on Raspberry pi

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

docker -v

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

docker-compose -v

with docker and docker-compose installed on your raspberry pi lets get started with the project by making a folder

mkdir Reactjs-Docker

and use cd to move into the folder

cd Reactjs-Docker

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.

docker ps

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

Leave a Reply Cancel reply