Dev Mode

What if you could develop, test, and run your own plugins directly on the SmartpointCloud.com without installing all the environment on your computer? The DevMode enables it; it allows you to connect your local development environment with SmartpointCloud.com and inject your plugins into the web.

How it works

There are two parts involved in the developer mode:

• The smartpoint.com applications at http://smartpoint-dev3.tvlport.com.

• Your plugin development environment. We assume that you have a web server opened in your machine at https://localhost:8080

The plugin's load has two steps:

1. It loads standard pos web plugins.

2. It loads your dev plugins from your local web server.

In case of conflict, the last loaded version is what gets loaded in Smartpoint Cloud.

This ensures a pleasant environment with all main functionalities. It adds and loads your dev-plugins, and if it is necessary, replaces existing plugins with your dev-plugins. Although it only contemplates one single plugins.json, you can add several plugins.json.

The mixed content issue

Browsers prevent, on HTTPS environments, loading assets from HTTP end-points. This is the Mixed content policy. The policy is only relaxed, to the date of this document, in the following cases:

• Firefox 84 and later allow loading of mixed content on http://localhost/ and http://*.localhost/ URLs, as these are now mapped to loopback addresses.

• Chrome also allows mixed content on http://127.0.0.1/ and http://localhost/.

• Safari does not allow any mixed content.

This will block the loading of plugins from HTTP servers, including localhost with ports outside the standard HTTP port 80. Hence, to have a HTTP server on an unprivileged port and a cross-browser server, we need to have a HTTPS server from where our local plugins are loaded. HTTPS servers require certificates signed by a Certificate Authority (CA) accepted by browser. In many cases, that won't be possible and we need to create our CA, create certificates signed by our CA and have them accepted by the we browser.

Create our own CA with mkcert and install them

In this section we will show how to create our CA with mkcert, generate.

1. Follow the install instructions for your operating system (OS).

2. Create the key and certificate of localhost:

   Copy

   $ mkcert -key-file dev-mode-localhost-key.pem -cert-file dev-mode-localhost-cert.pem localhost
   
   Created a new certificate valid for the following names ��
    - "localhost"
   
   The certificate is at "dev-mode-localhost-cert.pem" and the key at "dev-mode-localhost-key.pem" ✅
   
   It will expire on 11 November 2024 ��

3. Set the devkit-scripts-serve configuration to provide the keys to devkit-scripts serve. using devkit-config:

   Copy

   $ devkit-config devkit-scripts-serve set certificate ./dev-mode-localhost-cert.pem

   Copy

   $ devkit-config devkit-scripts-serve set key ./dev-mode-localhost-key.pem

Setup

This documentation assumes that you know to create a plugin and you have access to a live environment. Those environments can be http://smartpoint-dev3.tvlport.com, http://smartpoint-dev1.tvlport.com, or any dev environment.

In this example, we have used the createProject script to generate a plugin to show how DevMode works.

Step 1: Start your local development server.

Start your local development server. It expects your web development server in the localhost port 8080.

Follow the tutorial createProject from devkit-scripts can be used as well with a template. Modify where you want your component to be rendered:

uiHelper.addChildToComponent('Shell', {
  componentName: 'HelloWorld',
  order: 3,
  props: { position: 'CONTENT' },
});

Open https://localhost:8080/plugins.json to verify its contents.

Step 2: Add the route of your plugins.json

1. Open http://smartpoint-dev1.tvlport.com and click on the wrench in the lower left toolbar.

   

2. Click "Add URL".

   

3. Write the URL of your tunnel end for your plugins.json. In this example, it is https://localhost:8080/plugins.json.

   

4. Click "Save URLs".

Step 3: Restart

Restart the browser.

If everything is ok, you should be able to see your plugin in action.

This example replaces the POSWeb 'Main' component with a Hello World component.

Troubleshooting

If it does not work, try the following:

• Click on the DevMode tool (the wrench), and verify that the URL is present.

• Inspect the SP.COM page, reload, and verify that everything is loaded correctly in the network tab.

• Open in the browser your local plugins.json. Assuming that it is served in the port 8080, open the URL https://localhost:8080/plugins.json. Ensure that not certificate errors are reported and that a list of package.json is served.