In this tutorial, we’ll take a React app we previously created and deploy it to Netlify including the back end Node.js service which we’ll convert to a Netlify function.

How To Deploy React Apps To Netlify (with Functions)

• 00:00 Introduction
• 00:44 Overview
• 01:49 Converting the back-end service
• 02:29 Creating the Netlify Function
• 06:38 Running Netlify Functions locally
• 08:44 Configuring React to use the Netlify Function
• 12:20 Deploy React app to Netlify
• 15:48 Conclusion

So in a previous tutorial, we created a Recipe search app (https://morioh.com/p/9205a3a5d7a0) that had a backend service to proxy requests to a 3rd party API. This is fine when running locally but how do you publish this kind of app (that has a backend) to a live site?

You can easily publish a React app to GitHub pages (https://morioh.com/p/4b95536384e0) but this will only handle the static, front-end content so we’ll use the Netlify functions feature to rewrite our backend service.

In the tutorial we’ll take a previous project and convert the back end Node.js service to a Netlify function using the netlify-lambda package and then link this to our React app using a proxy service.

Once we’ve got our app up and running locally again, we’ll publish the app to Netlify to make it live.

#react #netlify