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.
- CLI for manual deployments or continuous delivery
- Dashboard for browsing deployed applications and components
- Web Component delivery to downstream web applications
- Deployment versioning using Semantic Versioning
- Environmental Variable Injection
- Ad hoc deployments
- Dynamic Swagger Documentation http://localhost:3000/documentation
- manifest.json files are used to display app information in the CastleBlock UI
- OAuth support for many oauth providers for user authentication.
- JWT for authorization
- Reverse Proxy for microservices in your environment
- TLS Support
- Run castleblock-service or use an existing instance
- Deploy your project with castleblock-cli
castleblock deploy
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.
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>
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>
Check out the backlog of planned features, PRs are welcome.