Not sure how to run this locally #316
Comments
|
Hii View a CDN example: <!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>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css"/>
<script src="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js"></script>
</head>
<body>
<div id="drawflow"></div>
<style>
#drawflow {
position: relative;
text-align:initial;
width: 100%;
height: 800px;
border: 1px solid red;
}
</style>
<script>
var id = document.getElementById("drawflow");
const editor = new Drawflow(id);
editor.start();
editor.addNode('aaa', 0, 1, 100, 300, 'aaa', {}, 'aaa' );
editor.addNode('bbb', 1, 0, 200, 400, 'bbb', {}, 'bbb' );
editor.addNode('ccc', 1, 0, 500, 500, 'ccc', {}, 'ccc' );
</script>
</body>
</html>For donwload or clone, only change this lines to dist folder. <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css"/>
<script src="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js"></script>For npm install your example is correct. But it seems that webpack is not loading the css. Look at this or this other: https://webpack.js.org/loaders/css-loader/ or https://webpack.js.org/loaders/style-loader/ |
|
Thank you so much for your help. This library is wonderful. Is it supposed to look like this? I installed css-loader but I'm not sure if webpack is loading the css
|
|
Yeah that's right! Be like this. If you want you can design your theme in: https://jerosoler.github.io/drawflow-theme-generator/ Or for example take the css of the demo: https://github.com/jerosoler/Drawflow/blob/master/docs/beautiful.css |
|
Hi there. Thank you so much for assisting me. I managed to get it to work using the CDN like above. Next, I want to try getting it to work by importing it (npm) and using vue2. First, I used the vue cli: Then, I cd into the root folder and Next, I put this into my boilerplate App.vue: <template>
<div id="drawflow">
<p>Hello</p>
</div>
</template>
<script>
import Drawflow from 'drawflow'
import Vue from 'vue'
var id = document.getElementById("drawflow");
const editor = new Drawflow(id, Vue);
editor.addNode(1, 1, 100, 100, "class", "5", "node1");
editor.start();
export default {
name: 'App',
}
</script>My main.js entrypoint looks like this: import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')My question is, my cli tells me Compiled successfully in 107ms 2:52:23 p.m.
App running at:
- Local: http://localhost:8081/ However, when I go to my localhost, the page HTML shows only <!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="/favicon.ico">
<title>drawflow-vue2</title>
<link href="/js/app.js" rel="preload" as="script"><link href="/js/chunk-vendors.js" rel="preload" as="script"></head>
<body>
<noscript>
<strong>We're sorry but drawflow-vue2 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="/js/chunk-vendors.js"></script><script type="text/javascript" src="/js/app.js"></script></body>
</html>When I open my console I see the following error: Do you know where I made a mistake? |
|
Change: editor.addNode(1, 1, 100, 100, "class", "5", "node1");
editor.start();For: editor.start();
editor.addNode(1, 1, 100, 100, "class", "5", "node1");Start before addNode. |
|
Thank you so much! |
Hi there, this is an embarrassing problem, but I'd like to know how to run this locally.
The readme says:
Download or clone repository and copy the dist folder, CDN option Or npm.So I tried to follow that:
npm initnpm install webpacknpm i drawflowMy folder structure is
dist/drawflow.min.css (and the other 2 files I was supposed to copy)
Drawflow (cloned repo)
node_modules
src
package-lock.json
package.json
My dist/index.html looks like this
And this is src/index.js
I think this should be correct from the readme instructions, but when I try to run
npm run build( "scripts": { "build": "webpack", }} I get this:I'm sorry if the issue isn't related to Drawflow; but I was wondering if maybe I followed the instructions wrong. Any hints or tips?
Is there an easier way to get a "hello world" up and running?
The text was updated successfully, but these errors were encountered: