Preparation for BEX

The difference between building a SPA, Mobile App, Electron App, BEX or SSR is simply determined by the “mode” parameter in “quasar dev” and “quasar build” commands.

TIP

You will need @quasar/app v1.7+ in order to run BEX mode.

1. Add Quasar BEX Mode

In order to build a BEX, we first need to add the BEX mode to our Quasar project:

$ quasar mode add bex

If you want to jump right in and start developing, you can skip the “quasar mode” command and issue:

$ quasar dev -m bex

This will add BEX mode automatically, if it is missing adding a src-bex folder to your project.

TIP

The src-bex folder is just a standard browser extension folder so you are free to use it as you would any other browser extension project folder. Please refer to supported Browser Extension documentation to learn more.

2. Understand The Anatomy Of src-bex

The new folder has the following structure:

.
└── src-bex/
    ├── css                    # CSS to use in the Browser Context
    |   ├── content-css.css       # CSS file which is auto injected into the consuming webpage via the manifest.json
    ├── icons/                 # Icons of your app for all platforms
    |   ├── icon-16x16.png         # Icon file at 16px x 16px
    |   ├── icon-48x48.png         # Icon file at 48px x 48px
    |   └── icon-128x128.png       # Icon file at 128px x 128px
    ├── js/                    # Javascript files used within the context of the BEX.
    |   ├── background.js         # Standard background script BEX file - auto injected via manifest.json
    |   ├── background-hooks.js   # Background script with a hook into the BEX communication layer
    |   ├── content-hooks.js      # Content script script with a hook into the BEX communication layer
    |   ├── content-script.js     # Standard content script BEX file - auto injected via manifest.json
    |   └── dom-hooks.js          # JS file which is injected into the DOM with a hook into the BEX communication layer
    └── www/                   # Compiled BEX source - compiled from /src (Quasar app)
    └── manifest.json          # Main thread code for production

The next section will discuss these in more detail.