Auto-Deploy React Apps With Render
Tags: react, javascript, webdev, programming
Published: 2024-03-06 09:39:39

This tutorial assumes you have basic knowledge of React.js

Like Heroku, and other cloud hosting platforms, [Render](https://render.com/) is a cloud application hosting platform for developers to deploy static sites and dynamic applications. It also offers a fully managed hosted database with internal and external connectivity. This makes it useful for both frontend and backend developers alike.

This is going to be a quick walkthrough on how to deploy a React or Vue.js applications to Render and set up automatic deployment.

##Getting Started
Requirements:

- Node.js set up
- [Github](https://github.com/) account
- [Render](https://render.com/) account
To get started, make sure you have [Node.js](https://nodejs.org/en/) and NPM set up properly on your local machine as this tutorial assumes. We’ll deploy a basic React application, however, I’ll assume you already have one created and want to deploy it.

To create a new React application, first, we install npx globally:

```
npm i -g npx
```
Next, I’ll create a new react application:

```
npx create-react-app myapp
```
This creates a new application and installs all the necessary packages.


![New application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hqz2f8ofbc788i0kvjsg.png)

If you change directory into the newly created react application (myapp), starting the server with yarn start should serve the application on port `3000`.


![Application serve](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oig5b5w70saatd2kgvrp.png)

Next, We’ll generate a production build of our React application. Production builds are optimized static HTML, CSS, and Javascript files. These files can be deployed on any static hosting service provider.

To generate a production build run the yarn build command:

![Yarn build](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zhix9jdo9uvtyf1w8ie6.png)


```
yarn build
```
Once that’s done, a new folder called “build” would be generated, this folder contains all the static files we would eventually deploy to any static host provider.


![Deploy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i471agizajwgwcpg5v3i.png)

From here on, you can decide to create a zip of the build folder, copy and extract it on a static host provider using FTP, but this process is mostly hectic and repetitive. To resolve this, we’ll deploy to Render and enable auto deployment with Github.

We’ll need to push the source code to Github. Create a GitHub repository and set the repository URL as your origin for your react project.

![New repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jvsvvlm59lfwvhmtb6w4.png)

Once the repository has been created, set the repository as your remote origin. In your terminal within your project root:

```
git remote add origin https://github.com/MartinsOnuoha/myapp.git
```

make a commit and push to master branch.

```
git add . && git commit -m “initial commit” && git push origin master
```

---

##Deploying to Render
You can create a Render account using Github login if you do not already have one.

![Sign in](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iigunzjrbnrc71rqglcj.png)

Once you’ve created an account, at the top right, click on “New” and select “Static Site” from the drop-down.

![New static site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h3rgg9ncasrdcc0z4v4w.png)

Next, you’ll need to select the repository you just pushed the react app to.

![Select repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5c14snhov90suh9ihs2c.png)

You will be authenticated and redirected back to Render with your selected repository on the list. Click on the repository.

![Click repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/itrgmz1mkwu8exbikrky.png)

This will take you to the setup page where you’d be required to enter a project name, select the deployment branch and write the build command. Let’s go through some of the fields.

![Setup page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cd8vg7pmxe9gx7zt8i5c.png)

- **Name:** This can be anything you want, it’s the name of your static site. Render uses this to generate a unique URL.
- **Branch:** The deployment branch. This is the branch Render watches for changes on before running the build command again (automatically).
- **Build Command:** is the command Render should run to install dependencies and generate static files.
- **Publish Directory:** The directory containing the static files generated by the build command.
Once that’s all set up, you can click the “Advanced” tab and confirm that “Auto Deploy” is set to “Yes”, this should be the default value.a

![Auto deploy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fatm5it5nrty4sjrn0f8.png)

Click the “Create” button at the bottom. Render will now attempt to generate your React Site given all the parameters. After a couple of seconds, depending on your internet connection, you should see that your site is live.

![Live site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rnvssiy1iy7d26j9xvwc.png)

You can visit the URL right below your App name to view your site.

![React app with Render](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6hzphwxjbxui10yv2zj6.png)

Hopefully, this gives you a basic understanding of how to deploy react applications on Render.

---
Cheers ☕️

---