Stormkit LogoStormkit Logo WhiteStormkit

Welcome

Stormkit is a next-gen hosting and deployment tool for javascript applications. It helps you focus on your application by providing a solution for most common technical challenges, such as deployments, logs, hosting, scaling and tls certificates, and saving valuable time.

Getting started

You can use Stormkit from a Web UI. To do so, sign in or sign up from app.stormkit.io. Currently, you can authenticate using your Github or Bitbucket account.

Supported technologies

Stormkit is designed to work with every javascript application. You can deploy and host any static website, and/or dynamic websites. This website, for instance, is written with React and compiled with Gatsby.js. If you need dynamic behaviour, such as fetching user generated content from an API on the server side, you can easily do so by defining an entry file in the Stormkit UI. Doing so will tell Stormkit to host the application on a lambda, rather than on our CDN. This will enable writing powerful applications that can easily scale to millions of users.

It's also possible to make Stormkit work with yarn workspaces.

Server side rendering

Server side rendering is particulary useful for better SEO and allows social media platforms to preview your page when a link is shared. If you're using a static site generator, you can simply deploy your application without specifying an entry file on Stormkit.

If, for instance, you need to display the latest products on your e-commerce platform, you will probably need write a node application which renders on the server side. You can easily add server side functionality by navigating to My application > My environment > Edit and specifying the location of your entry file. The path to the file is relative to the project root.

You server file needs to export a function like:// src/my-server.js import React from "react"; import { renderToString } from "react-dom/server"; export default async(req, res) => { const apiResponse = await fetch("https://api.example.org/products"); const products = await apiResponse.json(); res.status(200); res.setHeader("X-Custom-Header", "my-custom-header"); return res.send({ footer: "My footer", content: renderToString( <div> <h1>List of products:</h1> <div> {products.map(p => <div key={p.id}>{p.name}</div>)} </div> </div> ), }) } The object keys specified in the response body needs to correspond with the mounted elements in the index.html. You can define where to mount these values as a namespaced element in the following format:<sk:myKeyName />. For instance, above the body object defines two properties: content and footer. In the document below we define where to mount them respectively with <sk:content /> and<sk:footer />.<!-- public/index.html --> <!DOCTYPE html> <html> <head> <title>My awesome app</title> </head> <body> <div id="root"> <sk:content /> </div> <sk:footer /> </body> </html> If you're wondering why we have used namespaced elements for templating, it is simply because the alternatives such as using string templates or comments do not work for all cases. For instance if we would specify string templates in the document, they would then appear in development environments while loading the page. Similarly, webpack strips comments in most of the production environments. Therefore, the namespaced elements are the safest way to make templating work.

If you're using a framework like Nuxt.js, you don't need to export any function or define these elements in your document as they already handle the server-side logic. Check the deployments page for further information.

Entry file

The entry file, as shown above, exports a function. Whether it is async or not is totally up to you, Stormkit handles both cases. The exported function has the same signature with traditional Node.js applications. It receives a Request and Response object as arguments. To return a server response, you can use the Response.send method which expects an object with the following properties:

PropertyDescription
headersA key-value pair object which represents the response headers.
bodyA key-value pair object which the key represents the tag name in the html document, and the value is the string that will be replaced with the placeholder.
statusA number indicating the response status.
If you prefer the more traditional way to return a response, you can also use the same API Node.js uses. So for instance, instead of returning an object, you can useResponse.setHeader to set headers,Response.status to set status and Response.end to return a response body.

Now that you know to how provide an entry file, let's move forward to deployments.