Select Page

Hosting a React App on Raspberry Pi

This article assumes you’ve already got a Raspberry Pi set up and running the latest Raspberry Pi OS, and you’ll be hosting a React app locally (meaning it’s only accessible on your local network).

First you’ll want to enable SSH. There’s some fancy ways to do this in the terminal, but the easiest is to just enable it in the preferences.

Once you’ve got SSH enabled, there’s one little security doodad you’ll need to fix. You’ll want to open your Pi’s terminal and head over to your config file and edit it with nano: sudo nano /etc/ssh/sshd_config. You potentially won’t need to run this command with sudo, but when you do… you’ll most certainly feel more powerful.

Once you’re inside, you’ll want to be on the lookout for a line that reads:
#PermitRootLogin prohibit-password
Once you find that line, you’ll want to edit it so it reads like so:
#PermitRootLogin no
That’s it! You can close out of nano and save your changes.

Next, you’ll want to confirm which IP address your Pi is using on your local network. Do find this, just type hostname -I.

At this point, you’re pretty much home-free. Hop onto a different computer on your local network and open a terminal. I’m assuming you’ll be ssh-ing from another Mac or Linux machine. Go ahead and SSH into your pi with ssh [username]@[IPaddress] at which point, you’ll be prompted for the password on the Pi to log in. Enter the password and you’ll hit the /home directory of the Pi!

Now, you can just build out your React app like you would normally, in my case I just installed Node, ran npx create-react-app /some-project and off it went! Once your React app is set up, you can access it from any device on your network by going to the IP address of your Pi (the one that appeared when you ran hostname -I), then a colon with the port number, just like you would on localhost.

Happy hacking!

Check out more articles

Elevate Your Digital Presence with a Top Tampa Web Design Company

If you’re a business owner in Tampa, partnering with a professional web design company can make all the difference. In this article, we’ll explore the benefits of working with a Tampa web design company and how it can elevate your digital presence.

Create a Custom API Endpoint in WordPress

Creating a custom endpoint in WordPress to check for plugin updates involves several steps. This process includes setting up a custom REST API endpoint, creating a function to handle requests to this endpoint, and ensuring that the response contains the necessary...

Deploy WordPress Updates from a Private Repository

To push code to a private repository and trigger a pending WordPress update badge, you need to follow a systematic approach involving version control, continuous integration/deployment, and the appropriate use of WordPress hooks and filters. Here’s a step-by-step...

How to Generate a Ranger Config File

ranger --copy-config=all This will copy all the default config files from /usr/local/lib so you can make edits without messing anything up. Huge shout out to for explaining this and so much more. Took me a...

First Open Source Contribution

Surprise! I genuinely did not plan on making my first ever open source contribution today. In fact, I didn't plan on a lot of things happening this week at all. I recently got an awesome opportunity to work on a site that is being hosted on a platform called Pantheon,...

How to Exclude Specific Posts and Pages from WP_QUERY

For the sake of having something to work with, let's suppose we've got the following query:In this query, inside the $args array, there's a special parameter that allows you to exclude specific posts and pages from the query. This parameter is called post__not_in and...

Configure SSH For Password-less Connections

Preamble I'm slightly embarrassed to admit this, but it was a long time before I figured out how amazing this little file is and how exactly to put it to good use. The file I'm talking about is the SSH config file. By default, when you first connect to a server via...

WordPress Site Stuck in Maintenance Mode

Plugin Error Code 500 During Update While I was updating a WordPress plugin locally, something happened on my local server to trigger a 500 error code as the plugin was updating. On the frontend, I refreshed the page and was greeted with "Briefly Unavailable for...

Creating a WordPress Plugin Downloader

How it Started I was recently tasked with the challenge of creating a WordPress theme generator. The idea being, instead of writing your style.css file from scratch, you'd be able to just answer a few simple questions about how you'd like your theme set up, and those...

Fix Audio on XFCE Chromebook

The Problem After moving from GalliumOS to Xubuntu, I noticed that playing YouTube videos on both Firefox and Chromium would result in decent playback for a few minutes, but suddenly the audio would turn into a solid beeping tone while the YouTube video displayed the...

Looking for a place to host your next project or design?

Use this link to get your first 4 months of WP Engine for free: WP Engine – Plans (With 4 months free)