<p>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?</p>
<p>Don't worry Patr makes this possible for you.</p>
<p>So let's find out how you can deploy a React app on Patr.</p>
<h2><strong>1. Create a react app</strong></h2>
<p>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!</p>
<p>Open your command prompt and execute this command to create an app.</p>
<h2><strong>2. Alter your react app</strong></h2>
<p>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.</p>
<h2><strong>3. Run your App</strong></h2>
<p>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.</p>
<h2><strong>4. Build your App</strong></h2>
<p>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.</p>
<h2><strong>5. Setup your Patr account</strong></h2>
<p>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 <a href="https://app.patr.cloud/">app.patr.cloud</a>, and sign up. In case you're already a Patron (one of our users) login into your account.</p>
<p><img src="/static/images/blogs/blogs/common-images/sign-up.webp" alt=""></p>
<h2><strong>6. Deploy your App</strong></h2>
<p>You've finally reached the last and most important step now.</p>
<p>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!</p>
<p>i. Now that you've signed in to Patr, select the Static Sites section.</p>
<p><img src="/static/images/blogs/blogs/common-images/sidebar-static-site.webp" alt=""></p>
<p>ii. Click on add new static site.</p>
<p><img src="/static/images/blogs/blogs/how-to-deploy-react-application-on-patr/create-static-site.webp" alt=""></p>
<p>iii. Name your static site and drag and drop the build folder we just created and click on upload.</p>
<p><img src="/static/images/blogs/blogs/how-to-deploy-react-application-on-patr/fill-static-site-details.webp" alt=""></p>
<p>After this step, Patr will set everything up for you and your site will be live. And there you have it. Your react app has been deployed to the internet!</p>
<p>With such an easy deployment process, you can focus more on what you're building rather than getting caught up in some complicated and expensive setup.</p>


How to Deploy React Application on Patr

Patr takes care of everything,
so you can focus on what really matters.

How to Deploy React Application on Patr

Patr takes care of everything, so you can focus on what really matters.

Patr takes care of everything,
so you can focus on what really matters.