Fast React Single Page Application (SPA) hosted for free on Github
Do you want to build a React SPA web application and pay nothing to host it, while simultaneously having infinite scale? Easy. Use Github pages. You don’t need anything complex at all. Your application can fully support any URL path. Your application will be secured by https too. You are asking yourself, how is this so easy to build a SPA with https and why don’t I know more about how to publish a React SPA for free?
The goal of publishing a simple React Single Page JavaScript application can be accomplished with only two files and limited experience with JavaScript. In fact, you can use any frameworks: React, Angular, vue.js or a custom JavaScript framework. You can build a Progressive Web Application (PWA), protected by https, or any other type of React application. In fact, the example that I am going to share doesn’t even use React!
There is only one “trick”, which isn’t a trick at all. It doesn’t require anything special besides the filename. The secret to hosting a Single Page Application on Github is to name the file 404.html It’s that simple! Let’’s look at a real, working example. This example is a RGB color visualizer. The script quickly visualize any RGB color in a web browser. Let’s look at rgb(50,50,50) When you follow that URL, it will redirect you to the website color-hex.com, transforming the RGB values into HEX code #323232
When we examine the URL path: https://rgb.developnyc.com/rgb(50,50,50); The JavaScript code, which exists in 404.html can respond to any URL path. We can even be silly, for example https://rgb.developnyc.com/a/path/is/here/background-color:rgb(50,50,50); which will correctly forward the user to #323232 on color-hex.com.
I find the URL powered RGB visualizer useful when writing, or reading, CSS code. It’s easy to paste the entire line, such as background-color:rgba(50,50,50,1); like in this example. And, I don’t have to pay for hosting on Digital Ocean, AWS. I didn’t have to configure Let’s Encrypt.
You can get started by taking a look at the RGB Single Page Application (SPA) source code for the RGB to HEX color visualizer. The source code demonstrates that it only takes two things to build a JavaScript SPA. The CNAME file, which is a construct of Github pages and a file named 404.html to host a simple, or complex, React Single Page Application (SPA). The README.md is not required, but can be helpful.
Thanks to color-hex.com. Have feedback, find a bug, want to continue the conversation or need a JavaScript application engineer? Connect with me on Twitter.
