👉🏻 website | 👉🏻 online demo
Create a playground to show the demos of your project.
- install @demosify/core
npm install @demosify/core --save-dev- Create
.demosrc.jsfile in your project root.
module.exports = {
name: 'YOUR PROJECT NAME',
}- Create
demosdirectory in your project root. Add your demos indemosdirectory.
mkdir demos
mkdir demos/demo1- Create a
config.jsfile in each of your demos, e.g.demos/demo1.
// config.js
const javascript = `console.log('this is a demo')`;
export default {
javascript,
}- Create a
.demoList.jsonfile in yourdemosdirectory. Specify all your demos show in sidebar.
[
"demo1",
// ...
]- Add NPM scripts in your
package.json:
"scripts": {
"demo:dev": "demosify --serve",
"demo:prod": "demosify --prod"
}- Run
npm run demo:dev, visithttp://localhost:3000. You will see the playground. ✌🏻
You can load sample files though config.js.
export default async () => {
const [javascript, html, css] = await Promise.all([
import('!raw-loader!./index.js'),
import('!raw-loader!./index.html'),
import('!raw-loader!./style.css'),
]);
return {
javascript,
html,
css,
}
}Add index.js, index.html and style.css files in your demo directory.
console.log('This is a demo.');<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DEMO</title>
</head>
<body>
<div id="app"></div>
</body>
</html>/* demo stylesheet */
body {
background-color: red;
}These files will be loaded to your playground.
Run npm run demo:prod.
All the demos will be deploy to production into dist directory of your project.
Special thanks to Poi.
Demosify is inspired and powered by Poi.