bombino-vue-bare

Template used in bombino

NOTE: This repo should not be git cloned directly because it has breaking placeholder values and will not run on it's own.

# Node and bombino are required
npm install -g bombino

# In any valid CEP extension folder:
# (e.g. <USERNAME>/AppData/Roaming/CEP/extensions)
bombino

No setup required for:

• Vue as JS framework
• Hot Reloading (panel updates instantly on every save during npm run serve)
• Vue-CLI-3 as Node.js tooling (webkit)
• ✨ All color themes of any host app automatically handled by starlette library ✨

Never used Node, Vue CLI-3 or Webpack?

Commands

This panel comes with 5 commands baked in (see details here):

• npm run help - A full list of the commands available and descriptions.
• npm run switch - Reports whether in developer or production context and can switch automatically.
• npm run update - Reports current version of panel in manifest and prompts to update Major, Minor, or Micro.
• npm run register - Reports the current user data (if any) and prompts to save new info to be used in certificates.
• npm run sign - Automatically stages and signs the extension, placing it in a ./archive directory within the current panel.

Filetree for panel:

Base panel results in clean and simple Single File Component infrastructure. CSInterface exists on the level of App.vue and is accessible anywhere via this.app.csInterface (this.$root.$children[0].csInterface).

:filefolder: your-panel-name
  |_\ :filefolder: CSXS
         |_\ :page_facingup: manifest.xml
  |_\ :filefolder: public
         |_\ :page_facingup: CSInterface.js
         |_\ :page_facingup: index.html (Production: used with npm run build)
         |_\ :page_facingup: index-dev.html (Development: used with npm run serve)
  |_\ :filefolder: src
         |_\ :filefolder: components
                |_\ :page_facingup: HelloWorld.vue
         |_\ :page_facingup: App.vue
         |_\ :page_facingup: main.js
  |_\ :page_facingup: .debug
  |_\ :page_facingup: .gitignore
  |_\ :page_facingup: package.json
  |_\ :page_facingup: package-lock.json
  |_\ :page_facing_up: vue.config.js (Avoids file not found errors in index.html after npm run build)

Contexts

You can automate this by using npm run switch. In case you need to do it manually:

For development

• Ensure index-dev.html is uncommented in CSXS/manifest.xml

  <Resources>
    <MainPath>./public/index-dev.html</MainPath>
    <!-- <MainPath>./dist/index.html</MainPath> -->

• Run npm run serve in the terminal at the project root
• Launch host application and find in Window > Extensions

Panel now updates in real time and recompiles every time you save in VSCode

For production

• Ensure dist/index.html is uncommented in CSXS/manifest.xml

  <Resources>
    <!-- <MainPath>./public/index-dev.html</MainPath> -->
    <MainPath>./dist/index.html</MainPath>

• Run npm run build in the terminal at the project root
• Launch host application and find in Window > Extensions

Panel is now ready to sign and certify or be used on any client

Getting Started

You don't need to understand Node, npm packages, Vue CLI-3 or webpack to use these templates, it's a good starting point to avoid all the pitfalls in having your own functional panel using them.

I was very overwhelmed when I first jumped to Single File Components rather than using Vue's CDN and writing everything in one .js file. Afterall, this looks gigantic and there are a ton of cryptic files, but after some practice and troubleshooting how to setup the environment, it's incredibly powerful to use and can be much simpler than gigantic .js files with 10k+ worth of code!

For the most part, you don't need to alter or modify any file/folder not shown below:

:filefolder: your-panel-name
  |_\ :filefolder: CSXS
         |_\ :page_facingup: manifest.xml
           • Changes have been made to include node context. See the README in ./CSXS
  |_\ :filefolder: public
           • Any files/folders contained here will be automatically bundled in ./dist/ after npm run build
           • You can include any assets (.pngs, scripts, etc) here or src for use in the panel
         |_\ :page_facingup: CSInterface.js
         |_\ :page_facingup: index.html (Production: used with npm run build)
         |_\ :page_facingup: index-dev.html (Development: used with npm run serve)
  |_\ :filefolder: src
           • This is your development folder, you can place any number of components or files here
         |_\ :filefolder: components
                |_\ :page_facingup: HelloWorld.vue
                        • This is a placeholder component for the main content of your panel
         |_\ :page_facing_up: App.vue
                 • This is the main entry point of your panel
                 • You cannot change this from a <div> of #app. Add your own components inside it instead of modifying it directly.

Common errors:

require is not a function/defined

• If wanting to use require() or process in both Developer and Production, you need to assign them manually in each .vue file (due to being nested in an iframe) like so:

const require = cep_node.require || require;
const fs = require("fs"); // Now available in both

Panel is not updating

• Adding or reorganizing components may cause hot reloading to fail. Many times you will be warned of this in CEF debug's console, fix this by hitting ^C in your active terminal to Terminae batch job, then run npm run serve once more and refresh the panel.

Page Not Found (cannot find page at localhost:#### displays in panel)

• Must run npm run serve and have the App running at: -Local / -Network message in your terminal
• If you launched the app before running npm run serve, click the localhost URL inside the panel's error message

Panel is white or blank

• Check your CEF client via localhost:#### for an error thrown in your code which breaks the panel's rendering
• If in Production context and receiving 404 errors in your index.html, ensure your dist/index.html's script tags have src attributes such as src=./filepath or src=filepath instead of src=/filepath (leading slash is default but will break, should be fixed via vue.config.js)

Sign/Certify is failing

• Including hidden files and repositories in your ZXP/ZIP will cause a misleading error message. Be sure to delete hidden items such as node_modules/, .git/, and any other hidden files/folders prior to your sign/certify.