The Official storecraft Dashboard 🏆,
- Leveraging
static rendering/client side rendering/swr - Can be deployed into cost effective CDN
- Also available at CDN like
unpkgfor consuming as a component.
Effectively, TWO Build Targets
- A
librarywith
- Dashboard as
reactfunctional component - a
mountfunction, that you can wrap for any framework of pure DOM.
- A website, with configurable backend endpoint.
Build is handled by Vite
npm i @storecraft/dashboardFirst, run the development server:
npm run dashboard:dev
# or
npm startOpen http://localhost:3000 with your browser to see the result.
Simply, run any of the following command
npm run dashboard:buildArtifacts are in the dist folder
dist
├── /lib
├───┼── /src
│ │ ├── index.js // ES module
│ │ └── index.umd.cjs // UMD
├── /website
│ ├── index.html
│ └── assets
First,
npm i @storecraft/dashboardThen,
import { Dashboard } from '@storecraft/dashboard'
export const Root = () => {
return (
<div className='w-screen h-screen'>
<Dashboard is_backend_endpoint_editable={true} />
</div>
)
} <!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><!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