Using a Raspberry Pi as Your Development Server
Tags: webdev, tutorial, beginners, react
Published: 2020-02-01 17:32:05

---
title: Using a Raspberry Pi as Your Development Server
published: true
description: Step by step instructions to turn your Raspberry Pi into a development or test server
tags: webdev, tutorial, beginners, react
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/7u1av7ouw25j7se9a6hx.jpg
canonical_url: https://www.jeremymorgan.com/tutorials/raspberry-pi/raspberry-pi-4-dev-server/
---


In this tutorial, I will show you how to set up a Raspberry Pi 4 as a development (or testing) server. You can use this as a place to push your code and test it in a web browser. For the demo, I'll use a React application, but with a few modifications, you can build just about anything with it. 

For this project, I'm using a [Canakit Raspberry Pi 4 Complete Kit](https://www.amazon.com/gp/product/B07V5JTMV9?pf_rd_p=ab873d20-a0ca-439b-ac45-cd78f07a84d8&pf_rd_r=QN536JEZ0EJQ7KCPFBKY). This gives you everything you need to get going, including a case, power supply, and SD Card. 

![Raspberry Pi 4 Development Server](https://dev-to-uploads.s3.amazonaws.com/i/6mfp439w3k8dpjt6gfth.jpg)

### Why Bother?   

A solid development environment is important. You need a place where you can look at your application to make sure it's running fine. Many times folks do this on their local machine. It's better to test on a separate machine from what you're working on. This way, you can catch things like dependency and configuration changes. 
  
This development/testing server has the following advantages:  
  
- A configuration and environment that matches production (if you have a Linux host)
- Build code on any machine push it to a centralized location
- Continuous Integration - Push, refresh in a browser!

Ideally, you can set up a workflow that looks like this:
<br />
![Raspberry Pi 4 Development Server](https://dev-to-uploads.s3.amazonaws.com/i/ngdu55sl6gjb5c8688y4.jpg)

1. Develop your code locally and commit it.
2. Push to development and test it out
3. Approve changes, push it live

This enables a great workflow where you can make changes and edits, commit, then push them and refresh your browser. You can then develop your code from any machine on the network that has git. Once you're satisfied with the changes, you can copy the artifacts to production. In fact, you can integrate production pushes into this workflow to make it all automatic. 

### Setting up the Pi as a Server

![Raspberry Pi 4 Development Server](https://dev-to-uploads.s3.amazonaws.com/i/zip676225z0i8zz2ogs3.jpg)

For this project, I'm using the full [Canakit Raspberry Pi kit](https://www.amazon.com/gp/product/B07V5JTMV9?pf_rd_p=ab873d20-a0ca-439b-ac45-cd78f07a84d8&pf_rd_r=QN536JEZ0EJQ7KCPFBKY). It comes with everything you need. I won't go into setting this up in this article, but I should note that I'm using the [Ubuntu Server image](http://bit.ly/UbuntuRaspberryPi) for this project, and recommend you do the same. 

I used my [Pinebook pro](https://twitter.com/JeremyCMorgan/status/1216767569299853312) to burn the image to a card, but you can do this in Windows or with a Mac if you need to. 

[Here's a good guide](http://bit.ly/SetupPi54) for setting up one of these kits. 

We will set this up as a development/test server and use GIT to communicate with it. So here is what we'll do:

- Set up Git for Publishing
- Install Nginx
- Install NPM 
- Create deployment from a repo on your machine to the Raspberry Pi web server in a single step.

When we're done, we can change our React application and push the changes to the Pi to view them as a web page. 

### 1. Set up Git for Publishing

**Location: On Raspberry Pi**

First we need to install Git. 

```
sudo apt install git
```

Now we need to git shell to /etc/shells

```
which git-shell
```
and we will add that output to /etc/shells

![Raspberry Pi 4 Development Server](https://dev-to-uploads.s3.amazonaws.com/i/33a3z4kpey4dllxb2uv9.jpg)

Now we want to set up a git user that doesn't have the cool permissions that your account does. 

```
sudo adduser --disabled-password git
```

Switch to the git user

```
sudo su git
```

Change to the git users home

```
cd ~
```

Make a directory for ssh files

```
mkdir ~/.ssh && chmod 700 ~/.ssh
```

We'll create our authorized_keys file

```
touch ~/.ssh/authorized_keys && chmod 600 ~/.ssh/authorized_keys
```

Now you can add the public keys of any machine you'd like to access the server by adding them to:

```
/home/git/.ssh/authorized_keys
```

Then we'll set the git users' shell to git-shell

```
sudo chsh git -s $(which git-shell)
```

Create a folder for our www files that we'll be serving later:

```
mkdir ~/www
```

### 2. Create Our Project Folder
**Location: On Raspberry Pi**

This is a remote repository set up so we can work on the project on any other machine, then push it to the Raspberry Pi. 

```
cd ~
mkdir /home/git/react-hello-world.git
```

Now, let's initiate it:

```
cd react-hello-world.git && git init --bare
```

Let's go back to our machine and test it out. 

On your developer machine, type in:

```
git clone git@[your IP address]:react-hello-world . 
```

You should be able to clone it your local machine.

![Raspberry Pi 4 Development Server](https://dev-to-uploads.s3.amazonaws.com/i/6w44ufpt34up3neyp9h3.jpg)

If this works, we'll go back to the Raspberry Pi. 

### 3. Install Nginx
**Location: On Raspberry Pi**

Next, we will install Nginx on our Raspberry pi and use it to serve web pages. 

In this tutorial, we will set it up for a single project, so we'll be using a single www directory. However, if you have multiple projects, you want to break them into folders. 

```
sudo apt install Nginx
```

This will install Nginx. 

You may need to add a firewall exception to ufw. You can list the available profiles by typing in:

```
sudo ufw app list
```

![Raspberry Pi 4 Development Server](https://dev-to-uploads.s3.amazonaws.com/i/50urcsv9gkxl8u6bh420.jpg)

You can add an exception with:

```
sudo ufw allow 'Nginx HTTP'
```

Now when you bring up the IP in the web browser, you will see the Nginx welcome page.

![Raspberry Pi 4 Development Server](https://dev-to-uploads.s3.amazonaws.com/i/cz1nzg5obll4ckojaihq.jpg)

Now you have an Nginx server up and running.   
  
### 4. Configure Nginx
**Location: On Raspberry Pi**

Next, we will change the Nginx config. 

Make a copy of the default config in your home folder as a backup: 

```
sudo cp /etc/Nginx/sites-available/default ~
```

Edit the conf file and add in the www folder we created earlier. 

```
sudo vim /etc/Nginx/sites-available/default
```

Look for the "root" and change the default to our www folder:

![Raspberry Pi 4 Development Server](https://dev-to-uploads.s3.amazonaws.com/i/v2ugmmk29w0kyifwi813.jpg)

Then save the file and reload Nginx.

```
sudo systemctl reload Nginx
```

Now you're serving files from the www folder instead of git. This is where we publish files after committing. 

![Raspberry Pi 4 Development Server](https://dev-to-uploads.s3.amazonaws.com/i/whjq33qjmnwoo663cmjl.jpg)

Let's go back to our developer machine.

### 5. Set up Our React Project

**Location: On Your Developer Machine**

We will build a React project and deploy that to our Pi. So let's set that up. 

First, we'll remove the repo we cloned earlier.

```
rm -rf react-hello-world/
```

And we'll use the React CLI to create an app with the same name. 

```
npx create-react-app react-hello-world
```

![Raspberry Pi 4 Development Server](https://dev-to-uploads.s3.amazonaws.com/i/cnzphkljgxe1pmgm4qvw.jpg)

Now we've created a basic React project. Next, initialize it as a git repository.

```
git init
```

We'll add our existing files and commit them. 

```
git add .
git commit -m "Our first commit"
```

We'll set the remote to our Raspberry Pi. We set this, so when we push it to remote, the files will go to our Raspberry Pi.

```
git remote add origin git@[Your IP Address]:react-hello-world.git
```

And we'll push it to the Raspberry Pi:

```
git push --set-upstream origin master
```

If you go to the Pi, you will see the repository in your react-hello-world.git folder:

![Raspberry Pi 4 Development Server](https://dev-to-uploads.s3.amazonaws.com/i/oib4kgt4fngf37sad6l2.jpg)

Now that we have that set up, we must set up the Pi to build your React application. 

## 6. Set up the Server to Build
**Location: On Raspberry Pi**

We have our git remote repository set up, and Nginx installed, but we need to tie it all together. We need to build our application.  

We now need to install Node and NPM on the Raspberry Pi to start. 

```
curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
sudo apt install nodejs
```

You can verify they're installed by typing in:

```
node --version 
npm --version
```

<br />

![Raspberry Pi 4 Development Server](https://dev-to-uploads.s3.amazonaws.com/i/g6u7fr74kzbfacq01baw.jpg)

We now have Node up and running. 

### 7. Setup React to Build
**Location: On Raspberry Pi**

Let's build our React App on the Raspberry Pi, just to test it out. 

Check out the repo locally: 

```
cd ~ && git clone react-hello-world.git/ test
```

Then we will install react and react-scripts (-g makes it global)

```
npm install react -g
npm install react-scripts -g
```
  
If we run:  
  
```
npm run-scripts build
```

We can see it built properly. 

![Raspberry Pi 4 Development Server](https://dev-to-uploads.s3.amazonaws.com/i/uido86nm1dp2gviymvcz.jpg)

Once we know we can build the React app manually, we can automate it. 

### 8. Tying It All Together
**Location: On Raspberry Pi**

Now we need to copy those files into our www folder. We want to do that automatically every time we push to the git repo. 

Make sure you're in your git remote folder on the Raspberry Pi(for me it's /home/git/react-hello-world.git/)

And create a new file:

```
vim hooks/post-receive
```

Add in:

```
#!/bin/bash
unset GIT_INDEX_FILE
echo "Publishing our React App"
git --work-tree /home/git/build --git-dir=/home/git/react-hello-world.git checkout -f
cd /home/git/build
npm run-script build
cp -r /home/git/build/build/* /home/git/www
```

Use your own folder names for this. I have created a /home/git/build folder, and its job is to hold the source files and build them. 

What this file does is create a post-receive hook in git, so after you push to remote, these actions will be run. 

- It checks out the repo into the build folder
- Runs a build script
- copies the artifacts to our www folder.

There are a few different ways you can do this, but this is a simple way to build and push the application to the www folder. 

You could build the application locally and just commit/push artifacts. I am building it on the "server" (our Raspberry Pi). This is a better way to do it because you can match your Raspberry Pi to your production server and only push over source to be automatically built. You don't have to worry about a config change on your development machine that won't be on your production machine. This enforces some consistency. 

You can also run tests here if you'd like. 

Once you're done adding in these changes, then mark the file as executable. 

```
chmod +x hooks/post-receive
```

### 9. Testing Your Integration
**Location: Your local machine and the Raspberry Pi**

Now it's time to test it all. In your React app, open up App.js and make some kind of change. 

Add it and commit it. 

```
git add .
git commit "small change"
git push origin master
```

You will see output from your remote:

![Raspberry Pi 4 Development Server](https://dev-to-uploads.s3.amazonaws.com/i/nexytrf67wp065vo1vtn.jpg)

Now you're ready to test it in a web browser!!!   
  
Here's what we've been waiting for!  
  
![Raspberry Pi 4 Development Server](https://dev-to-uploads.s3.amazonaws.com/i/ai1ea4civx5wzschwqbz.jpg)

There's my React site in all its glory.   
  
Now, I can update this application by:   
  
- Making changes
- Committing
- Pushing to Master

All in a matter of seconds, I can see the results of my changes. Easy and simple. You could easily extend this, so you push it to here, do a spot check then push it to a staging or production server. The possibilities are endless. 

### 10. Start Developing!

I created this tutorial with a React app as an example, but it could just as easily be Angular, Vue, Golang, Python, PHP, or whatever. The concepts are the same. I hope this will speed up your workflow and give you a nice place to spot check and test your application before pushing it live.   
  
It's not exactly an enterprise solution, but it's a cheap alternative to an actual server.   
  
Here's how I have it setup:  
  
![Raspberry Pi 4 Development Server](https://dev-to-uploads.s3.amazonaws.com/i/v95hhclo8fwj6nl6fl6x.jpg)  
  
I used my [Pinebook Pro](https://www.jeremymorgan.com/blog/linux/pine64-pro-laptop-review/) as the development machine for this article. What you're looking at here is a fully capable development setup for ~$300. I could easily develop tons of apps and push them to production with this setup. Thanks to ARM processors and the tireless work of innovators such as the [Raspberry Pi Foundation](http://bit.ly/PiFoundation) and the [Pine64 Project](http://bit.ly/Pine64Project).   
  
What do you think? **[Yell at me on Twitter](http://bit.ly/JeremyCMorgan)** and let me know!