[Implementing checkout with React.js] Part 2: Deploying React App on Netlify
We will be deploying a React.js application on netlify. This is the second article of a tutorial series on Integrating payment into a react app. If you haven't check out the first part, check it out here.
Netlify is a cloud computing company that offers hosting and serverless backend services for web applications and static websites.
Link: https://www.netlify.com/.
There are so many ways to deploy your react app on netlify but I will be using the simplest method which is Drag and Drop. Keep in mind you can also use Git or the Netlify CLI.
First, create an account on netlify from their signup page.
We will drop the build folder of our project under the sites tab of the dashboard (https://app.netlify.com/teams/username/sites).
Next, run the following command on the root folder of our project to build our project
yarn run buildWhen the build is complete, a build folder will be created in our root directory. Drag this folder and drop on your netlify dashboard. I always visit the domain settings to change the name to a more personified name.
Finally, click on the site URL in green to load your deployed application.
There is one important thing we are missing. When testing out the site (as seen in the image below), noticed the app crashes when the page is reloaded.
This error is due to the fact that react-router is used in the project. To solve this, create a file _redirects in your public directory and add the following code to it. Then rebuild and deploy
/* /index.html 200NB: Every time you make changes in your application, you have to run the build command, then go your dashboard and select the project you deployed.
Then click on the deploy tab, drag and drop the build folder on your dashboard again.
That's it for deploying your React.js app on netlify, Next would be integrating PayPal during checkout. Hope you enjoyed the read.