Making a new App

Install Frappe.js

yarn add frappejs

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.

Config

FrappeJS requires a file named frappe.conf.js to be present in the root of your directory. Minimum configuration looks like:

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'
    },
    entryHtml: './src/index.html',
    srcDir: './src',
    outputDir: './dist',
    assetsPublicPath: '/',
    devServerPort: 8000,
    env: {
      PORT: process.env.PORT || 8000
    }
  },
  node: {
    paths: {
      main: 'server/index.js' // your server entry file
    }
  }
}

You also need an index.html located in the src directory. It can look like:

<!DOCTYPE html>
<html lang="en">
<head>
    <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>
</head>
<body>
    <div id="app"></div>
</body>
</html>

Server

Assuming you have a server/index.js file, you can start the frappejs server in just a few lines of code.

const server = require('frappejs/server');

server.start({
    backend: 'sqlite',
    connectionParams: {
        dbPath: 'test.db'
    }
});

Client

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 an app:


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.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);

Start

To start the server and build webpack simultaneously you can use the cli command.

./node_modules/.bin/frappe start

To make it even simpler, add this to your package.json

{
  ...
  "scripts": {
    "start": "frappe start"
  }
  ...
}

Then, you can just do yarn start

On this page