3 Steps to Rapidly Deploy a Headless Single Page Application
Headless single page applications don’t necessarily require any back-end code. This frees you from many hosting restraints and opens a world of options for deploying your application quickly.
Because the application only requires static resources, you have many interesting publishing options available to you. Some provide simple deployment tooling to make it easy to integrate into your workflow, and many of them are free!
In this post, we're going to look at how you can deploy the sample SPA we created to demonstrate Kentico Cloud with a service called Surge. Surge is a simple, free service and can deploy projects with a single command. Here's what we'll do:
- Install the necessary tooling
- Clone the sample repository
- Deploy the single page application
Installing the Tooling
Chances are that, if you’re a front-end developer, you’ve already got both npm and Git. If by some chance you don’t have them yet, they have great instructions on their respective websites for whatever platform you’re running. Once you have both of these installed you can proceed.
Next up: installing Surge’s tooling. This is as simple as entering the following into a command prompt/terminal:
This should only take a few seconds. After that, you're ready to get started publishing with Surge!
Cloning the Sample Repository
Now that you have all the necessary tooling, navigate to the directory where you plan to store the sample project source code in a command prompt or terminal. Next clone the sample repository from GitHub with the following command:
After that, install the project's dependencies with this command:
You can test the application locally by running it with:
This will run the sample site, which you can access in your favorite browser. Here's what it looked like at the time of publishing:
Deploying the Single Page Application
Before you can deploy you need to prepare a production-ready build that is lean and trim. This is as simple as running the following:
Once built, change to the build directory and type:
The first time you do this it will prompt you to enter an email address and password. More information can be found on the getting started page in Surge's help. Every other time it will confirm the local directory to publish and generate a subdomain to publish to.
You can change the sub-domain if you like and can even use your own domain, all for free. After that, you’re done. The site is deployed and ready to be accessed on the domain specified during deployment.
Surge’s help documentation provides good information on how to handle more complex scenarios. Remember, however, that Surge is just one option for simple deployment. Zeit is another popular option for simple, one-command deployment.
This approach works well as a playground for trying new things in Kentico Cloud. By swapping the project ID in the /src/Client.js file for your own project ID you can experiment with changing content, adding pages, and more.