Developing web extensions with the CLI

Develop, deploy and manage web extensions with the Skedulo CLI.

All sections in this guide require that you have the Skedulo CLI installed.

Develop a web extension

These instructions will describe how to develop an existing web extension using the Skedulo CLI.

Prerequisites

  • An understanding of Typescript and React.
  • Source code of the web extension on your computer.
  • A self-signed SSL certificate to run the development server:
    1. Run the command sked web-extension generate-ssl-cert
    2. Follow the prompts
    3. Some certificate files will be created into ~/.localhost-ssl/
    4. Install the certificates rootCA.pem and server.crt into your operating system and set as trusted. On macOS you can double-click the files to add it to Keychain Access and then set the trust to “Always Trusted”.

Steps

  1. Run the development server with this command:

    sked web-extension dev location-of-extension-code

    With everything aligned correctly you should be able to confirm that the server is running by executing curl --verbose https://localhost:1929/ and see a response along with SSL certificate verify ok.

    If there are any issues:

    • Check the output of the sked CLI.
    • If sked web-extension dev appears to be running successfully, then also confirm that a server is running at http://localhost:3000/ – this is the underlying server provided by the web extension.

  2. Now to view the web extension, open and login to your Skedulo team in your browser and navigate to /c-dev. The URL will look something like https://teamname.my.skedulo.com/c-dev.

    Skedulo will connect to the server on port 1929 and load the web extension, so you should see the result. For example:

    Web extension within Skedulo

    If there are any issues:

    • Check through the browser’s developer console and network for any related errors.

  3. Make any required changes to the project code. You should be able to see the CLI automatically recompile the extension.

  4. In the Skedulo web app, click the Reload button in the upper-right of the page to quickly reload the contents of the page.

    Updated web extension page

  5. Type Ctrl+C in the CLI terminal when finished to stop the servers.

Deploy a web extension

Web extensions can be created and updated on a Skedulo tenant like any other Skedulo artifact. Learn about working with artifacts.

Prerequisites

Steps

  1. Confirm if the web extension project has a state.json file in the root directory. This file is used to define that the web extension is also a Skedulo artifact.
    • If the file does not exist, then create state.json with this content: 
      {
  "metadata": {
    "type": "WebExtension"
  },
  "name": "<Put name from sked.proj.json here>",
  "source": "."
}
  2. Initiate the extension deployment by running: 
    sked artifacts web-extension upsert -f location-of-extension-code/state.json
  3. The extension will need some time to build and install. This can be monitored if your Skedulo tenant has the manager installed and navigating to /c/g/manage-pkg.

Managing web extensions

Web extensions can be created, updated and deleted via the CLI. Explore the available options by running:

sked artifacts web-extension --help