The latest articles on DEV Community by Dani Vijay (@danivijay). https://dev.to/danivijay https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F67178%2Fddc8ae9a-2a6a-46c8-a57f-bab3d3bfae95.png https://dev.to/danivijay en Dani Vijay Mon, 05 Aug 2019 13:34:19 +0000 https://dev.to/danivijay/the-lazy-man-s-journey-to-publish-an-react-app-in-github-pages-with-custom-subdomain-43li https://dev.to/danivijay/the-lazy-man-s-journey-to-publish-an-react-app-in-github-pages-with-custom-subdomain-43li <p>Note: Skip next paragraph if you are not interested in backstory.</p> <p>I started learning 1 word per day from last week and documenting it via twitter(<a href="https://twitter.com/UtmostDev/status/1156447349373194240">https://twitter.com/UtmostDev/status/1156447349373194240</a>). After few posts, I realised, the platform I chose was wrong. As I'm not a regular tweeter, this is gonna slowly dominate and pollute my feed. But I was not planning to drop #AWordEveryDay anytime soon. My only option was to find a new home for it. It's been some time since I developed a website from scratch, and I chose to do the same ASAP as a refresher.</p> <p>My obvious choice was <code>create-react-app</code>. Making the website was pretty much straight forward, and it took around three hours to get the first draft ready(<a href="https://github.com/danivijay/AWordEveryDay">https://github.com/danivijay/AWordEveryDay</a>). </p> <p>As my code sits in GitHub, next step was to search how to deploy a react app using GitHub pages. Then the real problem began. There were tons of tutorials saying the same thing again and again - use gh-pages(<a href="https://www.npmjs.com/package/gh-pages">https://www.npmjs.com/package/gh-pages</a>). But at the time of writing, the package is not working as expected(<a href="https://stackoverflow.com/questions/57314473/the-file-argument-must-be-of-type-string-received-type-undefined-on-npm-run-d">https://stackoverflow.com/questions/57314473/the-file-argument-must-be-of-type-string-received-type-undefined-on-npm-run-d</a>). Even downgrading didn't resolved the issue(cache problem, may be). But after some research, I realised we can also directly deploy from <code>docs</code> folder of the master. Renamed <code>build</code> to <code>docs</code> and after pushing, my app was up and running within minutes!!</p> <p>Second problem was routing my subdomain to the web app. Found out that routing my subdomain is as simple as adding a CNAME record with name as subdomain name (awordeveryday) and domain .github.io.(danivijay.github.io. - the dot in the end is needed). Initially the page showed a certificate error, but opening in incognito resolved the issue(cache problem again?).</p> <p>Last but not least, I noticed the custom domain configuration in settings resets every time I pushes something. Adding a file named <code>CNAME</code> with my custom domain(awordeveryday.danivijay.com) in my docs folder(which I am publishing) solved the issue. </p> <p>The site is up and running at <a href="https://awordeveryday.danivijay.com">https://awordeveryday.danivijay.com</a>, and source can be found at <a href="https://github.com/danivijay/AWordEveryDay">https://github.com/danivijay/AWordEveryDay</a></p> react github githubpages subdomain