Virtualize Everything

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

I’ve been working on a class recently and I got to the point in the class that I needed a server in order to run some of my code that I’ve been developing and this server needed to run node JS applications on it so I could continue working with react JS for the class. This is how I installed node JS and got it up and running so I could begin working with react JS on an Ubuntu LXC container inside of Proxmox.

The first thing that you are going to have to do is setup a ct inside of Proxmox with the Ubuntu 22.10 image on it.

The first that we will do is apply updates to the CT with the command

apt update && apt upgrade -y

now we can use the command apt install nodejs mpm to install everything that we are going to need to run React.js apps from the Ubuntu CT

apt install nodejs npm

To verify that we have everything that we need lets ask the server for some version out puts.

node -v

npm -v

npx -v

If all three of the commands return a v number you are ready to continue.

use cd to goto where ever you would like to store your app and we are going to run the command

npx create-react-app my-app

with my-app being the name of your app this will make a folder inside of what ever folder that you are it from.

The last thing we need to due before you can view the page is to start it from the my-app folder

cd [path to my-app]

npm start

now you should be able to go to your server ip on port 3000 and view a React.js page.

http://[server ip]:3000

Hosting a webpage can be a daunting task, especially if you’re not familiar with the technical aspects of server management. Luckily, Docker Compose offers a simple and efficient way to host your webpage on a server with minimal effort. In this tutorial, we’ll guide you through the process of using Docker Compose to deploy your webpage, step by step. Whether you’re a developer looking to host your personal portfolio or a small business owner seeking a cost-effective hosting solution, this guide is for you. Let’s dive in!

Here are the commands to install Docker, and docker-compose here at the start of 2023

Update the apt package index

sudo apt-get update

Install Docker’s dependencies

sudo apt-get install -y apt-transport-https ca-certificates curl gnupg-agent software-properties-common

Add Docker’s official GPG key

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -

Add Docker’s stable repository to your system’s apt sources list

sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"

Update the apt package index (again)

sudo apt-get update

Install Docker

sudo apt-get install -y docker-ce docker-ce-cli containerd.io

Download the latest version of Docker Compose

sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

Make the Docker Compose binary executable

sudo chmod +x /usr/local/bin/docker-compose

Verify that Docker is installed correctly

docker --version

Verify that Docker Compose is installed correctly

docker-compose --version

Now that we have Docker, and docker-compose installed on the server, VM, or LXC container. It is time to start making the files that docker-compose will need to setup the nginx container and host the webpage

I am going to make this file in my user folder

/home/[user name]

mkdir /home/[user name]/[site name]

Inside of this folder we need to make a yaml file called docker-compose.yaml

nano /home/[user name]/[site name]/docker-compose.yaml

now that you have your docker-compose.yaml file open it is time to start filling this file with info remeber this is a yaml file so spacing matters

The first line we will be adding is

version: '3'

This line specifies the version of the Docker Compose syntax that is used in this file. In this case, version 3 is used.

The Next line is

services:

This line indicates the start of the services section of the file. This section is used to define the containers that should be created by Docker Compose.

The next line will have two spaces at the start of it

[service name]:

This line defines a service. This service will create a container based on the nginx image with the name in this line.

This next line will now start with 3 spaces

image: nginx:latest

This line specifies the image that should be used for the service. In this case, the nginx image is used, with the latest tag. This means that the latest version of the nginx image will be downloaded from Docker Hub when the container is created.

This next lines will have 3 spaces

ports:
  - "80:80"

This line specifies that port 80 of the container should be mapped to port 80 of the host machine. This allows the web server running in the container to be accessible from the host machine.

This next lines will have 3 spaces

volumes:
  - ./[site name]/nginx.conf:/etc/nginx/conf.d/default.conf
  - ./[site name]/index.html:/usr/share/nginx/html/index.html

This line specifies that a volume should be created. This allows you to customize the NGINX configuration for the container.

The finished file should look something like

version: '3'
services:
  
  [service name]:
      image: nginx:latest
      ports:
        - "80:80"
      volumes:
        - ./[site name]/nginx.conf:/etc/nginx/conf.d/default.conf
        - ./[site name]/index.html:/usr/share/nginx/html/index.html

As you can see from the finished docker-compose.yaml we are going to need two more files for this web server one called nginx.conf to tell nginx how to host the index.html file that will hold the webpage.

I am going to just give you a boiler plate with a title for the index.html file you can place yours here but this one will work for testing.

nano /home/[user name]/[site name]/index.html

<!DOCTYPE html>
<html>
	<head>
		<title>My first HTML</title>
	</head>
	<body>

	</body>
</html>

Now it is time to work on the nginx.conf file.

/home/[user name]/[site name]/nginx.conf

This is probably the most basic file that one could create as a nginx.conf file but it will get the job done lets look at how it is made.

The first black is called the server block. In NGINX, a server block is used to define the configuration for a specific virtual server.

server {
}

Inside of the server block we need to tell nginx what port to listen on we do that with this line.

listen 80;

Now we need to make a new block inside of the server block called the location block, which is used to specify the configuration for a particular URL location. In this case, the / location is being configured, which is the default location for the server.

location / {
}

inside of the location block we need to tell nginx where to find the the root directory for the server. In this case, it is set to /usr/share/nginx/html, which is the default directory for static HTML files in NGINX.

root /usr/share/nginx/html;

last we need to tell nginx the default file that should be served when a client requests a directory. In this case, it is set to index.html, which means that if a client requests the root URL of the server, NGINX will look for an index.html file in the root directory and serve it if it exists.

here is what it all looks like when it is finished

server {
    listen 80;

    location / {
        root /usr/share/nginx/html;
        index index.html;
    }
}

Now the we have made all the need files it is time to start the docker container using the docker-compose.yaml file.

lets cd to the folder that all the files are in

cd /home/[user name]/[site name]

now run the command

sudo docker-compose up -d

load your we browser and go the the ip of your server and you should see your webpage.

good luck

some other commands that you might find helpful are

sudo docker-compose ps

to view if your container is running and

sudo docker-compose stop

to stop you container from running.

In conclusion, Docker Compose offers a simple and efficient way to host your webpage on a server with minimal effort. With just a few commands, you can have Docker and Docker Compose installed on your server, and easily set up a container running an NGINX web server with your webpage. By following the steps outlined in this tutorial, whether you are a developer looking to host your personal portfolio or a small business owner seeking a cost-effective hosting solution, you can get your webpage up and running in no time. The use of Docker Compose simplifies the process of web hosting and is a great option to consider for anyone who wants to host a webpage without the need for extensive server management knowledge.