You already know what is a single-page application and how to build one in ClojureScript and re-frame.
We’ll now describe a cost-effective way to host SPAs on Exoscale’s secure, multi-datacenter object-storage.

The simplest way to deploy a self-contained application: on Object Storage.

Host a single-page application or static website on Object Storage: a secure, reliable alternative.

We’ve learned to build an SPA, now what could be the easiest way to share it with the rest of the world? We’ll need a reliable, secure place to host the static files.

Object Storage makes a nice alternative to setting up a web server for hosting static files, boasting the following advantages:

  • no need to forecast traffic to correctly provision CPU/RAM resources – the Object Storage engine scales in the background as loads increase (those implementation details are handled by the Object Storage hosting provider)
  • web servers are prone to security vulnerabilities – Object Storage is more secure (and since you only place publicly available files there anyways, a security breach is not a concern)
  • the operating burden of configuring a load balancer, web server, maintaining SSL certificates, and updating the underlying operating system is greatly more time consuming than using Object Storage
  • Object Storage is orders of magnitude cheaper than provisioning VMs with webserver and load balancers to handle the same load (compare Object Storage pricing of 0.018 EUR per GB per month to pricing of ~10 EUR per month per GB of RAM for the VM-hosted alternative.)

Deploy a single-page application on Exoscale’s Object Storage

To demonstrate the process we will use the ping-times SPA we’ve built. If you want to jump straight-in you can clone the GitHub repo here. You can of course follow along with your own application or static website.

In the case of the ping-times application, you will locate the compiled files intended for your production deployment in the public/resources/ directory of the project. If you haven’t already, make sure to run lein clean && lein cljsbuild once min first in order to build the production-ready JavaScript bundle. This minifies the code, eliminates dead code, and produces a version optimized for fast loading in the browsers.

$ ls -F ~/ping-times/resources/public/
app.js          img/             index.html      style.css

Create an Exoscale account and set up your account credentials

Publishing a static website or a single-page application on the Object Storage is really straightforward.

Create an account if you don’t have one already, and follow the credentials setup to locate your API Key and Secret Key.

In our example, we’ll use the aws-cli command line tool to interface with Exoscale’s S3 compatible simple Object Storage and upload our application.
Being compatible with the S3 protocol, you can use whatever tool works with S3 to interface with Exoscale’s Object Storage. This includes applications like CyberDuck (for MacOS and Windows) if you prefer a GUI.

In order to setup aws-cli we’ll need to create the following two configuration files in the ~/.aws folder:

$ cat ~/.aws/config
[profile exoscale]
region = de-fra-1

$ cat ~/.aws/credentials
[exoscale]
aws_access_key_id = YOUR_EXOSCALE_API_KEY
aws_secret_access_key = YOUR_EXOSCALE_SECRET_KEY

In this example we’ve chosen to publish our demo application in our recently opened Object Storage zone in Germany, Frankfurt: a reliable location with great access times to Europe and beyond, that benefits from strict privacy laws governing European data.

Create a shell alias for quick access

With those config files in place, we can create a shell alias called sos-de that lets us access our chosen datacenter more easily and save it to our ~/.profile file:

$ printf "alias sos-de=\'aws s3 --profile exoscale --endpoint-url https://sos-de-fra-1.exo.io\'\n" >> ~/.profile

Create a new bucket

Now, let’s create a dedicated bucket with the mb command to test it out:

$ sos-de mb s3://YOUR__BUCKET_NAME
make_bucket: YOUR__BUCKET_NAME

It worked! We now have a working client configuration.

Upload your files and deploy your single-page application to the Object Storage

Let’s sync our local files to our bucket on Exoscale:

$ sos-de sync ~/ping-times/resources/public s3://ping-times --acl "public-read"
upload: ping-times/resources/public/app.js to s3://ping-times/app.js
upload: ping-times/resources/public/index.html to s3://ping-times/index.html
upload: ping-times/resources/public/style.css to s3://ping-times/style.css

Here we use the sync command that allows us to mirror a local directory to a directory on SOS. We use the --acl "public-read" flag to indicate that these files are accessible to anyone (which is required for websites that are publicly accessible).

To verify that it worked, you can open your browser to https://sos-de-fra-1.exo.io/YOUR__BUCKET_NAME/index.html and see your app in action!

If you run into any trouble, feel free to contact us directly for support.
Also, make sure to visit our Object Storage documentation for detailed instructions and API reference.
Let us know what you build!