2
0
mirror of https://github.com/frappe/books.git synced 2024-09-20 19:29:02 +00:00
books/docs/app.md

110 lines
2.3 KiB
Markdown
Raw Normal View History

2018-01-16 06:09:17 +00:00
# Creating a new App
2018-01-16 06:35:07 +00:00
2018-01-16 07:29:49 +00:00
## Install Frappe.js
2018-01-16 06:49:38 +00:00
2018-01-16 06:35:07 +00:00
```
yarn add frappejs
```
2018-01-16 06:49:38 +00:00
2018-09-11 18:15:18 +00:00
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.
2018-01-16 06:49:38 +00:00
2018-09-11 18:15:18 +00:00
## Config
2018-01-16 06:49:38 +00:00
2018-09-11 18:15:18 +00:00
FrappeJS requires a file named `frappe.conf.js` to be present in the root of your directory. Minimum configuration looks like:
2018-01-16 06:49:38 +00:00
```
2018-09-11 18:15:18 +00:00
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
}
}
2018-01-16 06:49:38 +00:00
2018-09-11 18:15:18 +00:00
```
2018-01-16 06:49:38 +00:00
2018-09-11 18:15:18 +00:00
You also need an `index.html` located in the `src` directory. It can look like
2018-01-16 06:49:38 +00:00
```html
<!DOCTYPE html>
<html lang="en">
<head>
2018-09-11 18:15:18 +00:00
<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>My Awesome App</title>
2018-01-16 06:49:38 +00:00
</head>
<body>
2018-09-11 18:15:18 +00:00
<div id="app"></div>
2018-01-16 06:49:38 +00:00
</body>
</html>
```
2018-03-21 09:48:01 +00:00
2018-09-11 18:15:18 +00:00
### Server
2018-01-16 06:49:38 +00:00
2018-09-11 18:15:18 +00:00
Assuming you have a `server/index.js` file, you can start the frappejs server in just a few lines of code.
2018-01-16 06:49:38 +00:00
```js
const server = require('frappejs/server');
server.start({
backend: 'sqlite',
2018-09-11 18:15:18 +00:00
connection_params: {
db_path: 'test.db'
}
2018-01-16 06:49:38 +00:00
});
```
2018-09-11 18:15:18 +00:00
### Client
2018-01-16 06:49:38 +00:00
2018-09-11 18:15:18 +00:00
In your client file you will have to initialize `frappe` and `models`.
2018-01-16 06:49:38 +00:00
`frappejs/client` lib will initialize your server and user interface with the Desk.
2018-09-11 18:15:18 +00:00
Example starting point for an app:
2018-01-16 06:49:38 +00:00
```js
2018-09-11 18:15:18 +00:00
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';
2018-01-16 07:29:49 +00:00
2018-09-11 18:15:18 +00:00
frappe.init();
frappe.registerLibs(common);
frappe.registerModels(coreModels);
2018-01-16 07:29:49 +00:00
2018-09-11 18:15:18 +00:00
const server = 'localhost:8000';
frappe.fetch = window.fetch.bind();
frappe.db = new HTTPClient({ server });
const socket = io.connect(`http://${server}`);
frappe.db.bindSocketClient(socket);
2018-01-16 07:29:49 +00:00
```
2018-09-11 18:15:18 +00:00
## Start
2018-01-16 07:29:49 +00:00
2018-09-11 18:15:18 +00:00
To start the server and build webpack simultaneously you can use the cli command
2018-01-16 07:29:49 +00:00
2018-09-11 18:15:18 +00:00
```bash
./node_modules/.bin/frappe start
2018-02-13 10:05:41 +00:00
```