Storecraft Official Dashboard

Storecraft ships with an official modern Dashboard.

Location

Once your backend is up,

Dashboard is located at /dashboard

Development

The Official storecraft Dashboard 🏆,

Leveraging static rendering / client side rendering / swr
Can be deployed into cost effective CDN
Also available at CDN like unpkg for consuming as a component.

Effectively, TWO Build Targets

A library with

Dashboard as react functional component
a mount function, that you can wrap for any framework of pure DOM.

A website, with configurable backend endpoint.

Build is handled by Vite

npm i @storecraft/dashboard

First, run the development server:

npm run dashboard:dev
# or
npm start

Open http://localhost:3000 with your browser to see the result.

Build / Export

Simply, run any of the following command

npm run dashboard:build

Artifacts are in the dist folder

dist
├── /lib
├───┼── /src
│   │   ├── index.js      // ES module
│   │   └── index.umd.cjs // UMD
├── /website
│   ├── index.html
│   └── assets

Consuming via `React`

First,

npm i @storecraft/dashboard

Then,

import { Dashboard } from '@storecraft/dashboard'

export const Root = () => {

  return (
    <div className='w-screen h-screen'>
      <Dashboard is_backend_endpoint_editable={true} />
    </div>
  )
}

Consuming via `unpkg` as UMD (smaller bundle)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" sizes="any" type="image/svg+xml" href="/api/dashboard/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Storecraft - Next Gen Commerce-As-Code</title>
  </head>
  <body style="background-color: black">
    <div id="root"></div>
    <script 
      type="application/javascript"
      src="https://www.unpkg.com/@storecraft/dashboard@latest/dist/lib/src/index.umd.cjs">
    </script>

    <script>
      console.log({StorecraftDashboard});

      const show_configurable_endpoint = true;

      StorecraftDashboard.mountStorecraftDashboard(
        document.getElementById('root'), 
        show_configurable_endpoint
      );
    </script>
  </body>
</html>

Consuming via `unpkg` as ESM (bigger bundle)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" sizes="any" type="image/svg+xml" href="/api/dashboard/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Storecraft - Next Gen Commerce-As-Code</title>
    <script type="module">
      import { mountStorecraftDashboard } from 'https://www.unpkg.com/@storecraft/dashboard@latest/dist/lib/src/index.js';

      const show_configurable_endpoint = true;

      mountStorecraftDashboard(
        document.getElementById('root'), 
        show_configurable_endpoint
      );
    </script>
  </head>
  <body style="background-color: black">
    <div id="root"></div>
  </body>
</html>

Author: Tomer Shalev