WebApps 2

Getting started with WebApps

A WebApp is a custom module for Sitevision and is our take on a Micro Frontend.

Since 9.0 Sitevision WebApps enables developers to use Sitevision APIs in combination with popular UI libraries (such as React) - all bundled together with webpack.

Create Sitevision App

To quickly get started with bundled apps in Sitevision we recommend using the Create Sitevision App project. Bundled WebApps created from Create Sitevision App will generate a boilerplate app based on React with two dependencies:

  1. @sitevision/sitevision-script - provides deployment scripts and Sitevision optimized webpack build configuration. This means you can focus entirely on your code rather than tedious build configuration.
  2. @sitevision/api - provides TypeScript definitions for Sitevision's Public API, which means you will get IntelliSense support when working with Sitevision's Public API.

Please refer to the Create Sitevision App Readme on how to get started using the tool.

The anatomy of a WebApp

A WebApp consists of up to three entry points and other static resources.

Entry points

  • index.js *mandatory
    • Entry point for server side bundle
  • main.js *mandatory
    • Entry point for client side bundle
  • hooks.js
    • Entry point for pre render hooks bundle (server side)
  • headless.js
    • Entry point to describe the WebApp in a headless context (server side)

Static resources

  • manifest.json *mandatory
    • Contains metadata for a WebApp, such as version and id
  • i18n/
    • i18n bundles using a JSON format
  • config/
    • Put user configuration files here
  •  .dev_properties.json
    • Only used during development for easy deployment
  • appDataDefaults.json
    • Default values for WebApp configuration
  • resource/
    • Folder for resources to enable some convenience methods

SDK

Many utilites and APIs are available when working with WebApps. Check out the SDK documentation.