Deployment, Hosting & Distribution
Storyblok is a platform that stores and delivers the content of your application.
If you want to learn what a Headless CMS is, you can read this article.
Having said that, Storyblok is not a hosting platform or a service that allows you to set your website up and running. There are many options if you want to host a web application. You have the possibility of using web servers, Content Delivery Networks (CDN), or even create serverless applications. You can also set up your own environment and manage the availability of your project. Yet, you should also consider that as Storyblok is a headless CMS, it is not limited to be used only for websites and web applications.
Storyblok is a Software as a Service (SaaS) that can be used and integrated with different platforms and channels. You can use the data managed by Storyblok in websites, mobile applications, and other platforms like virtual reality devices. We want to make your work as easy as possible. That's why Storyblok is hosted in servers managed by our team instead of being a self-hosted service.
Overview of the ecosystem
One of the advantages that Headless Content Management Systems offers is the possibility of creating omnichannel experiences with a unique content hub and different ways of consuming the content. Users can create and manage content using the Storyblok application, helped by the visual editor, and build different types of applications that consume the created content.
In the past, the CMSs were limited to web projects only. The monolithic CMSs are designed to handle both the backend and the presentation layer of your projects. By doing this, you have a backend to create and manage content, but you are also tied to a certain frontend approach and technology. With headless CMSs, that doesn't happen anymore. As the backend and the frontend are decoupled, you can use the content on different (and multiple) channels.
Since Storyblok focuses on providing content for your omnichannel projects, you need to add other services as well. Depending on which type of client or users you want to focus on, you will need other platforms and tools to create and deliver your projects and offer a great user experience. You can have a unique content source with a Headless CMS, but you will also need to code and develop different frontends, clients, algorithms, and applications that consume and deliver that content. And, depending on which type of interface you use, you will require frameworks, platforms, and tools.
Let's see what types of projects you can develop using a headless CMS into your setup and, in particular, using Storyblok as a content source.
Web
A web project can be as simple as a plain HTML file or as complex as a gigantic web application with a lot of processing and user interactions. Depending on the type of web project you are creating, you will have different requirements related to the app's hosting, availability, and deployment. Storyblok itself, as a service, doesn't need any type of hosting or management: You just create content on the platform and consume it from your applications or websites. So, you will need to focus on creating, building, publishing, and maintaining the code of your web project.
)
Normally, a web project is represented by a group of HTML, CSS, and JavaScript files and other assets/files (images, videos, etc.). There are different approaches to create the files that make up a website. Based on the way the content is generated and delivered to the user, we can categorize web pages into two groups.
Static Web Pages
A web page that is delivered to the user's browser exactly as stored. This doesn't mean that the website won't have interactions or dynamic content. The HTML, CSS, and JavaScript files will always be the same for all the visitors, and you can get dynamic interactions after the page is loaded using JavaScript. We will talk about dynamic content with JavaScript later.
Over the years, new tools were developed to get the benefits of static web pages, using newer frameworks and programming language features. This is the case of the Static Site Generators (SSGs), which generate static files and assets at build time, using different data sources and templates. This new way of generating static content is very related to the “Jamstack" movement. Examples of SSGs are Nuxt.js, Gatsby, Next.js, or Hugo.
Dynamic Web Pages
A web page where the content (or some of it) is generated dynamically when needed. Based on different factors and conditions, you can generate content dynamically and deliver it to the user's browser, which will receive the files as if they were previously created and hosted in the webserver. To generate the dynamic content, you can use different sources, such as databases, template engines, algorithms, third-party APIs, etc.
Focusing on the dynamic web pages, we can divide them into two types, based on how and where the dynamic content is generated.
Server-Side Rendering
Content is generated by the Web Server. You can create pages following this approach with programming languages like PHP or Ruby or with frameworks like Node.js or ASP.NET. The part of our project that does the work on the server is called the backend.
Client-Side Rendering
The content is rendered directly in the browser, using JavaScript. All the code that generates content on the client-side is called frontend. You can use frontend frameworks like React, Vue.js, or Angular to work with the user interface and achieve great user experiences. Web applications that generate dynamic HTML content using JavaScript and bring data from the server without reloading the page or redirecting to a different one are called Single Page Applications.
Hosting & Deployment
In any of these scenarios, you would connect to Storyblok using the Content Delivery REST API, the Content Delivery GraphQL API, or any of the SDKs available for different programming languages and frameworks. Depending on the type of web application you create, you have different alternatives of hosting and deploying platforms, where you can store the files of your project and keep your application available for the users. Let's see some examples.
If you are working on a Single Page Application, or a project that renders the content on the client-side, or a Static website (with or without a static site generation process), some hosting alternatives are:
These services rely on Content Delivery Networks. A CDN is a group of web servers geographically distributed that work together to provide better performance when delivering static assets (HTML pages, JavaScript files, CSS files, images, etc.). These servers are configured to provide improved performance on your web applications.
If you are working with static site generators like Gatsby, Next.js, or Nuxt.js, they have a selection of the preferred services where you can host your applications:
Storyblok manages its own CDN to deliver content and assets at high transfer speeds.
If you are working with dynamic websites that generate content on the server-side, or you are creating an API or a backend platform, some services that you could evaluate are:
If you don't want to manage your own web server, some of these providers also offer you the possibility to create serverless applications.
Continuous Integration and Continuous Delivery
In general terms, all these services offer a hosting platform, deploying options, and other useful tools at the moment of maintaining your web application. If you are working with a Static Site Generator, some offer hooks and processes to automate your project's build and deployment processes. If you want to set your own deployment process, or you need to configure advanced details of it, there are different Continuous Integration and Continuous Delivery tools that you can use:
Apps
Depending on the requirements, the target devices, and your team's budget, there are different platforms and programming languages available to develop mobile applications.
Native apps
You can work on a native app development: Use a platform and programming language to create an application that works on a particular operating system. Depending on your target devices, Android devices, or iOS devices, you have frameworks and SDKs that will make your job easier.
Native iOS apps are written in Swift or Objective-C, and native Android apps are written in Java or Kotlin. If you work on Android applications, you can use Android Studio IDE. If you are going to create iOS applications, XCode IDE is the tool to do it.
You have to keep in mind that, as you are developing native applications for a certain operating system, you’ll need to create two separate apps for both Google Play Store and Apple App Store.
Cross-Platform Apps
The main disadvantage of native applications is having to develop versions separately for each platform you want to cover. As an alternative to this scenario, some frameworks allow the developers to create applications in one programming language/technology and deploy on both Google Play Store and Apple App Store. They don't have the same performance compared to native applications, but it's a good approach to saving time, developing one application that will work for all the platforms.
Some of the SDKs available to create cross-platform applications are React Native (uses JavaScript and React), Flutter (uses Dart), and Xamarin (uses C#). For each one of these platforms, there are tools to build, test and deploy the apps.
There is another cross-platform approach: Creating a web application with HTML, CSS, and JavaScript that is running inside a container that can be executed on any platform. An example of this type of framework is Ionic, which enables the developer to create a web application executed inside a Cordova container and distributed to any operating system.
Distribution
When the application is ready to be used by the customers, it's time to submit it to the different app stores. You should follow both Google and Apple guidelines, so your application is approved and ready to be downloaded from the Play Store and App Store.
Future Platforms
As we said before, the content created using Storyblok isn't tied to any frontend. This allows you to create projects consuming content from different apps, services, and devices. This independence of how the backend is implemented and works allows the developers to build creative solutions and projects, connecting to Storyblok in different ways using different devices and systems.
)
Let's talk about projects that you can build using Storyblok as your content repository.
Smart Devices
Smartwatches, Smart TVs, virtual assistants like Alexa or Google Home. You can develop applications for these devices or execute actions that have a result on them.
Storyblok webhooks are a good way of triggering actions whenever new content is published or edited. You can also create scripts that interact with services that offer connections and triggers that solve certain scenarios, like IFTTT or Zapier.
Internet of Things (IoT)
The Internet of Things refers to the physical devices that are now connected to the internet, collecting and sharing data. These devices can connect to applications and interfaces to execute actions. You can also set triggers in different platforms that start processes on the smart devices. To do this, you can take advantage of Storyblok webhooks.
See how to create a LED matrix controlled by Storyblok on this article.
Augmented Reality (AR)
Augmented reality is overlaying digital content on top of the real world. It allows the user to interact with both the real world and digital elements. AR can be offered through sound, using headsets, or through a video camera, i.e., a smartphone's camera. Your AR application can consume content from Storyblok using the Content Delivery API.
Virtual Reality (VR)
On the other hand, Virtual Reality is a visual and auditive experience that surrounds the users, replacing the real-world environment around them. There are different SDKs to integrate Storyblok in your VR applications.