Need Advice on React App, Contact Form

Hi All,

New to React and Node, and this is my first post to Dev.to, but I think I need some advice on deployment / connecting to back-end logic / security.

I just built my first 'production' site with Create React App, a portfolio site, and it is currently deployed to a Digital Ocean VPS running an Apache server. (I am coming from working mostly with WordPress and I use Linux full time, so I was pretty comfortable setting that all up.) To deploy, I just ssh'd the ./build/ directory to the /var/www/html/ directory on my VPS and it works.

I still need to tweak some things and styles, but the static front-end of the site is currently live here:
https://ronholt.info

So right now it's just a static site. I need to make the Contact form functional next, and I know there are a thousand different ways to do this, but I just need something simple. However, this is leading me down a rabbit hole of analysis paralysis. There are a couple of big questions I have:

1. I chose to set up an Apache server just because I'm familiar with it, but is it more common / recommended to simply use 'npm serve' or Express or other Node-based framework to serve the site?
2. What's the best way to handle sending simple email notifications? I'm looking at using Nodemailer
3. Regardless of the solution, I'm going to need to store SMTP credentials somewhere. I know it's obviously dumb to hard code them into a front-end script, but I'm wondering where to write the method to actually send the email, even with, say, an imported secrets file. Will that be exposed when I compile the build package?

Possible solutions I'm thinking about:

-Set up a separate Node app with an Express API endpoint that my front-end React app submits a POST request to

-Switch to a Node-based server on the VPS.
--If I do this, will it automatically serve only the necessary public files while leaving access to the back-end method / credentials?
--Or, will it expose my credentials in the build and I will still need to set up a separate app / API for back-end methods like that.

I'm sure this is obvious to somebody more experienced with this, but I'm just having a hard time wrapping my brain around where the line is drawn between the React front-end and the Node back-end.

Any help would be appreciated!

Comments

[Guido Vizoso]

Hi Ron!
Don't worry about overthinking this. You're new to this tech stack and you're already rocking it!

If your site is gonna remain static I suggest to not complicate things. You can use a third party provider like Sendgrid or set up an email sending function in a serverless way.
This allows you to host your site in Vercel's Now, Netlify, Github pages, etc (most of them have really easy integrations with serverless functions) and you can declare environment variables without any hassle.

I hope I haven't deviated much regarding what you already made but this would avoid setting up a server just to send emails.

Let me know if that suits you!

[Ron Holt]

Thanks for the reply!

I did look into GitHub Pages and similar solutions. I have used SendGrid and other transactional email APIs in the past.

Part of it was I actually wanted the learning experience of setting up / administering my own server on a Digital Ocean droplet, and I figured I'd do my learning on my own site rather than a client's. I've been using Linux full-time for awhile now, and my ultimate goal is to be somewhat of a full-stack developer. (I also have a few unrelated Bash / Python scripts that I am currently running on the same machine)

Since it's already up and running and most of the work is behind me, I would ideally like to just run the email script locally on my VPS rather than adding in another 3rd party service. I've done this before with PHP, but with PHP (assuming best practices are followed) I never had the worry of my server-side script being served to the browser.

So assuming I'm going to do this the hard way, what would you recommend? Set up a separate simple Express API? Or is there a way to communicate with the back end in the same Create React App app (without exposing any credentials)?

[Guido Vizoso]

Somehow in my mind I thought you have a Next project (that's why I was so thoughtful about the static part of it). If you're using create-react-app you can make a mini Express server that only sends the email. CRA can read environment variables by default (create-react-app.dev/docs/adding-c...)

[Ron Holt]

Thanks again, I'll look into that!