CODEWITHSUNDEEP
reactjsgitgithubweb-deploymentgithub-pages
Richard Jones
Richard Jones

Reputation: 55

Understanding React deployment - what exactly is going on in the "Deploying a React App to Github Pages" tutorial?

Background: UI/UX designer with very little hands on webdev experience trying to learn more and get hands on with the entire end-to-end pipeline. I am looking for answers that strengthen my 'mental model' understandin of the React pipeline.

Having followed the React gh-pages deploy tutorial (https://github.com/gitname/react-gh-pages) I want to fully understand what exactly is going on, and how I would proceed from here in a real use case

I have successfully used create-react-app to create a standard React app and followed the tutorial linked above to make my first ever github commit and then use npm run deploy to publish the page to github pages, which I can access in a browser and see my page working as intended.

I only vaguely understand what I have done though and need assistance understanding the intended git workflow here.

Firstly, after successfully publishing my app, what is the intended workflow for future updates? Lets say I go back into my local editor and make some changes to my app, am I supposed to run npm run deploy again each time?

Secondly, being new to git and github, I performed a number of git related actions during the above tutorial. What exactly did they do, and which of these actions - if any - do I need to repeat for future deployments?

Finally, having chosen to work in VScode on windows, how do I reconcile all these actions I'm running in a cmd prompt with the version/git management in VScode? Is it possible to deploy everything from there? What significance does pushing from VScode have compared to what the tutorial had me do in the cmd line?

I find a lot of what I'm trying to learn seems to be very much taken for granted by most resource authors so it's difficult to find accessible information so that I can establish a strong mental model of these fundamentals.

Upvotes: 3

Views: 117

Answers (1)

SiddAjmera
SiddAjmera

Reputation: 39472

Answer 1 - Yes. You're supposed to run npm run deploy again each time. You could automate this process though by having a CICD Pipeline in place. That way, as soon as your code gets merged, a deployment would be triggered. This would prevent you from running the deploy command manually every single time.

Answer 2 - You might want to read through this to understand what Git is all about:Getting Started - What is Git?

This graph would basically help you understand what those commands do:

enter image description here

  • git add file-name(s) adds files to staging areas.
  • git commit commits those files to your repository.

Long story short, you will have to run these commands each and every single time you have to perform these operations. But again, reading through the article and understand more about Git would help you better understand the rationale behind doing all of it.

Answer 3 - Yes, it is possible to deploy everything from there. Whatever you're doing from VSCode is internally running those commands so that it's easier for you to perform those actions.

I think the reason why you're feeling what you mentioned in the last statement was that you jumped right into implementation without actually understanding what Git is and how it works. So for things to make more sense, you probably might want to get a better understand of Git first. A simple Google Search on Git Basics would show you the right direction.

If you're still confused, you can start by watching these videos.

Hope this helps :)

Upvotes: 1

Related Questions