SpiffberryPi
as Dev Server (react / php – anything)

+ DEV SERVER

Checkout – START HERE – RASPBERRYPI / Ubunutu
https://clickety-clack.click/raspberrypi-ubuntu-starter-dedicated-ip-wifi-backups-naming-samba-scp/

CONTINUING: https://clickety-clack.click/raspberrypi-ubuntu-starter-dedicated-ip-wifi-backups-naming-samba-scp/

cat /etc/hosts
# This is an example of the hosts file
127.0.0.1       localhost loopback
::1             localhost
192.168.1.31    myraspi.local

sudo nano /etc/hosts

sudo nano /etc/hostname

https://dzone.com/articles/using-a-raspberry-pi-as-your-development-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. This gives you everything you need to get going, including a case, power supply, and SD Card.

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 and refresh in your browser

Ideally, you can set up a workflow that looks like this:

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

For this project, I’m using the full Canakit Raspberry Pi kit. 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 for this project, and recommend you do the same.

I used my Pinebook pro 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 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

First, we need to install Git.

sudo apt install git

Now we need to add git shell to /etc/shells

which git-shell

and we will add that output to /etc/shells

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

to use this “user” you have to switch (different terminal windows) for commands that require “sudo” priviliges – and back to the git user

su -c 'su git -c "git init"'

sudo -u git git init

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 

Then, 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

new terminal window – sudo privilidged user

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

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

back to git user

mkdir ~/www

2. Create Our Project Folder

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.

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

3. Install Nginx

EXAMPLES: https://www.nginx.com/resources/wiki/start/topics/examples/full/

Location: On Raspberry Pi

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

EXTENSION ARTICLE: https://pimylifeup.com/ubuntu-nginx/

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.

Ubuntu Firewall

https://pimylifeup.com/configuring-ufw/

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

sudo ufw app list

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.

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:

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.

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

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:

Now that we have that setup, 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

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.

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 this into the file:

Plain Text

1

#!/bin/bash 

2

unset GIT_INDEX_FILE 

3

echo "Publishing our React App" 

4

git --work-tree /home/git/build --git-dir=/home/git/react-hello-world.git checkout -f 

5

cd /home/git/build 

6

npm run-script build 

7

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 the 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.

Plain Text

1

git add . 

2

git commit "small change"

3

git push origin master 

You will see the output from your remote:

Now you’re ready to test it in a web browser!

Here’s what we’ve been waiting for!

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 set up:

I used my Pinebook Pro as a 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 and the Pine64 Project.

https://www.toptal.com/raspberry-pi/how-to-turn-your-raspberry-pi-into-a-development-server

How to Build a Raspberry Pi Server for Development

The Raspberry Pi is a little computer that you can get for as low as USD $5 and on which you can run many different types of software and build many different projects. In this article, I'm going to guide you through the process of setting it up as a home development server and deploying a full-stack JavaScript application that you can access from outside your network. This is great for setting up your own remote digital workspace, or simply to have control over the hardware you use for development.

Author

Pablo Villoslada Puigcerber

Pablo's BSCE means he's had top coding standards while crafting numerous front ends. He's also a MongoDB Certified Dev and Toptal Mentor.

0shares

SHARE

The Raspberry Pi is a little computer that you can get for as low as USD $5 and on which you can run many different types of software and build many different projects.

In this article, I’m going to guide you through the process of setting it up as a home development server and deploying a full-stack JavaScript application that you can access from outside your network. This is great for setting up your own remote digital workspace, or simply to have control over the hardware you use for development.

What Do You Need for This Raspberry Pi Home Server?

While this is now a Raspberry Pi 3 tutorial in particular, it should still work with models going back to the first generation—if you have an older model or a Raspberry Pi Zero, please let us know your experience in the comments below.

In addition to the Raspberry Pi board itself, you will need:

• A Micro USB charger
• An Ethernet cable
• A microSD card (minimum 8GB, and cards up to 32GB seem to work fine)

These will also come in handy during the initial setup:

• A USB keyboard
• An HDMI cable and monitor

The Raspberry Pi OS: Raspbian

Installing an operating system onto a Raspberry Pi is simple. First, using your computer, install the boot image onto a microSD card. Then simply insert the card into the Raspberry Pi and boot from there.

Raspbian is a Linux distribution ported from Debian 7.0 (Wheezy), and is the official OS for Raspberry Pi optimized for the device’s architecture. While there are other options for running your favorite OS on the Pi, we’ll use Raspbian because of its simplicity.

This tutorial has been updated to work with this version (or later) of Raspbian:

Kernel version : #1 SMP Debian 4.9.110-3+deb9u4 (2018-08-21)
Kernel release : 4.9.0-8-amd64

To install Raspbian, head to the official download page and download the zip file with the latest Raspbian version.

Then, insert the microSD card into your computer’s SD card slot or adapter. Depending on your computer’s operating system, follow the instructions provided on Raspberry’s website for Linux, Mac OS, or Windows.

Once the process is finished, eject the SD card from your computer and insert it into the Raspberry Pi. Connect the Raspberry Pi to your router using the Ethernet cable, and plug in the Micro USB charger, which will start the Raspberry Pi booting.

For the initial configuration, there are two options:

• If you have a USB keyboard and an HDMI monitor, you can plug them into the Raspberry Pi for the initial setup.

  • Your Pi should recognize these devices as soon as they are plugged in.
  • The first time the Pi boots, it will automatically run raspi-config. After the first boot, you will need to run sudo raspi-config yourself in order to configure the device.

• If you don’t have them, you can connect to your Raspberry Pi while it is on using SSH:

  • First, you need to find the IP address of your Raspberry Pi in your local network. This can be done by connecting to your router’s admin page, or by using a network tool like nmap.
  • Once you have the device’s IP address, connect to it using SSH from your terminal (or through Putty if you’re using Windows). The default user is pi, and the default password is raspberry. So, for example, if the IP address is 192.168.1.16, run ssh pi@192.168.1.16 and enter the password when prompted.
  • When you are connected, run sudo raspi-config.

raspi-config will walk you through the final setup. You can configure all the options but the most important are the first two: to expand the filesystem, ensuring that all the SD card storage is available for the OS, and to change the password for the default Pi user, so that your server will be protected from intruders.

Install a Web Server (Nginx) on Your Raspberry Pi

Next, you’ll install the web server. I prefer Nginx because it has a small memory footprint, and because it plays well with Node.js (which you’ll be setting up later). Other web servers, such as Apache or lighttpd, would work as well, but we’ll use Nginx for this demonstration.

Before you start installing anything, you need to be sure everything is up-to-date by running these commands on the Pi:

sudo apt-get update
sudo apt-get upgrade

Then you can install Nginx using apt-get:

sudo apt-get install nginx

Once installation is completed, start the server by running:

sudo service nginx start

If you didn’t have to figure out the local IP of your Raspberry Pi in the previous step, it’s time to find out by running ifconfig. The output for your ethernet adaptor will be under eth0, and with its local IP address labeled inet addr.

Once you know the IP address, you can point your computer’s browser at it, where you should see the default “Welcome to Nginx” message.

Open to the Web: Port Forwarding

You can skip this step if you are not planning to access your Raspberry Pi from outside your local network. But for those wanting to access their server from other locations, let’s make sure that’s possible.

In a typical home network, devices connected to the router are invisible to the outside world. Only your router can be reached from outside, using your network’s external IP address. Your router is responsible for determining which incoming traffic is allowed into the network, and which device it should be sent to.

When a device on the local network initiates a connection (for example, when you open a website on your browser), the router recognizes the incoming response traffic as being part of this connection, and allows it through. However, if the router receives incoming traffic that is not part of an open connection (for example, when an outside device attempts to initiate a connection with an inside device), it will block the incoming traffic from crossing into the network. This is an important security feature to protect the network!

So how can you connect to your Pi from outside? The answer is port forwarding. The router must be configured to allow incoming connections on specific ports to pass through, and be sent to the correct device. By the default, the HTTP protocol uses port 80, and SSH uses port 22, so these are the two ports that you need to open on your router in order to access your web application, and allow secure connections for managing your server.

The steps to configure your router to open and forward the ports may vary depending on your internet provider and the brand of your router, but in any case, you should be able to accomplish it through the advanced configuration options of your router’s admin page. Just look for an option with a name like “Forwarding,” “Port Forwarding,” or “Network Address Translation.”

You need to open a port for HTTP connections, and another one for SSH. The basic idea consists of forwarding data addressed to these two external ports to your Raspberry Pi, with web traffic going to port 80 where Nginx is listening, and SSH traffic going to port 22, where the SSH server accepts connections from external computers. Here’s an example of how this might look in your router’s configuration page:

Port forwarding configuration if your Raspberry Pi's internal IP address is 192.168.1.16. All incoming traffic bound for ports 80 or 22 are forwarded to this internal address.

You can determine your router’s external IP address by simply typing “what’s my ip address” into Google. If you then move outside your router’s network, you can test that port forwarding is working by opening an SSH connection with ssh pi@{external IP address}. Likewise, HTTP port forwarding can be tested by entering the external IP address into your browser’s address bar. Just keep in mind that port forwarding allows anyone from outside to access the device on these ports if they know your router’s external IP.

If you don’t have a static IP, then you can set up dynamic DNS. It’s a very simple and easy step. You can set up dynamic DNS from your router or you can configure your Raspberry Pi for it. I’m not going to cover how to configure DDNS here, but BitPi.co has a good tutorial on the subject if needed.

sudo apt-get install ddclient libjson-any-perl

cd ~
wget http://downloads.sourceforge.net/project/ddclient/ddclient/ddclient-3.8.3.tar.bz2
tar -jxvf ddclient-3.8.3.tar.bz2
sudo cp -f ddclient-3.8.3/ddclient /usr/sbin/ddclient

sudo mv /etc/ddclient.conf /etc/ddclient
sudo nano /etc/ddclient/ddclient.conf

##
## CloudFlare (cloudflare.com)
##

# How often to check for IP change in seconds
daemon=1800

# Cloudflare protocol added to ddclient (3.8.3)
protocol=cloudflare

# Tell ddclient how to get your ip address
use=web, web=ip.changeip.com

# Credentials for Cloudflare API
server=www.cloudflare.com
ssl=yes
login=*bitpico@gmail.com*
password=*d7b75cd67e8f9c5x975307c5f32762287c19c*
zone=*bitpi.co*

# Domain to update
*pi.bitpi.co*

sudo ddclient -daemon=0 -debug -verbose -noquiet -force

Install the Framework: Full-stack JavaScript

You can run most web frameworks on top of Nginx, but let’s see how to go full-stack with JavaScript. To do this, you need to install Node.js and MongoDB.

Nowadays, Node.js is easily installed onto a Raspberry Pi with:

sudo apt-get install nodejs

Once it finishes installing, you can check if it’s working by running node -v.

Now you can install MongoDB just by typing:

sudo apt-get install mongodb

Just be aware that if you ever need to turn off the Raspberry Pi, you need to shut down the service first in order to avoid database corruption:

sudo service mongodb stop

Deploy Your App

You can develop on your local machine, and then push your changes to a Git repository on BitBucket. Since Raspbian comes with Git pre-installed, you can then pull your latest application code onto the device and run it.

Scaffold the Project

First let’s set up some application code and push it to a Git repository. There are many ways of starting an application, but one of my favorites is generator-angular-fullstack, which scaffolds both server and client code.

Install generator-angular-fullstack on your computer:

npm install -g generator-angular-fullstack

Create a new directory for your application:

mkdir my-app
cd my-app

And scaffold the application:

yo angular-fullstack my-app

Create the Repository and Push the Code

Now create a repository in BitBucket, as described here.

Then set up your local directory:

git init
git remote add origin git@bitbucket.org:USER/REPO.git

So you can commit and push the code:

git add .
git commit -m 'Initial commit'
git push -u origin master

The generator comes with the grunt-build-control plugin, which allows you to commit the build code to a specific branch in your repository. Just add the configuration for BitBucket to Gruntfile.js in your application’s root directory:

buildcontrol: {
   options: {
      dir: 'dist',
      commit: true,
      push: true,
      connectCommits: false,
      message: 'Built %sourceName% from commit %sourceCommit% on branch %sourceBranch%'
   },
   bitbucket: {
      options: {
         remote: 'git@bitbucket.org:USER/REPO.git',
         branch: 'build'
      }
   }
},
// ...

Now run:

grunt build

…to create the distribution folder, followed by this:

grunt buildcontrol:bitbucket

…to commit and push the code to the build branch in your repository.

Generate the SSH Key

You now have your code hosted. Before you can deploy it to your Raspberry Pi, you need to generate an SSH key for the Raspberry Pi and add it to your BitBucket account. We’ll run through this step quickly, but if you have any trouble, please follow the BitBucket guide. So, log back into your Raspberry Pi terminal, and generate the public/private key pair:

ssh-keygen

Then, start the agent:

ssh-agent /bin/bash

And add the key to the agent:

ssh-add /home/pi/.ssh/id_rsa

Now you just need to output the content of the public key:

cat /home/pi/.ssh/id_rsa.pub

…so you can copy and paste it into BitBucket.

In BitBucket, click on your profile picture and go to Manage account. Under SECURITY, find SSH keys, and click the button Add key.

Clone the Repository

There isn’t a convention for where to place the code of your apps, but you can create a /var/www directory and put all your projects there.

cd /var
sudo mkdir www

To avoid the use of sudo when you want to place files in the webroot, you can change the owner to your Pi user, and the group to www-data, which is used by Nginx:

sudo chown -R pi:www-data www
cd www

Now, you can clone the build branch of your repository and install the dependencies:

git clone git@bitbucket.org:USER/REPO.git --branch build --single-branch
cd REPO
npm install --production

Once it’s finished, you can start your app, setting the environment to production:

export NODE_ENV=production; node server/app.js &

Now, point your computer browser to the device IP address to check if it works.

Wish you had a dev server you could call your own? You can, with a #RaspberryPi.

Configure Nginx Reverse Proxy

There is one more step remaining to make your application accessible from the outside. Although Nginx is listening on port 80, where it will receive HTTP requests for your Pi, the Node application itself is listening on a different port (for example, port 8080). Therefore, you need to configure Nginx to act as a reverse proxy, recognizing requests intended for your application, and passing them to Node.

Nginx keeps the configuration file for each application it serves in the sites-available folder:

cd /etc/nginx/sites-available/

Here, you can copy the default configuration file and edit at your convenience:

sudo cp default my-app
sudo nano my-app

The final configuration file should look like this, with Nginx acting as a proxy to the Node.js server:

server {
   listen 80;
   root /var/www/my-app/;                  # identifies the location of the application you are configuring
   server_name my-app.dev;                 # identifies the hostname used by this application's traffic
   location / {
      proxy_pass http://localhost:8080/;   # configures the back-end destination for this traffic
   }
}

In order to enable this configuration, you need to create a symlink in the sites-enabled folder, where Nginx looks for active configurations during runtime:

sudo ln -s /etc/nginx/sites-available/my-app /etc/nginx/sites-enabled/my-app

And reload the service to activate these changes:

sudo service nginx reload

At this point, your application is ready to receive HTTP traffic intended for the my-app.dev domain (thanks to the server_name my-app.dev directive you configured above). The final issue you need to solve is how to make traffic you send from outside match this domain name. Although you could buy a domain name and point it to your IP, the hosts file comes to the rescue and makes that unnecessary.

On the workstation from which you will access the site, simply add your router’s external IP address, and match it with the host name my-app.dev. Any HTTP traffic you generate for my-app.dev will then be sent directly to your router, with the correct host name in the Host HTTP header.

On Windows, with administrator privileges, you can edit the file located in c:\windows\system32\drivers\etc\hosts with the notepad. On Linux and Mac you can use the terminal with sudo nano /etc/hosts and sudo nano /private/etc/hosts respectively.

##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting. Do not change this entry.
##
127.0.0.1       localhost
255.255.255.255 broadcasthost
::1             localhost

212.124.126.242 my-app.dev    # add your host name to the list

What’s Next?

Now that everything is set up, you can deploy as many applications as you want to your Raspberry Pi, and install forever or pm2 to keep your Node.js servers alive.

And just remember that if something goes wrong, you can just wipe the SD card and start again from scratch!