Build, Test & Debug your Add-on
Building your Add-on
The add-on project has to be built separately, because it is not explicitly referenced by the "Sana.Commerce.WebApp" project. It is also not built automatically when a Build solution command is executed in Visual Studio. But, Sana is always watching for any changes to such packages, so that when the project is rebuilt, the web store is automatically restarted.
Note
The client-side JavaScript code is not compiled during the .NET project build, but is automatically bundled for development using the WebpackDevServer, which is run by the "Sana.Commerce.WebApp" project when launched. Make sure that in WebpackDevServer section in your current JSON settings file (appsettings.Development.json or appsettings.User.json) property Enabled is set to true. Any changes to any client-side add-on files are picked up on-the-fly by the WebpackDevServer, which also forces the browser page to reload.
Build your Add-on project by selecting Build or Build Solution from the menu bar, or by pressing Ctrl + Shift + B.
Testing your Add-on
Run the solution in Debug mode and wait for Sana to start, then follow these steps:
- Log in to the Sana admin portal.
- Click on "Apps" in the left-hand menu, then select "Add-ons" from the submenu. For more information on the "Add-on" screen, click here.
- Navigate to the "Upload" tab and select the assembled add-on package file with the extension
.sanapkg.
- Your add-on should now be visible under the "Add-ons" tab.
- Perform the some smoke tests to verify your Add-on is working correctly.
The newly developed add-on is automatically loaded by Sana Commerce in a so called "Development Mode", since it is located under the "Addons" SDK directory, which is configured to contain add-ons under development. That's also the reason why such add-ons cannot be uninstalled from the Sana Admin.
This approach simplifies the add-on development cycle by avoiding extra steps of assembling the add-on into a real add-on package and re-installing it into the web store.
Since the add-on is already pre-installed, it can be directly tested. Create or edit any flexi-page with a new "Heading" Content Block in the Admin and check how it is rendered in the web store.
What's next?
Continue with packaging your Add-on.