Search code examples
reactjsgithubworkflownetlify

How can I manage multiple versions of a React website?


I have a React website that I'm hosting on Netlify but I want to deploy it in three stages.

Currently, I have a GitHub repository for it but I just push my local codes to the repo using GitHub Dekstop and it just goes live directly.

I would like to divide it into stages where I can first test the updates before going live to 'production'.

Is there a way to:

  1. Push my local changes,
  2. Decide on GitHub whether to make it testing or live?

I have heard about GitHub Action workflows and GitHub pages but I don't want to deploy with GitHub Pages.

I have also tried with Git workflow and configured the node.js workflow. But I still don't understand that how to manage the multiples stages with it.

How can I resolve this issue?

Any help would be appreciated.


Solution

  • If I understand you correctly, you want to have at least two different Netlify deploys: one for testing and one for production. If so, you don't necessarily need a workflow.

    The easiest way to set that up is to use different branches. Try these:

    1. Ensure you have at least two separate branches on your repo e.g main for production and dev for development/testing

    2. All changes you make to your code should be pushed to the dev branch.

    3. Set up your test deploy on Netlify by choosing the repository but ensuring you choose the dev branch, as shown below.

    Netlify image

    1. This will now be the site that automatically shows any changes you push, instead of the site with the main branch for production.

    2. If you are satisfied with the updates, you can then make a PR on GitHub to push your updates in the dev branch to your main branch. After merging the request, your updates will then reflect in your production deploy.

    Hope that helps!✨