@nebohq/plugin NPM

@nebohq/plugin

Plugin used in the Nebo ecosystem that:

Initializes Nebo in your repository.
Watches for changes as you are developing with Nebo.
Builds Nebo files for use in production.

This works in the following way: 1. Start off by initializing Nebo with this plugin. See the init command description below. 2. (Optional) If you have complex webpack needs, set up the configure option in nebo.js. See Webpack Configuration File below. 3. Compile nebo.js and nebo.css (these are called Nebo assets) to use in the Nebo app. See the build command below. 4. Deploy the Nebo assets to production and configure your production URLs in the Nebo app.

If you are developing, you can also watch your file changes to produce local Nebo assets. 1. Start the Nebo watcher with this plug in. See the watch command description below. 2. Then, as you are developing components or style for use inside of Nebo, you'll add them to your Nebo library config file (usually nebo.js). They will automatically be compiled into your static assets folder as nebo.js and nebo.css. 3. You can use these two built files to configure your settings on the Nebo app.

Installation

Run the following commands in the shell of your choice:

# with npm
npm install @nebohq/plugin
# with yarn
yarn add @nebohq/plugin

Usage

To run the plugin, use the following commands:

# with npm
npx nebo [command] [...options] 

# with yarn
yarn run nebo [command] [...options]

Commands

`init`

Initializes the repository for Nebo.

The command takes the following options:

access-token - Supplies the Nebo access token.
config-path - (default: ./nebo.js) - Provides the path to the Nebo directory configuration.
public-path - (default: ./public) - Path to where your static files are served
global-styles-path - (default: null) - Path to additional styles outside of those included in the config-path

# with npm
npx nebo init --access-token=your-access-token-here --global-styles-path=./styles/globals.css

# with yarn
yarn run nebo init --access-token=your-access-token-here --global-styles-path=./styles/globals.css

This will generate two files:

nebo.js - allows you to configure your Nebo webpack configuration. If you provide your access token, it will automatically be filled in here.
nebo.js - (or the value of config-path) - allows you to add components and styles for use in Nebo.

`build`

Builds Nebo assets for use on nebohq.com. This is the default command.

It will re-use the options found in nebo.js, but if you want to override them, the following options are available:

config-path - (default: ./nebo.js) - Provides the path to the Nebo directory configuration.
public-path - (default: ./public) - Path to where your static asset files are served.
global-styles-path - (default: null) - Path to additional styles outside of those included in the config-path

# with npm
npx nebo # runs with options from nebo.js
npx nebo build --global-styles-path=./styles/other-styles.css

# with yarn
yarn run nebo # runs with options from nebo.js
yarn run nebo build --global-styles-path=./styles/other-styles.css

`watch`

Keeps track of file changes and builds a development version of assets for nebohq.com.

It will re-use the options found in nebo.js, but if you want to override them, the following options are available:

config-path - (default: ./nebo.js) - Provides the path to the Nebo directory configuration.
public-path - (default: ./public) - Path to where your static asset files are served.
global-styles-path - (default: null) - Path to additional styles outside of those included in the config-path

# with npm
npx nebo watch # runs with options from nebo.js

# with yarn
yarn run nebo watch # runs with options from nebo.js

Webpack Configuration File

This file is generated at nebo.js. It has the following options:

configPath - (default: ./nebo.js) - Provides the path to the Nebo directory configuration.
publicPath - (default: ./public) - Path to where your static asset files are served.
globalStylesPath - (default: null) - Path to additional styles outside of those included in the config-path. This can also be an array.
configure - (default: (config) => config) - Allows you to change the Webpack configuration that Nebo uses to generate its asset files.

// nebo.js
module.exports = {
  configPath: "./nebo.js",
  publicPath: "./public",
  globalStylesPath: ["./src/stylesheets/application.scss", "./src/stylesheets/globals.css"],
  configure: (config) => {
    config.module.rules.push({
      test: /\.svg$/,
      use: 'svg-inline-loader'
    });
    return config;
  },
};

Nebo Directory Configuration

Allows you to add components for use in the Nebo app. If your component is not imported here, it will not be available in the Nebo app.

// nebo.js (can be changed via the configPath option in nebo.js)
import React from 'react';
import ReactDOM from 'react-dom';
import Component, { configure, fetchComponent } from '@nebohq/nebo';
import Badge from './src/components/Badge'; // importing the Badge component

const accessToken = '[ACCESS_TOKEN]';
const directory = configure({
  directory: {
    // Add your components here
    Badge // adding the Badge component to Nebo
  },
  react: React,
  renderer: ReactDOM,
  accessToken,
});

const fetchSchema = async (idOrSlug) => fetchComponent({ idOrSlug, accessToken });

const NeboComponent = Component;
export default NeboComponent;
export { directory, fetchSchema };