Skip to main content

Deploying to Netlify (Part 2) #157

📖 Introduction​

In Deploying to Netlify (Part 1), we successfully deployed our React application to Netlify by connecting a Git repository, establishing a continuous deployment workflow. This second part explores further customization and powerful features Netlify offers, including adding custom domains, managing environment variables for different deploy contexts, understanding deploy previews, branch deploys, and briefly introducing the Netlify CLI.

📚 Prerequisites​

Before we begin, you should have:

  • Completed Part 1: Your React app is deploying to a *.netlify.app subdomain via Git.
  • A Netlify account and your site set up on Netlify.
  • (Optional for custom domains) A custom domain name purchased from a domain registrar.

🎯 Article Outline: What You'll Master​

In this article, you will learn:

  • ✅ Adding a Custom Domain: Pointing your own domain to your Netlify site.
  • ✅ Managing Environment Variables in Netlify UI: For different branches and deploy contexts (production, deploy previews, branch deploys).
  • ✅ Deploy Previews: Automatically generated previews for pull/merge requests.
  • ✅ Branch Deploys: Deploying specific Git branches to unique URLs.
  • ✅ Netlify CLI (Brief Introduction): For manual deploys and local development.
  • ✅ Rollbacks and Deploy History.

🧠 Section 1: Adding a Custom Domain​

While Netlify provides a netlify.app subdomain (e.g., your-site-name.netlify.app), you'll likely want to use your own custom domain for a production application (e.g., www.yourdomain.com).

Steps to Add a Custom Domain:

  1. Navigate to Site Settings: In your Netlify dashboard, go to your site, then "Site settings" (or it might be under a "Domain management" or similar section).
  2. Add Custom Domain: Look for an option like "Add custom domain" or "Domain management". Netlify - Add Custom Domain
  3. Enter Your Domain: Type in the custom domain you own (e.g., yourdomain.com). Netlify will verify you own it or guide you. If you want www.yourdomain.com as primary, you might enter that.
  4. Configure DNS Records: Netlify will provide you with DNS (Domain Name System) records that you need to configure with your domain registrar (where you bought your domain, e.g., GoDaddy, Namecheap, Google Domains).
    • For a root domain (e.g., yourdomain.com): You'll typically add an A record pointing to Netlify's load balancer IP address.
    • For a subdomain (e.g., www.yourdomain.com or app.yourdomain.com): You'll typically add a CNAME record pointing to your Netlify site's subdomain (e.g., your-site-name.netlify.app).
    • Netlify usually recommends using their Netlify DNS for easier management if you transfer your domain's nameservers to them, but using external DNS with A/CNAME records is also common. Netlify - DNS Configuration
  5. Wait for DNS Propagation: DNS changes can take some time to propagate across the internet (from a few minutes to, rarely, 24-48 hours).
  6. HTTPS/SSL: Once DNS is configured and propagated, Netlify will automatically attempt to provision a free SSL certificate from Let's Encrypt for your custom domain, enabling HTTPS. This is usually very fast.

Netlify's documentation provides detailed guides for configuring DNS with various popular registrars.

💻 Section 2: Managing Environment Variables in Netlify UI​

We discussed environment variables in Articles 154-155. Netlify provides a UI to manage these for your builds.

Location:

  • In your Netlify site dashboard: "Site settings" -> "Build & deploy" -> "Environment".

Capabilities:

  • Add Variables: You can add key-value pairs (e.g., REACT_APP_API_URL, your_production_api_url).
  • Scopes/Contexts: Netlify allows you to set environment variables for different deploy contexts:
    • Production: Variables used for builds from your main production branch.
    • Branch deploys: Variables specific to builds from other Git branches.
    • Deploy previews: Variables for builds generated for pull/merge requests.
    • This is powerful. For example, your REACT_APP_API_URL could point to https://api.prod.example.com for production, but https://api.staging.example.com for a staging branch deploy, and https://api.dev-pr-123.example.com for a deploy preview of pull request #123. Netlify - Environment Variable Scopes
  • Secure Storage: Values are stored securely.
  • Build Time Access: These variables are injected into the build environment when Netlify runs your build command (npm run build). Your React app (CRA, Vite) will then pick them up as described in previous articles.

Using Different Values per Context: When adding/editing an environment variable in the Netlify UI, you can often specify "Edit" or "Add value for different context" and select contexts like "Deploy Previews," specific branches, or "Production."

This means you can have a single REACT_APP_API_URL variable in your code, and Netlify will ensure it gets the correct value based on whether it's building for production, a deploy preview, or a specific branch.

🛠️ Section 3: Deploy Previews​

Deploy Previews are one of Netlify's most beloved features.

  • Automatic Previews for Pull/Merge Requests: When you open a pull request (or merge request on GitLab/Bitbucket) against your production branch, Netlify automatically:
    1. Builds that specific version of your site from the PR branch.
    2. Deploys it to a unique, shareable URL (e.g., deploy-preview-123--your-site-name.netlify.app).
    3. Posts a comment on the pull request with a link to this live preview.
  • Benefits:
    • Visual Review: Reviewers can see and interact with the actual changes live before merging.
    • Early Feedback: Catch UI bugs or integration issues early.
    • Collaboration: Easy for designers, PMs, and other stakeholders to see work in progress.
    • Isolated Environment: Each deploy preview is isolated and uses environment variables configured for the "Deploy previews" context (or inherits from production if not specified).

This feature significantly streamlines the review process.

🔬 Section 4: Branch Deploys​

Similar to deploy previews, Netlify can also build and deploy any Git branch you push.

  • Purpose: Useful for creating staging environments, testing specific features in isolation on a live URL, or having long-lived development branches accessible online.
  • URL Structure: Typically branch-name--your-site-name.netlify.app.
  • Configuration:
    • By default, Netlify might only auto-publish your production branch.
    • In "Site settings" -> "Build & deploy" -> "Branches" (or "Deploy contexts"), you can configure which branches to auto-publish or choose to deploy all branches.
  • Environment Variables: Branch deploys can have their own environment variable context, allowing a staging branch to use staging API keys, for example.

✨ Section 5: Netlify CLI (Brief Introduction)​

Netlify also offers a powerful Command Line Interface (CLI) tool.

Installation:

npm install -g netlify-cli

Common Uses:

  • netlify login: Authenticate with your Netlify account.
  • netlify link: Link your local project directory to an existing Netlify site.
  • netlify dev: Runs a local development server that mimics Netlify's environment. It can:
    • Run your project's dev command (e.g., npm start).
    • Inject local environment variables from Netlify (if linked).
    • Proxy Netlify Functions if you're using them.
    • Simulate redirects and other Netlify edge logic.
  • netlify deploy: Manually deploy your site.
    • netlify deploy: Creates a draft deploy.
    • netlify deploy --prod: Deploys to your main production site (use with caution, typically CI/CD from Git is preferred for production).
    • netlify deploy --dir=build (or --dir=dist): Specifies the directory to deploy if not auto-detected.
  • netlify env:list, netlify env:set KEY VALUE: Manage environment variables from the CLI.
  • And much more (functions, addons, etc.).

The Netlify CLI is great for local development that closely mirrors the Netlify environment, for manual deploys when needed, or for scripting deployment tasks.

🚀 Section 6: Rollbacks and Deploy History​

Netlify keeps a history of all your deploys (both successful and failed).

  • Location: In your Netlify site dashboard, under the "Deploys" tab.
  • Atomic Deploys: Each deploy is atomic. If a new build fails, your live site remains on the last successful deploy.
  • Instant Rollbacks: If you deploy a version with a bug, you can instantly roll back to any previous successful deploy with a single click.
    • Find the desired previous deploy in the list.
    • Click on it, and there's usually an option like "Publish deploy." Netlify - Rollback Deploy

This provides a strong safety net and allows for quick recovery from problematic deployments.

💡 Conclusion & Key Takeaways (Part 2)​

Netlify offers a rich set of features beyond basic Git-based deployment that significantly enhance the development and operational experience for React applications. Custom domains, fine-grained environment variable control, deploy previews, branch deploys, a powerful CLI, and easy rollbacks make it a top choice for many frontend developers.

Key Takeaways:

  • Custom domains can be easily configured for your Netlify site.
  • Netlify's UI allows setting environment variables for different deploy contexts (production, branches, previews).
  • Deploy Previews provide live, shareable versions of your site for pull requests, streamlining reviews.
  • Branch Deploys allow hosting specific Git branches at unique URLs.
  • The Netlify CLI offers local development utilities and manual deployment capabilities.
  • Atomic deploys and instant rollbacks provide deployment safety.

➡️ Next Steps​

We've now thoroughly explored deploying to Netlify. While Netlify is excellent, another very popular platform for deploying frontend applications (especially those built with Next.js, but also great for React SPAs) is Vercel. In the next article, "Deploying to Vercel (Part 1)", we'll look at how to deploy your React application using Vercel and compare some of its features.

Expanding your deployment options makes you a more versatile developer!

glossary​

  • Custom Domain: A domain name (e.g., www.yourcompany.com) that you own and point to your hosted application.
  • DNS (Domain Name System): The internet's system for mapping human-readable domain names to IP addresses.
  • A Record (DNS): Maps a domain name to an IP address.
  • CNAME Record (DNS): Maps a domain name (alias) to another canonical domain name.
  • Deploy Context (Netlify): Different situations in which Netlify builds your site (e.g., production, deploy preview, branch deploy), allowing for different configurations.
  • Deploy Preview (Netlify): An automatically built and deployed live preview of your site generated from a pull/merge request.
  • Branch Deploy (Netlify): A deployment of a specific Git branch to a unique URL.
  • Netlify CLI: A command-line interface tool for interacting with and managing your Netlify sites and deployments.
  • Atomic Deploy: A deployment method where the entire new version of a site is made live at once, or not at all if it fails, preventing partially updated states.

Further Reading​