Plaoc App

Overview

We refer to applications that run on the dweb_browser browser as Plaoc Apps. First we need to understand how to package our app into a .zip file.

Plaoc App Creation Process:

Using Vue + Vite as an example:

• Globally install @vue/cli

  pnpm add -g @vue/cli
  

• Test the installation was successful

  vue --version
  

  Terminal output indicates successful install:

  @vue/cli 5.0.8
  

• Create Vue project

  vue create plaoc-app
  

• Create manifest.json file in plaoc-app root directory

  plaoc-app
  ├── ......other project files 
  └── mainifest.json
  

• Install @plaoc/cli

  pnpm add @plaoc/cli
  

• Update package.json with command:

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    // Add plaoc command
    "plaoc:serve": "plaoc serve "
  },
  

• Start project in dev mode

  pnpm serve
  

  Terminal output:

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.2.6:8080/
  

• In another terminal, run plaoc:serve command

  pnpm plaoc:serve http://192.168.2.6:8080/
  

  Terminal output:

  metadata:       http://127.0.0.1:8096/metadata.json
  metadata:       http://192.168.2.6:8096/metadata.json
  metadata:       http://198.18.0.1:8096/metadata.json
  

• Run developer tool app with command:

  For macbook m1 example:

  open /Users/xxxpath/dweb-browser-devtools.app --args -- --start install --url http://192.168.2.6:8096/metadata.json
  

• Can now download and debug plaoc-app project in developer tool app

• Package plaoc-app when development complete

• Publish

Key Steps Explanation

• Create Vue project with @vue/cli

• Install @plaoc/cli dependency

• Add manifest.json file

  Follows manifest standard from w3c. Omits some complex image configs like icon, so recommend using svg files directly.

  This config file displays when user installs the App. See sample config file here.

• Create local download service

  • plaoc serve xxx to debug packaged Plaoc App project

  • plaoc serve url to debug Plaoc App project in dev

• Package Plaoc App

  Use packaging tool plaoc cli to bundle app.

• Publish

  Deploy bundle output to official site to publish.

Related Links

@plaoc/cli

Developer tool

Release