npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@nebula.js/cli-serve

v5.0.1

Published

Basic web development server for nebula.js visualizations.

Downloads

1,758

Readme

@nebula.js/cli-serve

Basic web development server for nebula.js visualizations.

Install

npm install @nebula.js/cli @nebula.js/cli-serve -g

Usage

CLI

nebula serve -h

Start a development server

Options:
      --version             Show version number                        [boolean]
  -c, --config              Path to JSON config file
                                          [string] [default: "nebula.config.js"]
      --entry               File entrypoint                             [string]
      --type                Generic object type                         [string]
      --build               Build the nebula visualization into /dist dictionary
                                                       [boolean] [default: true]
      --host                Specify a host to use[string] [default: "localhost"]
      --port                Specify a port number to listen for requests on
                                                                        [number]
      --disableHostCheck    Bypasses host checking    [boolean] [default: false]
      --keyboardNavigation  Whether or not Nebula handles keyboard navigation
                                                      [boolean] [default: false]
      --resources           Path to a folder that will be served as static files
                            under /resources                            [string]
      --scripts             Array of scripts to inject                   [array]
      --stylesheets         Array of stylesheets to inject               [array]
      --enigma.host         Set host to communicate with Qlik Associative Engine
                                                 [string] [default: "localhost"]
      --enigma.port         Set port to communicate with Qlik Associative Engine
                                                        [number] [default: 9076]
      --clientId            Tenant's clientId for OAuth connection      [string]
      --webIntegrationId    Tenant's webIntegrationId for connection    [string]
      --fixturePath         Path to a folder that will be used as basis when
                            locating fixtures
                                            [string] [default: "test/component"]
      --mfe                 Serves bundle to use in micro frontend
                                                      [boolean] [default: false]
  -h, --help                Show help                                  [boolean]
      --open                Open up in browser         [boolean] [default: true]

Example

Start the server and connect to enigma on port 9077

nebula serve --enigma.port 9077

Config file

nebula.config.js

module.exports = {
  serve: {
    ...,
  },
};

Serve properties:

  • types: Additional types to load into the serve instance. Useful in conjunction with useEmbed.
    • ex: types: [{ name: 'barchart', url: "https://unpkg.com/@nebula.js/sn-bar-chart"}],
  • themes: Theme files to load
    • ex: themes: [{ id: 'sense', theme: { /* valid sense json theme */ } }],
  • renderConfigs: configuration for the test renderer
  • flags: Additional flag settings for feature toggling
    • flags: { SOME_FEATURE: true }
  • resources: Adds path to /resources
  • snapshots: Snapshots property structure, generally used for automated tests.

node.js API

const serve = require('@nebula.js/cli-serve');

serve({
  port: 3000,
  entry: path.resolve(__dirname, 'sn.js') // custom entrypoint
  enigma: {
    port: 9077
  }
}).then(s => {
  s.url; // serve url
  s.close(); // close the server
});

Micro Frontend (MFE) Mode

The MFE mode activated with the --mfe option, builds a visualisation which is used in a micro frontend environment. The visualisation is served at:

https://<host>:<port>/pkg/<module name>

The module name is by default the name in package.json but may be overridden using the --type option.

The MFE mode runs in HTTPS which requires certificates to be installed in the environment running nebula serve.

The regular dev environment in nebula serve is disabled when running in this mode.

How to install trusted certificates locally

There are a few ways to install locally trusted certificates on your machine, The important end result is that there are two files ~/.certs/cert.pem (the certificate) and ~/.certs/key.pem (the public key). Read about how certificates work here. If you already have a self-signed and trusted certificate in this location, then skip this guide.

Easy step-by-step guide to install and generate certificates locally

Install mkcert - documentation

brew install mkcert

Make sure the active directory is the user folder and run the following:

$ mkdir ~/.certs

$ mkcert -install

$ mkcert -key-file ~/.certs/key.pem -cert-file ~/.certs/cert.pem localhost 127.0.0.1 ::1

Verify that two new files have appeared in the certs/ - folder

More info

webpack and webpack-dev-server are used behind the web development server for nebula.js visualizations. You can find more info from webpack configuration and webpack-dev-server configuration.