diff --git a/client/desk/index.js b/client/desk/index.js
index 73482516..106dff24 100644
--- a/client/desk/index.js
+++ b/client/desk/index.js
@@ -10,7 +10,7 @@ module.exports = class Desk {
frappe.router = new Router();
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);
diff --git a/client/index.js b/client/index.js
index 083fda4f..ce187c34 100644
--- a/client/index.js
+++ b/client/index.js
@@ -5,7 +5,7 @@ frappe.ui = require('./ui');
const Desk = require('./desk');
module.exports = {
- async start({server, container}) {
+ async start({server}) {
window.frappe = frappe;
frappe.init();
common.init_libs(frappe);
diff --git a/docs/app.md b/docs/app.md
index c0ad7511..f54253f8 100644
--- a/docs/app.md
+++ b/docs/app.md
@@ -1,5 +1,118 @@
# Creating a new App
+### Install Frappe.js
+
```
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
+
+
+
+
+
+
+
+
+
+
+```
+
+### 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);
+});
+```
\ No newline at end of file