/demo-add-on-vite

Create your Addon for the SCAYLE Panel and dive into the demo add-on to begin your journey.

Primary LanguageTypeScriptMIT LicenseMIT

scayle-logo-cr

SCAYLE Panel Demo Add-On

The SCAYLE Panel Demo Add-On is showcasing how to write an Add-On in combination with the SCAYLE Component Library.

SCAYLE's *Component Library* is released under the MIT license.

Getting Started

Visit the Add-On Developer Guide to learn more on how to use the Panel icons.

Visit the Docs to learn more about our system requirements.

What is Scayle ?

SCAYLE is a full-featured e-commerce software solution that comes with flexible APIs. Within SCAYLE, you can manage all aspects of your shop, such as products, stocks, customers, and transactions.

Learn more about Scayles’s architecture and commerce modules in the Docs.

Installation

Before running the application, you need to configure your hosts file with the add-on's hostname. You'll also need to create an SSL key pair for this domain.

It's also recommended to install Volta in order to use the correct versions of node.js and npm.

# Add 
127.0.0.1       {hostname from .env}` (replace everything including the {})  to `/etc/hosts`

# Execute
npm ci

# !! Make sure you have openssl installed on your computer for this step. !! 
# Generate a ssl certificates with the following command. The domain name (aka hostname) is retrieved from `CONFIG_SERVER_HOST` in `.env`. 
npm run generate:ssl

Scripts

Build the production app: npm run build

Build the hot-reloading app: npm run dev

Run unit tests: npm run unit

Check types: npm run typecheck

Built With

Tailwindcss Vue 3 Vite Vitest TypeScript

Shadow DOM

To inject addon in it's own isolated container we can use Shadow DOM. To enable it you must set in .env PANEL_USE_SHADOW_DOM=true.

Other channels

License

Licensed under the MIT