🔧 From Local to Live: How to Deploy Your React Application using Netlify.

🕛 Zeit seit Veröffentlichung: 61 Tage, 4 Stunden 2 Minuten
📆 Veröffentlicht am: 14.10.2024 um 19:01 Uhr
Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to

You've spent hours perfecting your React app, and now it's time to share it with the world. Building a React app is one thing, but getting it live? That's the magic moment✨. Fortunately, with Netlify, taking your project from your laptop to the world is a breeze. Whether you're a seasoned developer or new to deployment this guide will walk you through every step of launching your React app—no headaches, just results. Ready to make your app live in minutes? Let’s make it happen!

There are several ways to deploy on Netlify but in this guide we'll be looking at two methods- Deploy with Git and Drag and Drop.

Step 1: Preparing your React App.

Before deploying, you need to ensure your React app is ready for production. You'll want to:

1. Run a Final Test: Make sure your app works as expected locally by running:
npm run dev
If it was created with Vite.
npm run start
If it was created with Create-React-App.

I recommend creating with Vite.

This command launches your app in development mode. Open http://localhost:5173 or http://localhost:3000 in your browser to see how it performs.

2. Build for production: To get your app ready for the web, create a production build:
npm run build

This will bundle your app into optimized static files in a build / dist folder, ready for deployment.

Do well to make sure your project is on github.

Step 2: Setting up Netlify

1. Sign Up for Netlify: Head over to Netlify's website and sign up for a free account if you don’t have one already. You can use your GitHub or GitLab account to sign up.

2. Create a New Site: Once logged in, click on the "Add New site" button.

Deploy with Git.

To deploy with your Git click on "Import an existing project"

Step 1: Connecting Your Git Repository

1. Choose Your Git Provider: Select your Git provider (GitHub, GitLab, or Bitbucket) where your project is hosted.

2. Authorize Netlify: Netlify will ask for permission to access your repository. Authorize it, and you’ll be redirected back to the dashboard.

3. Select Your Repository: Choose the repository that contains your React app project. Netlify will scan your project and automatically detect that it’s a React app.

Step 2: Configuring Your Build Settings

1. Set Build Command and Publish Directory: In the build settings, Netlify typically fills in the correct fields for you:

• Build Command: npm run build
• Publish Directory: build/ or dist/

If these fields aren’t filled, simply enter the commands above. These settings will ensure Netlify builds and deploys your app properly.

2. Deploy Site: Click on “Deploy site”, and Netlify will start building and deploying your React app.

Step 3: Your Site is Live!

Once the deployment process finishes, Netlify will provide you with a live URL for your React app project. You can click on the link to view your live site.

• Custom Domain: If you’d like, you can also change your site name to a custom domain through Netlify. Click on "Site Configuration"

Scroll down a bit further till you see "Change site name" click that and edit your site name to any of your choice as long as it's available.

One of the best features of Netlify is continuous deployment. Anytime you push a change to your Git repository, Netlify will automatically rebuild and redeploy your app. This keeps your site up to date with the latest version of your app.

Deploy using Drag and Drop.

To deploy using drag and drop click on "Deploy Manually"

Drag your dist or build folder and drop it in the circle or you can browse to upload the folder.

After dropping, clicking on "Open Production Deploy" takes you to your live link.

To enable continuous deployment after using Deploy manually you need to navigate to deploy settings to link your repository.

Click on "Link repository" and follow the steps.

Bonus Feature.

Redirects and Rewrites: Ever deployed your react app on Netlify and when you try navigating to a page that exists on your local host you get a 404 error?

Netlify allows you to easily set up redirects and rewrite rules using a simple _redirects file in your project.

In your editor(VsCode) add a _redirects file in your public folder and add this in it.

/* /index.html 200

This solves the issue.

Conclusion🎉.

Deploying your React app doesn’t have to be complicated, especially with a platform like Netlify. With just a few steps, your app is live and accessible to the world, and with continuous deployment, future updates are a breeze. Now that you’ve gone from local to live, you can focus on what matters most—building great features for your users!

Happy Coding!🚀

...