Introduction
In the past, to showcase my proof of concepts, I often rely on Platform as a Service (PaaS) such as Heroku, Digital Ocean or AWS to host all of my web applications. After the client can visit my webpage on these platforms, I can then continue implementing the UI of the application with frameworks like React, Vue, and Angular.
However, to successfully deploy the application, I need to understand the configuration setup behind the platform. Although this won’t be a barrier once I figured out, I will have to repeat the same procedural again and again if I switch to another platform again and again. (It is a pretty inconvenience and detrimental procedure if you think about it.) I feel reluctant whenever it comes to setting up the platform. Along with other technical difficulties, I decided to look for an even faster way to deploy and showcase my projects.
Discovery
Here’s the general flow of my web applications
- Client visits the URL provided from the platform
- The server in the web application routes the request to a webpage
- The webpage executes JavaScript code on the client-side
Since some of my showcases are relying on the front-end, and the server would mostly return a static webpage for these situations, so there is no need to concern about setting up the server anyway.
With this mindset, I can instead use a static site generator to create the front-end of an application, then deployed it to a static site host. Therefore, I can concentrate on building the UI instead of resolving other necessities before I can get down to business.
Approach
For static site hosting, I decided to use GitHub Pages given most of my codes are hosted on GitHub anyway, and use create-react-app to rapidly build the front-end in React because it was the only library I knew at that time. Indeed, create-react-app’s documentation has a section to teach you how to deploy their application to GitHub page. I built one as soon as I knew it for the sake of the demonstration; React-static by nozzle is another interesting choice. It came along with other cool features such as SEO, code splitting, React-oriented setup, etc…, but in general, create-react-app is sufficed for small personal projects.
Conclusion
In summary, I found a way to showcase my project efficiently by reducing some of the unnecessary steps. If I know the project is front-end oriented, then I can create a static page then deployed to GitHub Pages, instead of being distracted by the deployment and the server. Hopefully, this discovery helps me to rapidly express my idea as soon as possible in the future.
