How to deploy a React application on Patr

Deploying a react app might seem like a tedious process at the start right? But trust us, it’s really not. All you need is a couple of minutes! Too good to be true?

Don’t worry Patr makes this possible for you.

So let’s find out how you can deploy a React app on Patr.

1. Create a react app

To deploy a React app, you need to have one ready or you can start building one first. In case you already have your app ready, you can skip to the third step. If not, don’t fret, we’ve got you covered!

Open your command prompt and execute this command to create an app.

npx create-react-app my-app

2. Alter your react app

Now that you have your React app ready, you can modify the content of your app according to your requirements. For the sake of this tutorial, we will move ahead with the default react app that we created.

3. Run your App

Once you’re done creating the app, open your project in VS Code and head over to the terminal. Run your app with the below command to ensure everything’s running smoothly before we deploy it.

npm start

4. Build your App

Now it’s time to get your app out there into the world and create a production-ready build of the app. Run the command in your terminal.

npm run build

5. Setup your Patr account

Since we’re using Patr to deploy the application, you need to first set up your Patr account, if don’t have one yet. Head onto app.patr.cloud, and sign up. In case you’re already a Patron (one of our users) login into your account.

6. Deploy your App

You’ve finally reached the last and most important step now.

Having already run the build command earlier, a build folder will be created in your application. So all you’ve to do is upload this folder!

i. Now that you’ve signed in to Patr, select the Static Sites section.

ii. Click on add new static site

iii. Assign a name to your static site and then drag and drop the build folder you just created and click on upload.

After this step, Patr will set everything up for you and your site will be live. And there you go, your React app has been deployed!

With such an easy deployment process, you can focus more on what you’re building rather than getting caught up in a complicated and cumbersome setup.