We have been learning and creating lots of fun stuff and I believe we have a good idea on how to build React apps. It's time for us to know how to deploy those apps and have a live URL to show our progress off!
We have been using Create React App to develop our React applications, so let's see what they have to offer for our deployment process!
Create React App
The only magic command we need is npm run build. Running this command will create a build folder for us with all of our code sitting in it waiting to be deployed to production.
In this folder, all our Javascript and CSS will be included in the static folder. Let's see what we are going to do with the contents of this folder in order to have it up and running on Github Pages!
Github Pages
Since I mostly use Github for version control, I'll take further advantage of it and use Github Pages to host my apps on it for free.
Luckily, there is a package that would help us take care of this and prevent us from reinventing the wheel, the gh-pages package. We install the package normally with npm install gh-pages and it would handle the building and updating of the gh-pages branch for us, whenever we let it know we're ready. Let's see how it works!
How It Works
Normally, our app will be deployed on a subdomain with our username on github.io like any other app, so to keep our app well informed about our root URL, we need to add a homepage attribute to our package.json file and assign the URL to it
"homepage":"https://yourGithubUsername.github.io/yourRepositoryName",
After that, we need to make sure we add a couple of scripts to run the build command for us and generate our build folder and then take the contents of that folder and publish it our to gh-pages branch
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
Now all we need to do is run npm run deploy every time we make changes and want to deploy our app and it will be up and running on the server.
One last thing we should remember to do is enable Github Pages in our repository settings and set the default branch to gh-pages
By this mini deployment, I shall end my eighth baby step towards React greatness, until we meet in another one.
Any feedback or advice is always welcome. Reach out to me here, on Twitter, there and everywhere!
Top comments (0)