Repository files navigation

NAP Portal allows you to create a web-interface to control your NAP application. It connects to the WebSocket server hosted by the application and generates a user interface in the browser.

Please refer to theNAP Framework documentation for a complete guide on how to set this up on the application side.

Note that usage of this package still requires you to setup your own front-end architecture. For a more complete implementation, have a look atNAP Dashboard.

Install the package from NPM:

$ npm install nap-portal --save

Thenap-portal package comes with full TypeScript support.

Import the required components from the package:

import{NAPWebSocket,NAPPortal}from'nap-portal';

First start a connection with the WebSocket server running in your NAP application. Make sure that the configuration you pass here is complete and matches with the setup on the application side.

constnapWebSocket=newNAPWebSocket({host:'localhost',port:2000,user:'napuser',pass:'letmein!',secure:false});

Then you can render the web-interface for a NAP portal component in an HTML element of your website. Make sure that theportalId matches with a portal component ID in your NAP application.

constnapPortal=newNAPPortal({el:document.getElementById('my-portal'),portalId:'MyPortalID',napWebSocket:napWebSocket,});

You can create multiple portals simultaneously, or create your own pagination and render a portal per page. In order to free up resources, make sure to destroy the portal when it's no longer required:

napPortal.destroy();napPortal=null;

When making changes to NAP Portal itself, it's useful to have those changes automatically transpiled from TypeScript and loaded inNAP Dashboard or your own custom implementation. This way you can ensure everything works before creating a PR and going through the publishing workflow.

For this to work, you first need to set up a global symlink in this repository using:

# path/to/nap-portal$ npm link

Then, in another repository (likeNAP Dashboard), you can use that symlink instead of the public package from NPM, using:

# e.g. path/to/nap-dashboard$ npm link nap-portal

Any changes in the/lib folder will now be reflected in the project which is using the symlink instead of the public package. When you start making changes innap-portal, you can start transpiling TypeScript automatically on change using:

# path/to/nap-portal$ npm start

When you want to stop using the symlink in the other repository, you can remove the link using:

# e.g. path/to/nap-dashboard$ npm unlink nap-portal --no-save$ npm install

Documentation is built from comments in the codebase usingTypeDoc. Updates to the documentation are pushed to Git so they will be displayed in GitHub Pages. Documentation can be rebuilt using:

$ npm run docs

Admin users only

Before publishing, make sure to rebuild the documentation (see above) and commit the changes if any.

It's recommended to usenp for publishing new versions, to ensure all steps are taken care of.

• Make surenp is installed globally
• Make sure you're autenticated with NPM
• Runnp to select the new version number and publish

npm install --global npnpm loginnp --no-2fa --no-release-draft