Forem: Stormkit

Node.js Hosting: DIY Flexibility vs. Stormkit’s Streamlined Power

Savas Vedova — Thu, 24 Jul 2025 13:51:54 +0000

When it comes to hosting Node.js applications, you’re faced with a choice: build and manage your own infrastructure or use an orchestrator like Stormkit, purpose-built to scale and simplify, especially for managing multiple apps or hundreds of long-lived processes. While DIY hosting offers control, Stormkit’s feature set makes it a compelling choice for developers looking to optimize resources and streamline workflows.

Let’s break down the trade-offs, highlighting Stormkit’s unique strengths and acknowledging the realities of self-hosting.

DIY Hosting: Control at a Cost

Running your own Node.js setup, with a process manager like PM2, or systemd, gives you full control over your environment. For small projects or developers who enjoy fine-tuning servers, this can be a great fit. But as you scale to multiple apps or hundreds of processes, the DIY approach shows its limits.

Scaling Complexity: Managing traffic spikes across multiple apps means manually provisioning servers, setting up load balancers, and ensuring uptime. This can lead to over-provisioning, where you’re paying for idle servers, or under-provisioning, risking crashes during surges.
Maintenance Burden: You’re responsible for server updates, Node version upgrades, and monitoring resource usage. Juggling multiple apps amplifies this, as each may have different runtime or dependency needs, leading to configuration sprawl.
Security Overhead: Securing multiple apps requires configuring firewalls, SSL certificates, and staying vigilant about vulnerabilities. A single misstep can expose your apps, and keeping everything patched is a time sink.
Deployment Friction: Rolling out updates across multiple apps often involves manual restarts, risking downtime. Testing new versions or rolling back failed deployments can be clunky without a streamlined system.
Cost Inefficiency: A small VPS is cheap, but scaling multiple apps across servers, plus adding redundancy and monitoring, drives up costs. Your time spent managing servers is another hidden expense.

DIY hosting is ideal for small, single-app projects or when you need highly specific configurations. If you’ve got the skills and time, it’s a hands-on way to learn and save on small-scale costs. But for managing multiple Node.js apps at scale, the overhead can pull you away from coding.

Stormkit: Optimized for Scale and Simplicity

Stormkit is designed to handle Node.js applications at scale, especially when you’re managing multiple apps or long-lived processes. Its feature set addresses the pain points of DIY hosting, though self-hosting Stormkit means you still manage the underlying servers. Here’s why Stormkit stands out:

Resource-Efficient Orchestration: Stormkit’s on-demand spin-up and spin-down mechanism optimizes server usage. Instead of running multiple machines for each app, Stormkit orchestrates processes across fewer instances, dynamically allocating resources. What might take many servers in a traditional setup can often be handled with just a few, saving costs and reducing waste.
Insightful Analytics: Stormkit provides a dashboard with stats on your most-visited and most-deployed apps. This quick overview helps you prioritize optimization and understand usage patterns, something DIY setups require custom tooling to achieve.
Flexible Runtime Management: With Stormkit, you can manage Node runtimes via a .node-version file, supporting multiple versions across apps. This eliminates the hassle of manually installing and switching runtimes on servers, a common DIY headache.
Seamless Deployments: Deploying with Stormkit is as simple as a git push, with zero-downtime updates and instant rollbacks if something goes wrong. Each deployment gets a unique URL for testing, and you can add an auth wall to secure preview environments—features that require significant DIY effort to replicate.
Self-Hosting Maintenance: Since Stormkit is self-hosted, you’re responsible for maintaining the servers it runs on—patching the OS, monitoring hardware, and ensuring uptime. While Stormkit handles app-level orchestration, the server-level maintenance remains your responsibility.

The Takeaway: Match Your Needs

DIY hosting offers unparalleled control and is great for small projects or developers who love hands-on server work. It’s cost-effective for single apps and lets you tailor every detail, but scaling multiple apps or processes can lead to complexity, inefficiency, and maintenance overload.

Stormkit flips this by streamlining orchestration, deployments, and runtime management, letting you achieve more with fewer servers. Its analytics, unique deployment URLs, and auth walls make managing multiple apps a breeze, though you’ll still need to handle server maintenance for self-hosting. If you’re focused on coding and scaling efficiently, Stormkit’s purpose-built features are a game-changer. If you have unique server needs or like to be hands-on, DIY might still be your path.

Either way, keep your focus on building great apps 🚀

Hosting 300+ Websites - A Technical Deep Dive

Savas Vedova — Wed, 21 May 2025 16:18:29 +0000

It’s entirely feasible to host over 300 websites on a lean setup of just a few machines, and Stormkit makes it happen with a smart, scalable configuration. This post walks through the technical details how the infrastructure is set up, what it costs, how reliable it is, and what it takes to manage. Let’s dive in.

Infrastructure Setup

The foundation is a compact yet powerful hardware and software stack designed to handle hundreds of sites efficiently. These websites generate millions of requests per month, so reliability is a core concern.

Hardware

Machines: The production setup runs on 3 servers.
Specs: 2 vCPUs, 4 GiB RAM, SSD storage.
Cloud Provider: Alibaba Cloud, chosen for its compliance with local regulations.

Additional Resources

To support the hosting environment, we’ve added a few key components:

Network Load Balancer (NLB): A Layer 4 load balancer ensures TLS termination happens at the source, enabling automatic TLS certificate issuance.
Redis Instance: A Tair Redis OSS-compatible instance handles caching, keeps TLS certificates and acts as a message queue for storing logs and analytics.
PostgreSQL Database: Apsara DB RDS provides a reliable and managed database solution.
Staging Machine: A single server mirrors the production environment for testing and experimentation, keeping costs minimal.

Deployments

Frequent deployments are a hallmark of modern development workflows. Here’s how we’ve streamlined the process:

GitHub Actions Integration: Instead of scaling up worker servers, we offload CI/CD pipelines to GitHub Actions, which integrates seamlessly with Stormkit.
File Storage: All static files are stored and served from Alibaba OSS (S3-compatible object storage), ensuring fast and reliable delivery.

Software Configuration

Managing 300+ websites might sound daunting, but with the right tools, it’s surprisingly straightforward:

Monorepo Architecture: All websites are managed in a single monorepo, simplifying code management and updates.
Stormkit Snippets: Each website is customized using Stormkit’s Snippets feature. Conditional rules based on domain and path allow for unique configurations, ensuring every site has its own look and functionality.
Single Application, One Environment: All domains are assigned to a single Stormkit environment, reducing complexity and overhead.

Networking

Since the client primarily serves regional customers, global distribution wasn’t a priority. All resources are hosted in a single region, optimizing for simplicity and cost.

Cost Breakdown

Here’s how the numbers stack up:

Alibaba Cloud Resources: 4 servers, 1 database, 1 Redis instance, 1 NLB and around 300GB file storage cost approximately $1000/month with subscriptions.
Deployments: GitHub Actions is included in the client’s paid tier, so there’s no additional cost for CI/CD.
Stormkit Services: $500/month for infrastructure setup, service updates, monitoring, feature development, enterprise features and direct Slack support.

Total Monthly Cost: Around $1500.

Cost Per Website: Roughly $5 per site—a fraction of traditional hosting costs.

Reliability and Downtime

When hosting hundreds of websites, uptime is non-negotiable. Here’s how this setup performs:

Downtime: Virtually zero downtime over the last six months.
Resource Usage: Hosting machines maintain a CPU load of 0.8–1.9 and average memory consumption of 24%.
Efficiency: With Stormkit’s monorepo and API automation, updates roll out to all sites quickly, minimizing manual effort.

Key Takeaways

This setup demonstrates that hosting 300+ websites doesn’t require a sprawling infrastructure or a massive budget. With the right tools, a lean team can manage a large-scale operation efficiently.

Whether you’re managing a handful of sites or hundreds, this approach proves that scalability and cost-efficiency can go hand in hand.

Need Help with Your Infrastructure?

If you’re looking to optimize your infrastructure or streamline your deployment process, Stormkit can help. Our platform supports deployments for JavaScript (frontend and backend), Go, and Rust applications, offering unparalleled flexibility and control.

Contact us today to learn how Stormkit can transform your hosting and deployment workflows. Get in touch with us for more details.

Migrating your app from Webpack to Vite

Savas Vedova — Mon, 29 Aug 2022 09:49:00 +0000

Hey all 👋

I recently migrated Stormkit from Webpack to Vite and I wanted to share the changes because I had to follow a trial and error methodology to migrate it due to lack of documentation.

For those who'd like to see directly the code, here are the changes.

First thing you should know is that Vite uses esbuild for development and rollup for production. So while your development environment is working, your production build may fail. That was indeed the case for me and I'll explain in a moment why it happened.

Let's take a look to the configuration options used in vite:

import { defineConfig } from "vite";

export default defineConfig(() => {
  return {
    // Although this is called root, 
    // in our case this is "src", 
    // where our application logic is located. 
    // All configuration options defined 
    // afterwards will be relative to this endpoint.
    root: "src",

    // This is where our assets are served from. 
    // In webpack, this was "output.publicPath".
    base: "/",

    // This is similar to Webpack's DefinePlugin. 
    // It is used to inject constants in your application.
    define: { 
        // Using the following configuration made our build fail as 
        // mentioned above. I had to change a couple of `global` usages 
        // and remove this configuration to make them work.
        // global: { }
    }

    server: {
      // We need https for various 3rd party tools used 
      // in local environment. It is similar to 
      // Webpack Dev Server's 'server: "https"' config.
      // We require a certificate for this to work and that is 
      // achieved through the 'basicSsl' plugin.
      // You can check the actual code to see which package is that.
      https: true,

      // We are proxying all requests from `/api` to our api server. 
      // This config is very similar to Webpack Dev Server's proxy config. 
      proxy: { }
    }
  },

  // This is almost equivalent to Webpack's "resolve" config. 
  // It is used to import files using aliases.
  resolve: { },

  // Assets under this folder will be copied to the dist folder. 
  // We used to achieve the same functionality using 
  // the "copy-webpack-plugin" package.
  // Do not forget that this is relative to the "root" path configured above.
  publicDir: "./public",

  // List of plugins used to make various technologies work.
  plugins: [
     // used to add https to local environment
     basicSsl(),
     // used to include our bundles inside the html file
     createHtmlPlugin({}),
     // used to import svgs
     svgr(),
     // used to make react work with vite
     react(),
  ],

  build: {
    // Specify the dist folder
    outDir: "../dist"
  },

  // Loading a file was failing and adding this configuration
  // fixed it. It basically replaces top-level "this" usage
  // with the "window" object.
  esbuild: {
    define: { 
      this: "window"
    }
  }
})

We do use Tailwind and Material UI in our project. A simple postcss.config.js was all that I needed to make Tailwind work properly:

module.exports = {
  plugins: [require("tailwindcss"), require("autoprefixer")],
};

The rationale behind the migration

This definitely adds no direct value for the end user. So why did we migrate?

The main reason is because we'll make a lot of changes to the frontend soon as we're releasing a V2 for Stormkit. When I realised that the HMR was broken and I heard that Vite is extremely fast for development I decided to give it a try. Turns out, this was a pretty good decision and it will also add value to the end user because it'll increase our development speed.

Results

The build time seems to be a bit slower than our previous configuration. This is mainly because we used to use esbuild, which is extremely fast, for production builds but vite uses rollup. However, to be honest, given the increase in the HMR, we're willing to sacrifice a few seconds during production builds.
Whereas the HMR is extremely fast. When I make a change in the UI and switch to the browser to visualize it, I used to wait a few seconds till those changes were propagated. Now, by the time I switch the Browser tab, the changes are already there. This is fantastic!

Hope this mini tutorial was helpful to understand what is needed to migrate from Webpack to Vite. Stormkit is can be considered as a large application and the migration was possible through 1 PR with almost no breaking changes.

Note This article is also published on our blog.

How to build an ECommerce App with React

Ashutosh Kumar Singh — Thu, 01 Jul 2021 17:05:16 +0000

In this tutorial, we will build an E-commerce App with React using ButterCMS and Snipcart. We will use Chakra UI, a modular and accessible component library, to style the app.
Finally, we will deploy our ecommerce app with Stormkit, a serverless deployment service for JavaScript apps similar to Vercel or Netlify.

If you want to jump right into the code, check out the GitHub Repo here.

And here's a link to the deployed version: https://yakscythe-49dgnn.stormkit.dev/.

Prerequisites

Knowledge of HTML, CSS & JavaScript
Basic knowledge of React
Node & NPM installed on the local development machine.
Any code editor of your choice.
React Dev Tools (optional)
A Butter CMS Account
A Snipcart Account (free forever in test mode)
A Stormkit Account

What is ButterCMS

ButterCMS is a SaaS start-up that delivers value to Developers and Marketers through a headless, API-based CMS (Content Management System) and blogging platform. Butter is a developer-friendly CMS that enables developers to build modern apps while also providing their marketing teams with the tools needed to make website content updates.

What is Snipcart

Snipcart is HTML based fully customizable shopping cart that you can integrate with any web stack in few simple steps and start accepting international payments in minutes. With Snipcart's management dashboard, you can track abandoned carts, sales, orders, customers, and more.

Snipcart works perfectly with Headless CMS like Butter and speeds up your development process, provides better security, and functionality to your ecommerce app.

What is Stormkit

Stormkit is a serverless hosting and deployment service for JavaScript applications. It enables you to focus on developing your application instead of wasting time by automating deployments, logs, hosting, scaling, TLS certificates and much more with state of the art best practices and features like multiple environments, staged rollouts, remote Config and snippets. This makes Stormkit something like a low-code frontend infrastructure service for developers.

How to Setup and Install React

In this tutorial, you will use Create React App template to quickly create the initial React app. Run the following command in the terminal.

npx create-react-app react-ecommerce-butter
cd react-ecommerce-butter
npm start

The last command, npm start, will start the React development server on your system's port 3000. Head over to http://localhost:3000/ in your browser to view your React app.

You can stop the development server by hitting CTRL+C in the terminal.

In this tutorial, you will use Chakra UI to style your ecommerce app. Run the following command to install Chakra UI.

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4 react-icons

Update src/index.js to wrap your react app with the ChakraProvider component.

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { ChakraProvider } from "@chakra-ui/react";

ReactDOM.render(
  <React.StrictMode>
    <ChakraProvider>
      <App />
    </ChakraProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

reportWebVitals();

Create a .env file to store ButterCMS and Snipcart API keys securely as environment variables. Run the following command to create the .env file.

touch .env

The next step is to create a free ButterCMS account. After creating an account, head over to https://buttercms.com/settings/ and copy the Read API Token.

Navigate to https://app.snipcart.com/register in your browser and create a free Snipcart account if you haven't already.

After creating the Snipcart account, head over to account settings and copy the PUBLIC TEST API KEY under Credentials.

Paste both Butter CMS API Key and Snipcart Public Test API Key in the .env file as shown below.

REACT_APP_BUTTER_ECOMMERCE=''
REACT_APP_SNIPCART_KEY=''

How To Create Products on Butter

In this section, you will create the products for your ecommerce app on Butter. In this tutorial, you will create an ecommerce platform named Cookie Jar, where customers can buy different varieties of cookies. Hence, the products for this ecommerce platform will be cookies.

Navigate to your Butter Dashboard and then create a new collection named cookies with the following fields.

id - Type: Number - isRequired
name - Type: Short Text - isRequired
description - Type: Long Text - isRequired
price - Type: Number - isRequired
image - Type: Media - isRequired

You can create an ecommerce app on any product like shoes, sports stuff, craft, etc. You can add additional fields like ratings, reviews, stock, etc., to your ecommerce app, but these are the bare minimum required for any ecommerce app.

You can add the fields by dragging and dropping the corresponding field types.

After adding the fields, click on the Create Collection button, name the collection cookies, and hit Save as a Collection.

You will also need to add some dummy data to the cookies collection. You can either copy the dummy data from https://yakscythe-49dgnn.stormkit.dev/ or add your favorite cookies.

Make sure to hit Publish after adding the cookies, aka products. You can come back and add more products or edit them whenever you want.

Here is how your cookies collection will look after adding products to it.

How To Fetch and Display Products

In this section, you will fetch the data from Butter CMS and display them as products on your ecommerce app.

You will use the buttercms library to fetch data from ButterCMS. Run the following command in your project's root directory to install buttercms.

npm i buttercms

Update App.js file with the following code.

import { useState, useEffect } from "react";
import Butter from "buttercms";

const butter = Butter(process.env.REACT_APP_BUTTER_ECOMMERCE);

function App() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const res = await butter.content.retrieve(["cookies"], {
        order: "name",
      });
      const { data } = await res.data;
      const allProducts = data.cookies;
      setProducts(allProducts);
    }
    fetchData();
  }, []);
  return (
    <div>
      {products.map((product) => (
        <div>
          <img src={product.image} alt={`${product.name}`} />
          {product.name}
          {product.price}
          {product.description}
        </div>
      ))}
    </div>
  );
}

export default App;

In the above code, you start by creating an instance of Butter using your ButterCMS API key stored in .env file and accessed using process.env.REACT_APP_BUTTER_ECOMMERCE.

Then you create a state named products to store the data fetched from ButterCMS using the useState() hook. Hooks are functions that use React features like defining a state without writing a class.

You fetch the collection named cookies using butter's .retrieve() method inside the React's useEffect() hook.

You then access the response from ButterCMS and store it inside the products state using the setProducts() method. Here is how the state products look like.

[
  {
    "meta": {
      "id": 125151
    },
    "id": "1",
    "name": "Biscotti Cookies",
    "price": 40,
    "description": "Biscotti actually means “twice baked” and the cookie is indeed baked twice, resulting in its hard and crunchy texture.",
    "image": "https://cdn.buttercms.com/UqbFGAJLTGqtYqF2UajV"
  },
  {
    "meta": {
      "id": 113778
    },
    "id": "2",
    "name": "Chocolate Chip Cookies",
    "price": 30,
    "description": "Chocolate chip cookies are the perennial classic and longtime fan favorite. ",
    "image": "https://cdn.buttercms.com/Xe1zfNvRCiOOI4LPuoVb"
  }
]

To display the product's data, you iterate over the products state using the .map() method and display the data on the page using curly brackets {}.

{
  products.map((product) => (
    <div>
      <img src={product.image} alt={`${product.name}`} />
      {product.name}
      {product.price}
      {product.description}
    </div>
  ))
}

Head over to http://localhost:3000/. Here is how your ecommerce app will look like.

Though your app needs styling, but you are getting all the required data from ButterCMS successfully. Now, you will use Chakra UI to style the app. Update App.js with Chakra UI components to style your ecommerce app.

import {
  Container,
  Text,
  Divider,
  Box,
  Image,
  Button,
  SimpleGrid,
  Flex,
} from "@chakra-ui/react";
import { FiShoppingCart, FiShoppingBag } from "react-icons/fi";
import { useState, useEffect } from "react";
import Butter from "buttercms";

const butter = Butter(process.env.REACT_APP_BUTTER_ECOMMERCE);

function App() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const res = await butter.content.retrieve(["cookies"], {
        order: "name",
      });
      const { data } = await res.data;
      const allProducts = data.cookies;
      setProducts(allProducts);
    }
    fetchData();
  }, []);

  return (
    <Container maxW="container.xl" h="100vh" >
      <Flex justifyContent="space-between" alignContent="center">
        <Text
          as="a"
          href="/"
          fontSize="2rem"
          color="gray.900"
          fontFamily="Robo"
          my="5px"
        >
          Cookie Jar
        </Text>
        <Button
          my="5px"
          colorScheme="green"
          variant="ghost"
          leftIcon={<FiShoppingBag size="24px" />}
          size="lg"
          p={2}
        >
          View Cart
        </Button>
      </Flex>
      <Divider />
      <Box mt={4}>
        <SimpleGrid
          minChildWidth="300px"
          align="center"
          justify="center"
          spacing="40px"
          mb={32}
        >
          {products.map((product) => (
            <Box
              bg="white"
              maxW="sm"
              borderWidth="1px"
              rounded="lg"
              shadow="lg"
              _hover={{ shadow: "dark-lg" }}
              key={product.id}
            >
              <Image
                h="350px"
                fit="cover"
                src={product.image}
                alt={`Picture of ${product.name}`}
                roundedTop="lg"
              />

              <Box p="6">
                <Flex
                  mt="1"
                  justifyContent="space-between"
                  alignContent="center"
                >
                  <Text
                    fontSize="2xl"
                    fontWeight="semibold"
                    as="h4"
                    textTransform="uppercase"
                    lineHeight="tight"
                    fontFamily="Roboto"
                  >
                    {product.name}
                  </Text>
                  <Text
                    as="h4"
                    fontSize="2xl"
                    fontWeight="bold"
                    color="teal.600"
                  >
                    ${product.price}
                  </Text>
                </Flex>

                <Text
                  mt={2}
                  color="gray.500"
                  display={{ base: "none", md: "flex" }}
                >
                  {product.description}
                </Text>

                <Button
                  leftIcon={<FiShoppingCart size="24px" />}
                  size="lg"
                  mt={4}
                  isFullWidth
                  colorScheme="blue"
                  variant="outline"
                  alignSelf={"center"}

                >
                  Add to Cart
                </Button>
              </Box>
            </Box>
          ))}
        </SimpleGrid>
      </Box>
    </Container>
  );
}

export default App;

In the above code, you import different Chakra UI components like Container, Flex, etc., and use them to style your app. Except for styling, the code used to fetch and display the data on the app remains the same.

In this tutorial, we will not discuss how these components are used in-depth; you can refer to official Chakra UI docs to learn more about these components.

Here is how your app will look.

You have created two buttons in the above code, View Cart, which shows users their cart, and Add to Cart, which adds the product to the cart. These buttons don't work yet; you will integrate them with Snipcart in the next section.

How To Integrate Snipcart With React App

In this section, you will configure and integrate Snipcart with your ecommerce app.

Update public/index.html file and add the following code inside the <Head> tag.

<link rel="preconnect" href="https://app.snipcart.com">
<link rel="preconnect" href="https://cdn.snipcart.com">
<link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.2.0/default/snipcart.css"/>

Now, add the following code in public/index.html before closing <Body> tag.

<script
  async
  src="https://cdn.snipcart.com/themes/v3.2.0/default/snipcart.js"
></script>
<div
  id="snipcart"
  data-config-modal-style="side"
  data-api-key="%REACT_APP_SNIPCART_KEY%"
  hidden
></div>

The Snipcart API Key stored in .env file is being accessed in the above code using %REACT_APP_SNIPCART_KEY%.

Update Add to Cart button in src/App.js like this.

<Button
  leftIcon={<FiShoppingCart size="24px" />}
  size="lg"
  mt={4}
  isFullWidth
  colorScheme="blue"
  variant="outline"
  alignSelf={"center"}
  className="snipcart-add-item"
  data-item-id={product.id}
  data-item-image={product.image}
  data-item-name={product.name}
  data-item-url="/"
  data-item-description={product.description}
  data-item-price={product.price}
>
  Add to Cart
</Button>

In the above code, you pass the data required by Snipcart, like the product's name, id, description, etc.

Here is the Add to Cart button in action.

Finally, update the View Cart button like with className="snipcart-checkout".

<Button
  my="5px"
  colorScheme="green"
  variant="ghost"
  leftIcon={<FiShoppingBag size="24px" />}
  size="lg"
  p={2}
  className="snipcart-checkout"
>
  View Cart
</Button>

This button will show the current items in the cart to the user.

Run the following commands in the terminal to commit your code.

git add .
git commit -m"Finished building the React Ecommerce app"

How to Deploy your Ecommerce App with Stormkit

In this section, you will deploy the ecommerce app with the free tier of Stormkit.

The first step is to push your code to a GitHub repository. Create an account on https://github.com/ if you haven't already.

Navigate to https://github.com/new and create a new GitHub repo with react-ecommerce-butter as the repo name. You can skip other fields for now. Finally, click on the Create repository button.

On the next page, you will be provided with the code to push your code to GitHub. Copy the commands from the second section, i.e., ...or push an existing repository from the command line section.

The commands will be similar to this but will contain your GitHub username.

git remote add origin https://github.com/lelouchB/react-ecommerce-butter.git
git branch -M main
git push -u origin main

The last command will push your code to GitHub. Head over to https://app.stormkit.io/auth and login using GitHub OAuth.

Click on the GitHub icon under Where can we find your codebase?

You will be asked to connect your repositories with Stormkit. You can choose to connect all your repositories or select only the react-ecommerce-butter repo.

Select the react-ecommerce-butter repository and proceed further.

You will be redirected to your Stormkit dashboard, where your newly connected app would appear. Select the app you want to deploy.

On your app dashboard, you will be provided with a default production environment. You can create as many environments as you want. In this tutorial, we will deploy using the default production environment.

Before deploying, you will need to set the environment variables in your production environment; else your deployment will fail.

Click on the production environment.

Now, click on the Edit button or the pencil icon to edit the environment configurations.

A modal will appear with current environment configurations.

Scroll to the bottom of the modal; you will see the Build configuration and Environment variables sections.

Under Build configuration, type build under Public folder field and add npm run build command under Build command field.

Under Environment variables, add REACT_APP_BUTTER_ECOMMERCE and REACT_APP_SNIPCART_KEY environment variables with their values and click on the Update environment button.

Finally, click on the Deploy now button to deploy your app.

A modal will appear to select the environment, select the production environment and click on Deploy now.

The Deploy now will trigger the deployment process, which you can see live on your dashboard.

After the deployment process completes, you will be provided with a preview URL of your deployed website.

If the preview looks good, you can publish it to production by going to the Deployments tab and clicking on the triple dots across the latest commit, i.e., Finished building the React Ecommerce app.

A modal will appear, deselect the sync sliders option and then scroll the bar to 100%, i.e., to the end. Finally, click on Publish to production button to publish the app.

Congratulations, your ecommerce app has been deployed. You can see the deployed version of this project here.

Conclusion

In this tutorial, we learned how to build an Ecommerce App with React.js using ButterCMS and Snipcart. Finally, we deployed our ecommerce app with Stormkit. You can follow this tutorial and create your own version of this project.

Here are a few ideas to get you started:

Style the app using other UI libraries like React Bootstrap, Material UI, etc.
Integrate a Payment Gateway like Stripe.
Add Authentication Portal with Auth0.

Here are some additional resources that can be helpful:

Happy coding!

Deploying a full blown React website with Stormkit and Storyblok

Savas Vedova — Thu, 07 Nov 2019 06:13:10 +0000

I’ve been using my website as a place to share my CV so far. It's a create-react-app bootstrap hosted on Stormkit. Lately, I’ve decided to add a blog section to it. A friend of mine was using Storyblok and talking good about it so I wanted to give it a shot. In this tutorial I’ll share what it took for me to implement the blog section.

Workflow

After updating the code, I simply push to Github. Stormkit receives an event and builds the website. Once the deployment is successful, it automatically publishes it. So all I have to do is to merge to master. To update the content, I use StoryBlok. Pretty cool and intuitive CMS. Using a combination of StoryBlok and Stormkit, I can preview the changes of the blog post directly on the website and then publish the content.

Let's get started

I'll assume you already have an application bootstrapped. I've used create-react-app for this, but you can use whatever you feel comfortable with.

First of all, let's install the requirements:

yarn add storyblok-js-client react-markdown

These packages will be used to make an API call to Storyblok to fetch the content, and to transform the returned markdown into a react component. More on this will come later.

Second, make sure to have either a Github or Bitbucket account and push the repository to one of these providers. We’ll use this to connect our repository to Stormkit and deploy our website.

Prepare the content

First head to Storyblok, create an account if you haven't and create a workspace.

Create a new space and choose Headless as the type. Next, we’ll be adding a new folder. You can group your content using folders. Click on the + Folder button and name your folder. In my case I picked posts as a name. Leave the other settings empty. Afterwards, click on + Entry button and create a new entry. Pick a title and a slug for the entry. You’ll be using the slug to read it from the URL and fetch the content, therefore pick something that is SEO compatible.

After you have created the folder and your first entry, you can define the schema for your posts. Click on Define schema and specify the fields that you will need. By default, Storyblok creates a body field with a default field type. Change that to markdown. After, you can add all the fields you will need. In my case, I have added a keywords, title, short content and description field**.** The ‘keywords’ and ‘description’ fields are used for SEO meta tags and the ‘short content’ is used for displaying a short description to the user when listing the latest entries.

To add new entries, you will be using the + Entry button again on the entries page. Make sure that the posts is selected when adding new entries.

The code

Storyblok comes with a JS library that helps us making requests and retrieve content. At the beginning of this blog post, we have installed its official package. We'll using that one to make requests. Since the same client will be used across the application, I decided to create a global context and pass the client around with this context. I’ve created a file that exports the provider and a helper function to inject the context values.

// App.context.js

import React, { createContext } from "react";

const context = createContext();

export default {
  Provider: context.Provider,

  withConsumer: Component => props => (
    <context.Consumer>
      {(value = {}) => <Component {...props} {...value} />}
    </context.Consumer>
  )
};

Now let's create the provider and pass down the client object that we’re going to create at application load. The code is commented for further information.

// App.js

import React from "react";
import context from "./App.context";
import StoryblokClient from "storyblok-js-client";


// Create the Storyblok client. You can obtain the API-Key from 
// the Storyblok dashboard, by clicking on Settings and then api keys tab.
const Storyblok = new StoryblokClient({
  accessToken: "<your_api_key>",
  cache: {
    clear: "auto",
    type: "memory"
  }
});

const App = () => (
  // Wrap the application with a global context, and pass down the Storyblok client.
  // If we decide to add server-side rendering, we can create a new instance per request 
  // and pass it down the client without a race condition.
  <context.Provider value={{ storyblok: Storyblok }}>
    {/* your app goes here */}
  </context.Provider>
);

export default App;

Finally, we need to fetch the content. To do so, we need to connect the component that will display the latest blog entries to the context, retrieve the client and use the Storyblok API to fetch the items. Here is how:

// Posts.js

import React, { useEffect, useState } from "react";
import context from "./App.context";
import Markdown from "reach-markdown";

let unmounted = false;

const Posts = ({ storyblok }) => {
  const [entries, setEntries] = useState();

  useEffect(() => {
    // After the first call entries will be an array. 
    // Do not re-fetch after the first call.
    if (typeof entries !== "undefined") {
      return;
    }

    Storyblok.get("cdn/stories", {
      starts_with: "posts/",
    }).then(response => {
      // If there is a race condition and the component is unmounted before
      // the api call is completed, do not update the state as React will 
      // complain about memory leak.
      if (unmounted === false) {
        setEntries(response.data.stories || []);
      }
    });

    return () => {
      unmounted = true;
    }
  }, [storyblok, setEntries, entries])

  if (typeof entries === "undefined") {
    return "Nothing found.";
  }

  return (
    <div className="posts">
      <h2>Latest entries</h2>
      {entries.map(entry => (
        <div className="post">
          <div>{entry.content.title}</div>
          <div>
            <Markdown source={entry.content.body} />
          </div>
        </div>      
      ))}
    </div>
  )
}

export default context.withConsumer(Posts);

Deploying the application (manually)

Disclaimer: Once you have configured the environment (manually or through stormkit.config.yml), you can deploy automatically on each commit. In this tutorial, I'll show how to deploy manually.

In order to deploy our application, we’re going to use Stormkit. It makes deploying and managing web applications extremely easy. With Stormkit you can create isomorphic applications that have multiple environments, publish new versions to a percentage of users, implement remote configuration and conduct experiments with a/b testing. Autoscaling and TLS certificates are included and you don't have to worry about it.

Let's move on an connect our application:

Go to app.stormkit.io and select your provider
Once logged in, Stormkit will ask you in which provider your codebase is located. Click on the provider once more.
If Github, click on ‘Connect more repositories’ and grant access to Stormkit.
Next select your repository and now it's connected.

Once you have followed the steps above, you’ll be presented a page where you see the production environment:

Click on Details under the production environment. You’ll be brought to a page where you can deploy your application. On top right of the screen you’ll see a Deploy now button. Click on that. If you’ve bootstrapped your application using create-react-app the default settings should be enough. Otherwise check here for relevant documentation for configuring your environment.

Once you have deployed your application, Stormkit will generate a URL for you. Preview your application using that link. Later, you can connect your domain and publish this deployment so that the users will start to see that version of your application. You can also do staged rollouts by publishing multiple versions at the same time.

Conclusion

If you were able to follow until here, you should now have a serverless application that is hosted on Stormkit, and the backend is provided by Storyblok. All of this without touching a single line of server configuration. Pretty neat, huh?

To sum up; in essence we:

Created a workspace with Storyblok
Connected our repo to Stormkit for deployments
Installed requirements
Created a global context to pass down the Storyblok client and
Fetched the latest entries using the Storyblok client

Hope you enjoyed the tutorial. Follow me on twitter if you have any remarks, questions, or simply want to connect.

Disclaimer

I'm the founder of Stormkit and I am strongly biased towards the tool. However, this doesn't mean what I say about the tool is exaggerated 😜

Original Post: https://vsk.me/blog/deploying-a-full-blown-react-website-with-stormkit-and-storyblok