accounting/books
2
0
Fork 0
mirror of https://github.com/frappe/books.git synced 2024-09-20 19:29:02 +00:00
Code Issues Releases Activity
c754e47cfe
books/docs/app.md

131 lines
2.4 KiB
Markdown
Raw Normal View History

:boom: frappejs
2018-01-16 06:09:17 +00:00
# Creating a new App
version 0.1
2018-01-16 06:35:07 +00:00
app.md
2018-01-16 07:29:49 +00:00
## Install Frappe.js
app.md
2018-01-16 06:49:38 +00:00
version 0.1
2018-01-16 06:35:07 +00:00
```
yarn add frappejs
```
app.md
2018-01-16 06:49:38 +00:00
welcome rollup, bye bye webpack
2018-01-30 12:03:04 +00:00
FrappeJS comes with built in rollup config for your files
app.md
2018-01-16 06:49:38 +00:00
welcome rollup, bye bye webpack
2018-01-30 12:03:04 +00:00
## Build
app.md
2018-01-16 06:49:38 +00:00
welcome rollup, bye bye webpack
2018-01-30 12:03:04 +00:00
There are 2 files that get built for the Desk single page application
app.md
2018-01-16 06:49:38 +00:00
welcome rollup, bye bye webpack
2018-01-30 12:03:04 +00:00
- `/dist/js/bundle.js`
- `/dist/css/style.css`
Your `rollup.config.js` should look like:
app.md
2018-01-16 06:49:38 +00:00
```js
welcome rollup, bye bye webpack
2018-01-30 12:03:04 +00:00
module.exports = [
require('frappejs/config/rollup.config.style.js'),
require('frappejs/config/rollup.config.app.js')
]
app.md
2018-01-16 06:49:38 +00:00
```
## 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">
welcome rollup, bye bye webpack
2018-01-30 12:03:04 +00:00
<title>Document</title>
<link href="/dist/css/style.css" rel="stylesheet">
app.md
2018-01-16 06:49:38 +00:00
</head>
<body>
yarn link in docs
2018-03-21 09:48:01 +00:00
<script src="/dist/js/socket.io.js"></script>
app.md
2018-01-16 06:49:38 +00:00
<script src="js/bundle.js"></script>
</body>
</html>
```
yarn link in docs
2018-03-21 09:48:01 +00:00
## For development setup
Clone frappejs in the same folder as your app, since you will be developing frappejs on the side.
### 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
```
app.md
2018-01-16 06:49:38 +00:00
### 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);
});
app.md
2018-01-16 07:29:49 +00:00
```
## Start
To start the app and build webpack simultaneously you can use a `Procfile`
```yml
server: nodemon server.js
Updated docs Spelling correction
2018-02-13 10:05:41 +00:00
watch: node_modules/.bin/rollup -c --watch
app.md
2018-01-16 07:29:49 +00:00
```
You can use any procfile handler like `node-foreman` to start the processes.
```
Update app.md
2018-05-05 12:11:15 +00:00
yarn global add foreman
app.md
2018-01-16 07:29:49 +00:00
```
Then
```
nf start
Updated docs Spelling correction
2018-02-13 10:05:41 +00:00
```
Copy Permalink