When I started creating react projects in general, I had limited knowledge about its deployment. It is very important that you showcase your work to the world. For both students and professionals, until and unless you can show your work, your skills may be in question. I wondered where can I deploy my projects without actually going through a lot of trouble, or submitting a credit card or not worrying about the trial run period.
After a good amount of research, I found the solution right in front of me. Using Github for deployment is very easy and I have deployed almost all of my projects on it without any trouble. In the following section, I will be discussing how you can go about creating and deploying your react projects on GitHub very easily.
- The very first step is to download and install node Js from https://nodejs.org/en/ on your computer. Node js will come with npm which is a package manager that will be used for installing a create-react-app package.
- The next step will be to install create-react-app package from the pm. Open cmd in case of windows or terminal in case of mac and Linux and give the command.
npm install -g create-react-app
- The above command will install create-react-app globally in your system. Now go to the directory where you want to create your react project and give the command.
create-react-app "your app name" in cmd.
 |
creating new create-react-app project
|
- This will take some time to create a react app project and following it you will get the following ready-made folder structure.
 |
| initial folder structure |
- Now, you can begin placing your code inside the components folder. The folder structure varies from individual to individual. So you can go for a folder structure that suits you. I personally like to go for a folder structure that looks like the following.
 |
| contents inside src folder |
- Once you are done with the project and ready for the deployment, I would suggest you finally check again by running "npm start" in the console. I am sure most of you must be aware of this command. For those who are unsure, this command runs your react code with a local server and renders it in the browser. Do check out the official documentation (https://create-react-app.dev/docs/getting-started/) in case of any doubt.
- Finally, when you are sure that your code is running and the webpage is rendering as you wanted, we can move towards the deployment part.
- The very first thing you need to deploy projects on GitHub is a GitHub account and local setup of git in your computer. Chances are you already have it if you are a professional developer or a student. For those who are unsure of how to create a GitHub account and install git in you machine, do checkout official documents. For git refer -
https://www.atlassian.com/git/tutorials/install-git#windows
- After Creating a Github account and setting up git locally, we can move to the next step where you will need to create a new empty repository in the remote(GitHub) with the name that you want to give it to your project.
- Clone this empty repo in your system with the command.
git clone "clone URL". Now you have a local version of your git repo where you will be keeping your react project.
 |
| GitHub remote (getting clone URL) |
 |
| cloning the repo in local machine |
- Post this, copy the contents of the project you created earlier by using create-react-app and paste in this git repo folder. Make sure you have a .gitignore file that comes with the create-react-app setup.
- Open the package.json file and add a homepage as shown below in the screenshot. Make sure to mention your webpage name inside of mine after github.io/ in the homepage key. This will be the URL of the webpage.
 |
| adding homepage URL |
- Once you have done with the above-mentioned step, run the command "npm run build". After the execution of this command, a build folder will be generated into the root of your git repo.
 |
| generating a build of the project |
 |
build folder will be generated
|
- Now, create a new folder and rename it as docs. It is very important that the name of this folder is as docs and not anything else. Copy the contents of the build folder into the docs folder as it is.
 |
| create a docs folder and paste all the build folder contents into it |
- The local git repo is now ready. The next thing to be done is to stage the changes and commit them. For staging all the changes at once in the git bash and run the command "git add --all" and post this for committing to the changes run the following command git commit -m "you commit message".
- Now the changes of the local git repo should be pushed and the master branch of local repo should be consistent with the master of the remote. For this run command
"git push -u origin master" in the git bash. This will push the changes to the remote git repo and your master branch will be consistent.
- Go to your GitHub account in the browser and open your repo. You might observe that the node_modules and the build folder is not present in the remote repo. This is because these folder names were mentioned in the .gitnore folder and are not supposed to be pushed. No worries, we don't need those folders anyway.
- Go to the settings tab in your repository. You will be given the option to name your webpage. Make sure you name it the same as you did on the homepage of the package.json file (only the name, not the complete URL). Scroll down to the section GitHub pages, you will find a "source" subsection. In this select master branch/docs folder. After selecting this, your web page will be deployed and the link of the webpage will be displayed.
 |
| settings of your repo |
 |
| GitHub pages section |
- You can access your webpage by simply clicking that link or manually typing in as a URL. This might look like a long process but most things like the setup of node and git would have already been in your machine. According to my personal experience, it doesn't take more than two mins for the extra effort for deployment on git.
- I must also mention that there are other ways of deploying projects on git like creating a separate branch gh-pages and installing package accordingly in the machine. But the one I discussed in this post seems simplest to me and I personally deploy my projects this way. Do let me know your suggestions or anything that could be missing in this post.
Comments
Post a Comment