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.

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.

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.