Skip to main content

Setup Livecycle SDK

For Livecycle to work properly with your existing preview environments there are two actions that need to be done:

  • Add Livecycle SDK your web application - Livecycle need to be added either by script or as npm package, and need to be initialized with LivecycleSDK.init() on application load.

  • Setup automation to link your preview environment to Livecycle - Livecycle need to be notified on any new preview environment to serve the right collaboration context. The details for the preview environment includes the git context (repository, branch, sha, etc...) and the environment status (state, url, etc...)

Add Livecycle SDK​

Adding Livecycle sdk as a script is pretty straight-forward, just add these two lines to your page header.

<script src="https://unpkg.com/@livecycle/sdk@stable/dist/browser/index.js"></script>
<script>
  LivecycleSdk.init().catch(console.error)
</script>

It can also be done via Google Tag Manager or other script injection solution.

It's also possible to install Livecycle SDK as an npm package (@livecycle/sdk), this gives a bit more flexibility but may require some tweaking in different frameworks. You can look at the different framework installations examples for reference.

Performance/Security considerations​

Livecycle's SDK is optimized for low overhead when Livecycle collaboration is used. Yet, in sensitive applications it's recommended to load and init LivecycleSDK only in non-production environments.

Livecycle currently support two modes of setting up automation for preview environment linking.

Automatic linking via pull request context -

  • Livecycle will search for relevant preview environment details by analyzing your PR
    Livecycle can detect preview environments from various vendors (supported platforms)) and generic github deployments that are created via Github API.
    The configuration for PR autolinking is triggered in Livecycle's installation wizard once a Preview environment is detected.

  • Preview environment linking using Livecycle CLI
    Livecycle CLI can be used to link preview environments to Livecycle in your CI process. You can look at different examples of CI integrations, and the CLI documentation on npm