Netlify is a cloud-based platform designed to simplify the deployment and management of modern web applications. It’s especially popular among developers who build static websites or use frameworks like React, Vue.js, Angular, or tools like Gatsby and Next.js.

Benefits of Netlify

• Ease of Use: It’s beginner-friendly, with a simple UI for deploying and managing projects.
• Free Tier: Generous free plan for small to medium projects.
• Continuous Deployment: Connects directly to Git repositories (GitHub, GitLab, Bitbucket). Automatically deploys updates whenever you push changes to your repository.

Build your React App

Once you are ready to deploy your react app you need to build the production verion of your app. A browser does not understand jsx syntax so you will use vite to transpile your application into plain javascript. To build your application run:

$ npm run build

This will generate a dist folder with your production code. This code is not designed to be human readable. Instead it is designed be optimized to run in the browser.

Important: Do not check in your dist folder to your git repository. This folder should be in your .gitignore This folder is generated by the build command and should be generated fresh every time your code changes.

Deploy with Drag and Drop

First make sure you have created a netlify account. If you do not create an account your projects will be deleted after 1 hour.

Once you have an account, go to https://netlify.com/drop. You can drag and drop your dist folder into the drop area (You cannot drag from vs code. Open the files in your file explorer. You also must drag the whole dist folder not just the files in the folder).

Netlify will automatically create a project for you with a url for accessing your app. Once the deploy is complete, click on Site Overview from the side menu. You will see the url for your newly created site.

Optional: change site name

• Click on “Site Configuration” from the side menu.
• Click the “Change site name” button.
• A good pattern for naming your projects is “[GIT_REPO_NAME]-[FIRST-INITIAL][LAST-NAME]”

Optional: Deploy from GitHub

Drag and drop is the easiest way to deploy your app. However, you can configure your project to deploy from GitHub. The benefit of this is anytime new code is pushed to your GitHub repository, Netlify will automatically deploy the new code.

The downside is netlify will use “build minutes” to build and deploy your app. The free tier only comes with a certain number of build minutes so you may not want to deploy everytime you push code to your repository.

For instruction on deploying from git see this blog post.

Optional: Redeploy

If you need to redeploy, click on Deploys from the side menu. There should be a place to drag and drop your new files to update your site.