PlatformGuides

Code Packaging and Deployment

Suggest Edits

Streamlabs will be manually reviewing all applications and because of this we have some simple requirements for your application bundle. If you follow the guidelines from this document then we will be able to quickly review and approve your application when it comes time to release.

Application bundle requirements

  • .zip archive with your application
  • manifest.json file should exist
  • We will manually review your code so you should provide both the fully built application files that will be released on our CDN, as well as the original source code used to generate the built application (if using webpack or similar). It will also help if you provide a Readme file outlining the structure of your application. The original source code will be removed before we upload it to our CDN, so the original code can remain secure and proprietary.
  • Remove npm's node_modules folder before submitting your code (if you are using npm)
  • Your application should be CDN-ready - details below

Project structure example

For example, if you are using a common build tool such as webpack and one of the modern frontend frameworks, your project structure would look something like this:

|-- application.zip
    |-- dist/
        |-- application.js
        |-- index.html
        |-- application.css
    |-- src/
        |-- components/
        |-- App.js
    package.json
    manifest.json

Don't forget to remove the node_modules folder before packaging for submission.

Keep in mind that if you are using a build tools, you should provide a buildPath property in your manifest.json file ( more details about manifest file ). We will use this property to upload only dist file to our CDN, without your source code.
For example:

{
  "name": "Streamlabs Widget",
  "version": "0.0.1",
  "buildPath": "dist/"
  ...

This means that only the dist/ folder will be uploaded to the CDN, and this will be a root of your project.

If you don't use webpack or other build tools and frameworks, your bundle would just contain your final application files. If separate source code was not provided, we will expect all of these files to be in easily human-readable form, and not compiled using tools of any kind.

|-- application.zip
    |-- index.html
    |-- manifest.json
    |-- application.js

All applications require a manifest.json file to function properly. The manifest.json file should always be in the root of your bundle, as it tells us where to find the rest of your files.

How our CDN works

If you are familiar with CDNs and have expertise of how to setup a SPA project to be hosted from CDN, you can skip this section.

If you are not using a webpack or other build tools and have a simple vanilla-js project, you can also skip this section.

Modern JavaScript frameworks often use a special placeholder, commonly named <%= BASE_URL %>. It is used to mark a root folder of your application and used to find assets and scripts, e.g.
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
By default, this property is set to / that means that assets will be served from the root of your domain. For CDN deployments this is incorrect and you should override this in your build files.
For example, as said in Vue Cli documentation:

By default, Vue CLI assumes your app will be deployed at the root of 
a domain, e.g. https://www.my-app.com/. If your app is deployed at a 
sub-path, you will need to specify that sub-path using this option. 
For example, if your app is deployed at https://www.foobar.com/my-app/, 
set baseUrl to '/my-app/'.

The value can also be set to an empty string ('') or a relative path (./) 
so that all assets are linked using relative paths. This allows the built
bundle to be deployed under any public path, or used in a file system 
based environment like a Cordova hybrid app.

For our deployments, you should always set this property as . or as ./ - it should search assets by relative path, not from the absolute one.

For example, if you are using a vue-cli project, you should create a vue.config.js file and add this:

module.exports = {
  baseUrl: "./"
}

For React applications that are made using create-react-app you should override a homepage property in a package.json file:

{
  "name": "widget-test",
  "version": "0.1.0",
  "homepage": ".",
  ...

If you are using a raw webpack config, override the output.publicPath and set it to ./.

Documentation for frameworks:

🚧

Public Path

Please, don't ignore or forget about this setting. Otherwise, your assets and js files will be unavailable via CDN and 404 will be returned. If this or similar property is not set it means that your application is not ready for CDN deployment and a high chances that it wont work and we will reject your submission.

CORS

If your web server has CORS enabled, you may need to whitelist the domain that your app is served from. In a development environment, apps will be served from localhost. In a production or beta environment, apps will be served from platform-cdn.streamlabs.com.

Updated about 5 years ago