mirror of
https://github.com/frappe/books.git
synced 2024-11-10 15:50:56 +00:00
Merge branch 'master' of https://github.com/frappe/frappejs
This commit is contained in:
Faris Ansari
commit
f1600c049f
135
docs/app.md
135
docs/app.md
@ -6,31 +6,41 @@
|
||||
yarn add frappejs
|
||||
```
|
||||
|
||||
FrappeJS comes with built in rollup config for your files
|
||||
FrappeJS comes with an Express Server on the backend, VueJS for the front-end and a CLI to run these things with built-in webpack configs.
|
||||
|
||||
## Build
|
||||
## Config
|
||||
|
||||
There are 2 files that get built for the Desk single page application
|
||||
FrappeJS requires a file named `frappe.conf.js` to be present in the root of your directory. Minimum configuration looks like:
|
||||
|
||||
- `/dist/js/bundle.js`
|
||||
- `/dist/css/style.css`
|
||||
```
|
||||
module.exports = {
|
||||
staticPath: './static', // uploaded files are served from this directory
|
||||
distPath: './dist', // bundled assets are built and served here
|
||||
dev: {
|
||||
// your client side entry files
|
||||
entry: {
|
||||
app: './src/main.js'
|
||||
},
|
||||
outputDir: './dist',
|
||||
assetsPublicPath: '/',
|
||||
devServerPort: 8000,
|
||||
env: {
|
||||
PORT: process.env.PORT || 8000
|
||||
}
|
||||
},
|
||||
node: {
|
||||
paths: {
|
||||
main: 'server/index.js' // your server entry file
|
||||
}
|
||||
},
|
||||
electron: {
|
||||
// wip
|
||||
}
|
||||
}
|
||||
|
||||
Your `rollup.config.js` should look like:
|
||||
|
||||
```js
|
||||
module.exports = [
|
||||
require('frappejs/config/rollup.config.style.js'),
|
||||
require('frappejs/config/rollup.config.app.js')
|
||||
]
|
||||
```
|
||||
|
||||
## Create a basic app
|
||||
|
||||
### index.html
|
||||
|
||||
The UI for the single page app (desk) will be built inside the `body` element, so you just need to have an empty body element, and link your JS bundle in `index.html`
|
||||
|
||||
Sample index.html
|
||||
You also need an `index.html` located in the `src` directory. It can look like
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@ -38,93 +48,62 @@ Sample index.html
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link href="/dist/css/style.css" rel="stylesheet">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>My Awesome App</title>
|
||||
</head>
|
||||
<body>
|
||||
<script src="/dist/js/socket.io.js"></script>
|
||||
<script src="js/bundle.js"></script>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
## For development setup
|
||||
|
||||
Clone frappejs in the same folder as your app, since you will be developing frappejs on the side.
|
||||
### Server
|
||||
|
||||
### Link frappejs
|
||||
|
||||
```sh
|
||||
# make frappejs linkable
|
||||
cd frappejs
|
||||
|
||||
yarn link
|
||||
yarn link frappejs
|
||||
|
||||
# link frappejs in all
|
||||
cd ../myapp
|
||||
yarn link frappejs
|
||||
|
||||
# install libs
|
||||
yarn
|
||||
```
|
||||
|
||||
### server.js
|
||||
|
||||
Create your server file `server.js`
|
||||
Assuming you have a `server/index.js` file, you can start the frappejs server in just a few lines of code.
|
||||
|
||||
```js
|
||||
const server = require('frappejs/server');
|
||||
|
||||
server.start({
|
||||
backend: 'sqlite',
|
||||
connection_params: {db_path: 'test.db'},
|
||||
static: './'
|
||||
connection_params: {
|
||||
db_path: 'test.db'
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### index.js
|
||||
### Client
|
||||
|
||||
In your client file you will have to import all your controllers and init them.
|
||||
In your client file you will have to initialize `frappe` and `models`.
|
||||
|
||||
`frappejs/client` lib will initialize your server and user interface with the Desk.
|
||||
|
||||
Example starting point for a to-do app:
|
||||
Example starting point for an app:
|
||||
|
||||
```js
|
||||
const client = require('frappejs/client');
|
||||
const todo = require('frappejs/models/doctype/todo/todo.js');
|
||||
|
||||
// start server
|
||||
client.start({
|
||||
server: 'localhost:8000',
|
||||
}).then(() => {
|
||||
frappe.init_controller('todo', todo);
|
||||
import frappe from 'frappejs';
|
||||
import io from 'socket.io-client';
|
||||
import HTTPClient from 'frappejs/backends/http';
|
||||
import common from 'frappejs/common';
|
||||
import coreModels from 'frappejs/models';
|
||||
|
||||
frappe.desk.add_sidebar_item('Home', '#');
|
||||
frappe.desk.add_sidebar_item('New ToDo', '#new/todo');
|
||||
frappe.init();
|
||||
frappe.registerLibs(common);
|
||||
frappe.registerModels(coreModels);
|
||||
|
||||
const server = 'localhost:8000';
|
||||
frappe.fetch = window.fetch.bind();
|
||||
frappe.db = new HTTPClient({ server });
|
||||
const socket = io.connect(`http://${server}`);
|
||||
frappe.db.bindSocketClient(socket);
|
||||
|
||||
frappe.router.default = '/list/todo';
|
||||
frappe.router.show(window.location.hash);
|
||||
});
|
||||
```
|
||||
|
||||
## Start
|
||||
|
||||
To start the app and build webpack simultaneously you can use a `Procfile`
|
||||
To start the server and build webpack simultaneously you can use the cli command
|
||||
|
||||
```yml
|
||||
server: nodemon server.js
|
||||
watch: node_modules/.bin/rollup -c --watch
|
||||
```
|
||||
|
||||
You can use any procfile handler like `node-foreman` to start the processes.
|
||||
|
||||
```
|
||||
yarn global add foreman
|
||||
```
|
||||
|
||||
Then
|
||||
|
||||
```
|
||||
nf start
|
||||
```bash
|
||||
./node_modules/.bin/frappe start
|
||||
```
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
"express": "^4.16.2",
|
||||
"feather-icons": "^4.7.3",
|
||||
"flatpickr": "^4.3.2",
|
||||
"frappe-datatable": "^1.1.2",
|
||||
"frappe-datatable": "^1.3.1",
|
||||
"friendly-errors-webpack-plugin": "^1.7.0",
|
||||
"html-webpack-plugin": "^3.2.0",
|
||||
"jquery": "^3.3.1",
|
||||
|
||||
@ -41,6 +41,7 @@ module.exports = {
|
||||
app.use(bodyParser.urlencoded({ extended: true }));
|
||||
|
||||
app.use(express.static(frappe.conf.distPath));
|
||||
|
||||
app.use('/static', express.static(frappe.conf.staticPath))
|
||||
|
||||
app.use(morgan('tiny'));
|
||||
|
||||
BIN
test.db-journal
Normal file
BIN
test.db-journal
Normal file
Binary file not shown.
@ -93,6 +93,7 @@ export default {
|
||||
},
|
||||
async deleteCheckedItems() {
|
||||
await frappe.db.deleteMany(this.doctype, this.checkList);
|
||||
this.$router.push(`/list/${this.doctype}`);
|
||||
this.checkList = [];
|
||||
},
|
||||
toggleCheck(name) {
|
||||
|
||||
@ -101,6 +101,9 @@ export default {
|
||||
},
|
||||
sort() {
|
||||
return (a, b) => {
|
||||
a = a.toLowerCase();
|
||||
b = b.toLowerCase();
|
||||
|
||||
if (a.value === '__newItem') {
|
||||
return 1;
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div>
|
||||
<div class="p-4">
|
||||
<h4 class="pb-2">{{ reportConfig.title }}</h4>
|
||||
<report-filters v-if="reportConfig.filterFields.length" :filters="reportConfig.filterFields" :filterDefaults="filters" @change="getReportData"></report-filters>
|
||||
<report-filters v-if="filtersExists" :filters="reportConfig.filterFields" :filterDefaults="filters" @change="getReportData"></report-filters>
|
||||
<div class="pt-2" ref="datatable" v-once></div>
|
||||
</div>
|
||||
<not-found v-if="!reportConfig" />
|
||||
@ -22,6 +22,9 @@ export default {
|
||||
return utils.convertFieldsToDatatableColumns(
|
||||
this.reportConfig.getColumns()
|
||||
);
|
||||
},
|
||||
filtersExists() {
|
||||
return (this.reportConfig.filterFields || []).length;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user