canvasframework 0.5.29 → 0.5.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +66 -27
- package/index.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
|
|
11
11
|
# Installation
|
|
12
12
|
- npm install canvasframework
|
|
13
|
-
- npm install -
|
|
13
|
+
- npm install vite --save-dev
|
|
14
14
|
|
|
15
15
|
# add in package.json
|
|
16
16
|
"scripts": {
|
|
@@ -18,40 +18,79 @@
|
|
|
18
18
|
"build": "vite build"
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
# Configure
|
|
21
|
+
# Configure with Vite and Capacitor or cordova
|
|
22
22
|
|
|
23
|
-
add your app.js in src folder
|
|
24
|
-
|
|
23
|
+
- add your app.js in src folder "src/main.js"
|
|
24
|
+
- add your index.html in the root of your project
|
|
25
|
+
- add this to your index.html <script type="module" src="/src/main.js"></script>
|
|
26
|
+
- you didn't add canvas or other html tags to your index.html
|
|
25
27
|
|
|
26
28
|
```
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
29
|
+
<!DOCTYPE html>
|
|
30
|
+
<html lang="en">
|
|
31
|
+
<head>
|
|
32
|
+
<meta charset="UTF-8">
|
|
33
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
34
|
+
<title>My App</title>
|
|
35
|
+
<style>
|
|
36
|
+
* {
|
|
37
|
+
margin: 0;
|
|
38
|
+
padding: 0;
|
|
39
|
+
box-sizing: border-box;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
body {
|
|
43
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
|
|
44
|
+
overflow: hidden;
|
|
45
|
+
background-color: #f5f5f5;
|
|
46
|
+
}
|
|
47
|
+
</style>
|
|
48
|
+
</head>
|
|
49
|
+
<body>
|
|
50
|
+
<script type="module" src="/src/app.js"></script>
|
|
51
|
+
</body>
|
|
52
|
+
</html>
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
- Add vite.config.js to the root of the project
|
|
56
|
+
|
|
57
|
+
```
|
|
58
|
+
import { defineConfig } from 'vite';
|
|
59
|
+
|
|
60
|
+
export default defineConfig({
|
|
61
|
+
base: './', // IMPORTANT pour Android
|
|
62
|
+
build: {
|
|
63
|
+
outDir: 'www',
|
|
64
|
+
emptyOutDir: true
|
|
49
65
|
}
|
|
66
|
+
});
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
- add this to our package.json
|
|
70
|
+
|
|
71
|
+
```
|
|
72
|
+
"scripts": {
|
|
73
|
+
"dev": "vite",
|
|
74
|
+
"build": "vite build"
|
|
75
|
+
}
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
- into your capacitor.config.ts specify this webDir
|
|
79
|
+
|
|
80
|
+
```
|
|
81
|
+
const config = {
|
|
82
|
+
appId: 'com.test.app',
|
|
83
|
+
appName: 'CanvasApp',
|
|
84
|
+
webDir: 'www'
|
|
50
85
|
};
|
|
51
86
|
```
|
|
52
87
|
|
|
88
|
+
- And finally you can build your app
|
|
89
|
+
|
|
53
90
|
```
|
|
54
|
-
|
|
91
|
+
npm run build
|
|
92
|
+
npx cap sync
|
|
93
|
+
npx cap run android
|
|
55
94
|
```
|
|
56
95
|
|
|
57
96
|
---
|
package/index.js
CHANGED