accounting/books
2
0
Fork 0
mirror of https://github.com/frappe/books.git synced 2024-11-09 23:30:56 +00:00
Code Issues Releases Activity

app.md

Browse Source
This commit is contained in:
Rushabh Mehta 2018-01-16 12:19:38 +05:30
parent 1490867474
commit 9c49809e09
3 changed files with 115 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/desk/index.js
View File

@ -10,7 +10,7 @@ module.exports = class Desk {
frappe.router = new Router(); frappe.router = new Router();
frappe.router.listen(); frappe.router.listen();
this.wrapper = document.querySelector('.desk'); this.wrapper = frappe.ui.add('div', 'desk', document.querySelector('body'));
this.nav = frappe.ui.add('header', 'nav text-center', this.wrapper); this.nav = frappe.ui.add('header', 'nav text-center', this.wrapper);

2
client/index.js
View File

@ -5,7 +5,7 @@ frappe.ui = require('./ui');
const Desk = require('./desk'); const Desk = require('./desk');
module.exports = { module.exports = {
async start({server, container}) { async start({server}) {
window.frappe = frappe; window.frappe = frappe;
frappe.init(); frappe.init();
common.init_libs(frappe); common.init_libs(frappe);

113
docs/app.md
View File

@ -1,5 +1,118 @@
# Creating a new App # Creating a new App
### Install Frappe.js
``` ```
yarn add frappejs yarn add frappejs
``` ```
## Webpack
You can use webpack to build your JS bundle.
Since Frappe.js use Bootstrap 4, you will need to add SASS handlers
Your `webpack.config.js` should look like:
```js
const path = require('path');
module.exports = {
entry: './index.js',
devtool: 'inline-source-map',
output: {
filename: './js/bundle.js',
publicPath: '/'
},
module: {
rules: [{
test: /\.scss$/,
use: [
{
loader: "style-loader" // creates style nodes from JS strings
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: 'postcss-loader', // Run post css actions
options: {
plugins: function () { // post css plugins, can be exported to postcss.config.js
return [
require('precss'),
require('autoprefixer')
];
}
},
},
{
loader: "sass-loader", // compiles Sass to CSS
options: {
includePaths: ["node_modules", "./client/scss"]
}
}]
}]
}
};
```
## 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
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script src="js/bundle.js"></script>
</body>
</html>
```
### server.js
Create your server file `server.js`
```js
const server = require('frappejs/server');
server.start({
backend: 'sqlite',
connection_params: {db_path: 'test.db'},
static: './'
});
```
### index.js
In your client file you will have to import all your controllers and init them.
`frappejs/client` lib will initialize your server and user interface with the Desk.
Example starting point for a to-do 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);
frappe.desk.add_sidebar_item('Home', '#');
frappe.desk.add_sidebar_item('New ToDo', '#new/todo');
frappe.router.default = '/list/todo';
frappe.router.show(window.location.hash);
});
```