Skip to content
This repository has been archived by the owner on Jul 21, 2023. It is now read-only.

greymatter-io/castleblock

Repository files navigation

CastleBlock is a platform to host web applications and web components in one place. It's ideal for enterprise environments with multiple web applications that share common web components (with multiple versions).

CastleBlock consists of a CLI, a service, and a dashboard. The CLI packages and uploads the web assets to the service. The service organizes the web assets and supports multiple hosted versions. The dashboard displays all of the deployed web assets in a catalog so components can be discovered and reused by other application developers.

With the castleblock watch command developers can do development work in the cloud. CastleBlock enables hot-reloading and deployments to staging and production environments in real-time. Gone are the days of running microservice dependencies locally or setting up a reverse proxy to microservices.

diagram of castleblock high level concept

Features

Quick Start

castleblock deploy

Sharing Web Components

CastleBlock lets you deploy web components that can then be integrated into your web applications. Rather than transpiling the component directly into each application you can deploy the individual components and load them at runtime. This allows the components to be developed and redeployed independently of your applications.

diagram of shared web-components

Example Svelte Web Component

Making really small light weight web components in Svelte is easy; just define the tag at the top of your component. For a full example see simple-clock.

<svelte:options tag="simple-clock" />

<script>
  import { onMount } from "svelte";
  export let size = 15;
  let now = new Date();
  let out = `00:00:00`;
  function dd(num) {
    return num < 10 ? `0${num}` : num;
  }
  onMount(() => {
    setInterval(function () {
      now = new Date();
      out = `${dd(now.getHours())}:\
            ${dd(now.getMinutes())}:\
            ${dd(now.getSeconds())}`;
    }, 500);
  });
</script>

<div style="font-size:{size}px;">{out}</div>

Integrating Web Components

Just include the bundled web component in the index.html file of your web application and then you can use the tag anywhere in your app. Then at load-time, the latest version of the components will be loaded. There is no need to rebuild the downstream app anytime the component gets updated.

<html>
  <head>
    <title>Web App A</title>
    <script src="/ui/simple-clock/latest/simple-clock.js"></script>
  </head>
  <body>
    <simple-clock></simple-clock>
  </body>
</html>

Contribute

Check out the backlog of planned features, PRs are welcome.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors 4

  •  
  •  
  •  
  •