3 Steps to rapidly deploy a headless single page application

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:

1. Install the necessary tooling
2. Clone the sample repository
3. 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: 

npm install --global surge

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: 

git clone https://github.com/kontent-ai/sample-app-react

After that, install the project's dependencies with this command: 

npm install

You can test the application locally by running it with:

npm start

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: 

npm run build

Once built, change to the build directory and type: 

surge

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.