Using Github to deploy ReactJS app
ReactJS is a very popular front-end library to build user interfaces. And you might have developed a cool app using react but struggling to get it to the users. In this article, I will walk you through the steps to use Github pages and deploy the app.
Prerequisties:
Git
Github Account
NodeJS
First thing first, set up the repo.
Log in to Github and go to this link to create a new repository.
It should look something like this.
Now, that we have a repository let’s clone it and get the react setup. Command for it.
Now you should be able to run npm start and the app should open in the browser. Something like this.
Now we have a react app, let’s work on getting it deployed.
Use the below command to install gh-pages and it’s the dependency.
Check the file structure in your site, it should have a package.json file. It’s like the configuration for your project.
Let’s add the homepage here.
It’s the Github page URL
https://{github-user_name}.github.io/{repo-name}/
For this test, this is the site.
https://samit22.github.io/host-react-site/
Let’s add two properties inside the script
Which would look like.
Now let’s deploy the app using the command
Looks something like this.
Our page will be live at
https://samit22.github.io/host-react-site/
We can also check this from the settings -> pages section from the repository
Link:
https://{github-user_name}.github.io/{repo-name}/settings/pages
If you have any questions you can always reach out to me.
Thanks.
