Test a Custom Widget

Last modified: 17 December 2019

First, upload your widget to a development server.

You can use any server software that hosts static files, like webpack. If you use this option, the development server must provide a special header that gives the widgets playground access to load the content. This header is set in the webpack-config for the webpack-dev-server. For example:
```
devServer: {
    headers: {
        'Access-Control-Allow-Origin': '*'
    }
},
```
You can also run a static server on a local directory using npm http-server (requires Node.js). For example, the following command installs the http-server globally and serves the content that is stored in the widget-folder directory on port 9002.
```
npm install http-server -g
http-server ./widget-folder --cors -c-1 -p 9002
```
You can then load the widget into the widgets playground from the http://localhost:9002/ address.

Whichever option you use, you will need to serve the widget over HTTPS. For more information, see Testing Widgets over a Secure Connection.
Open the widgets playground page.
- In the Server Settings section of the Administration menu, select Custom Widgets.
- Click the Widgets playground link.
Enter the web address for your custom widget in the input field.
Click the Load widget button.
- The widget is loaded and displayed in the widgets playground.

Testing Widgets over a Secure Connection

If you use webpack, you can pass the --https option in the command that you use to run the development server. The server will have self-signed certificate, so you might need to add it to the list of trusted certificates on your local machine. For more information, refer to the webpack examples for https.
You can expose your local server to the internet over HTTPS with a valid SSL certificate using ngrok or a similar tunneling reverse-proxy. To run ngrok, refer to the download and installation instructions for your operating system.

The following example shows you how to run the development server and expose it to the web for macOS and Linux:
```
# Run your dev server, for example:
http-server ./widget-folder --cors -c-1 -p 9002
# Expose this port
ngrok http 9002
```
The ngrok service generates a secure public URL that you can use to load your widget in the widgets playground page.