If you wish to deploy an application online, it is possible to do so with different platforms. Whether it’s simply to illustrate a portfolio or deploy your application online, you can do it with GitHub as we will see today.
You probably already have a GitHub account; if you don’t yet, I highly recommend you to create one because it has become almost essential for any developer.
A quick reminder of what GitHub is:
Github is an online service that allows you to save your code but also to do versioning. During the creation of a project you will probably work with several people. Each developer will make changes to the project. With GitHub you can keep track of each line added to the project and by whom. In addition to that, it is possible to divide the project into branches and to be able to test this or that functionality in parallel before merging it with the rest of the project. If you want to know more, feel free to inquire for more details because GitHub offers much more than these few functionalities.
Going back to the subject of the article, we will see how to deploy a React.js application and host it directly in your GitHub repository.
For this you need:
- 1 GitHub account
- 1 React application (this can work with other applications of course, but I use a React.js application in my example)
The application I want to deploy online is my Expenses Tracker (have a look at the project if you want to know more). This application is already inside a GitHub repository. If you don’t know how to add your project into a GitHub repository, have a look at this article.
1 – Install GitHub pages:
To do so, go to the terminal and make sure to be in your project repository. To download it, simply use this command:
npm install gh-pages --save-dev
Or if you use Yarn:
yarn add -D gh-pages
2 – Add the url in the package.json
In your package.json file add a line “homepage”: “”, like this:
Now, to set the url we need our GitHub profile. In my case, my profile is “Nchapron” and we also need the name of our directory which for me is “expense-tracker”.
We need to create our URL like this: http://#profilename.github.io/#directory, which gives me http://NChapron.github.io/expense-tracker.
Attention: for your url I recommend you to put everything in lowercase, as I do here.
“homepage”: “http://nchapron.github.io/expense-tracker”
3 – Add the scripts from GitHub pages in the package.json
In the script part add:
“predeploy”: “npm run build”,
“deploy”: “gh-pages -d build”,
4 – Commit and push the changes to the GitHub directory
5 – Deployment of the application
Return to the editor and execute the command:
npm run deploy
It may take a few minutes but your application is now online.
Editing code
If you make changes to your project, just commit and push the changes to the master branch and re-run the command npm run deploy then wait a few minutes for the site to rebuild.
if it doesn’t work
Sometimes it may not work. This was my case at first because gh-pages is case sensitive. All I had to do was to add a .nojekyll file to the root of my directory to tell gh-pages not to build with jekyll.
For me it was enough to allow the application to build properly.
In case of more persistent problems, do not hesitate to consult the documentation.
Recent Comments