Home > Back-end >  Using a Raspberry Pi 4 to host react web app
Using a Raspberry Pi 4 to host react web app

Time:05-14

I have some broad questions on the flow of how to set up my web app on Raspberry Pi.

I've built a React App on my local PC, it hits up an node/express API the I've put together which in turn performs basic CRUD on my MYSQL database. I would like to make the whole thing accessible from anywhere across the internet using the Raspberry Pi. I've managed to transfer both the API and DB to the raspberry pi and it is working properly. I don't think the React front end will be an issue but I have these questions lingering in my mind:

  • What is the general architecture for something like this?

  • How would I go about exposing the front end so that it is available via the internet?

  • Will having them all on the same machine suffice in allowing them to communicate with each other when it is live?

  • Will I need another node app to serve the actual website?(already using one for the API)

  • What are the big security risks with something like this? It feels like it could be dangerous hosting something from my home network and making it available world wide, what should I watch out for?

CodePudding user response:

My first recommendation would be Docker, but I understand if you just want a server. I think the best way to go in this case would be to use something like Next.js to combine the API app and the React app and get server-side rendering as a bonus (so you don't even necessarily need API; you can call the server functions in your app using getServerSideProps). You could then use Nginx as a reverse proxy to expose the Next.js server. See here to learn how to set up Nginx on Raspberry Pi and here to learn how to set it up for Next.js.

If you don't want to use Next.js (having already built your app, or other reasons), it's worth noting that create-react-app or whatever else you're using probably generates static files to serve, in which case you can just set up Nginx and then copy the build folder to the Nginx static folder (see here). If you're only exposing the front-end then you don't need to do anything else to expose the express server, but if you do want to expose the express server, you can read more about that here (using express instead of HTTP).

If you're completely set on using the Raspberry Pi, then that's fine. If you do decide to use Next.js, or even just React, you could also host your site on Vercel or Netlify. You could use their serverless functions as API endpoints for your application (set up automatically with Next.js, otherwise read here for Vercel and here for Netlify).

  • Related