Your React App Online in 15 Minutes? A Practical Guide to Deploying on Netlify
You’re sitting in front of your screen, smiling. Your new React app works perfectly, every component is in its place, and the logic runs flawlessly… on your local machine. And then the question arises: “What’s next?” How do you show it to the world, a potential employer, or a client in a simple and, most importantly, free way?
For many people at the beginning of their journey, the deployment process sounds like black magic. It’s associated with complex server configurations, terminal commands, and stress. Today, I want to show you that this is a myth.
I’m going to show you a method I regularly use for smaller projects myself. A method that turns that fear into satisfaction in less than fifteen minutes. We will deploy your React app (built with Vite) on the Netlify platform, which will do all the heavy lifting for us.
The Philosophy: Why Netlify + GitHub is the Perfect Duo
Before we start clicking, I want you to understand the magic behind this. Netlify, connected to your GitHub account, creates something called Continuous Deployment.
Imagine you have a robot assistant. Your only job is to write code and save it to GitHub. Every time you do that, your robot automatically fetches the code, builds a ready-to-use application from it, and publishes it on the internet. Without your intervention. Sound good? That’s exactly what we’re going to do.
Workshop: Your App Online in 5 Simple Steps
Get your GitHub repository ready. Let’s begin!
Step 1: Log in to Netlify via GitHub
Go to the Netlify website and choose the option to sign up/log in with GitHub. This is the easiest way because it immediately authorizes access to your projects.
Step 2: Create a “Place” for Our Site
In the main Netlify dashboard, find the big “Add new project”. This is where our adventure begins.
Step 3: Point to Our “Treasure” – The Code Repository
Netlify will ask you to choose a Git provider—we’ll click on GitHub, of course. You’ll then see a list of your repositories. Select the one where your React application is located.
Step 4: Tell Netlify How to Build Our App
This is a crucial but very simple step. Netlify needs to know which commands to use. For a standard application created with Vite, the settings are as follows:
Build command:
npm run build(oryarn build)Publish directory:
dist
That’s it. You just tell it how to build the project and where the finished version is located.
Step 5: Click “Deploy” and the Magic Happens!
After setting the commands, you click the “Deploy site” button. At this moment, Netlify fetches your code, starts the build process, and after a minute or two, your site is online at a randomly generated address.
Congratulations, you’ve just shown your project to the world!
The Result: More Than Just a Website Online
The most important benefit isn’t just publishing the site. It’s implementing an automated process. From now on, forget about manually uploading files to a server. Your only job is to write great code and push it to GitHub (git push). Your new, free assistant—Netlify—will take care of the rest. Every change in your code will automatically appear in the published version.
I believe the tools we use should simplify our work, not complicate it. The deployment process is no longer a barrier, but a satisfying culmination of your efforts.
Have you successfully published your first application but want to take the next step? Or is the deployment process in your larger project complicated and you want to optimize it?
Contact me. I’d be happy to help you take your projects and processes to the next, more automated level.
