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.
When using a headless CMS like Kontent.ai to power a single page application, you don't have to write any server-side code. You can write a full-fledged single page application using just HTML, CSS, and JavaScript while still being able to dynamically update and expand on the content of the application.
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 Kontent.ai 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.
Next steps
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 Kontent.ai. 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.
It may not always be suitable for production scenarios since everything is rendered by JavaScript on the client side, which could be a problem for search indexing. Google and other search engine crawlers typically support JavaScript based rendering now, but not all do, or they may not be fully compatible with your implementation.
Subscribe to the Kontent.ai newsletter
Get the hottest updates while they’re fresh! For more industry insights, follow our LinkedIn profile.