webui: demonstrate building a standalone page based on Vue.js implementation

[mr-tz]

Let's show how easy/hard it is to build a standalone offline webpage to display capa results.

[s-ff]

To start off, we need to first create a Vue application named capa-webui, we will use vite as a build tool for this purpose.

$ npm create vite@latest capa-webui -- --template vue

Note: we can use any package manager: npm, yarn, pnpm, ... etc.

This will create a template Hello World web application, next we need to install our library of choice PrimeVue and its peer dependencies:

$ cd capa-webui
$ npm install
$ npm install primevue primeicons

The entry point of the application is found in src/App.vue, this is where the core HTML templates and Javascript live. To build the project, simply:

$ npm run build       # or npm run dev, to spin a local developement server

When the build is done, a ./dist folder is created which contains the source to be deployed on Github Pages.

We can ship this dist folder as part of capa releases, and users would simply need to spin a server to use the application offline.

However, if we want to create a seperate release, for users who want to use capa offline without having to spin local server we need to add a plugin for this purpose (we cannot simply download the./dist release and browse to file:///path/to/index.html because of CORS error, see explanation here)

To solve this, we need to use vite-plugin-singlefile: it is a plugin to create a standalone dist/index.html - that bundles the entire JS/CSS/HTML - into a signle file. See documentation.

$ npm install vite-plugin-singlefile --save-dev       # install the plugin

The ./dist file will now contain a single index.html that can be used a standalone page. I have pre-built a sample that you can test run here.

Note: the resulting file is not meant to be edited manually. You should edit src/App.vue, then compile (npm run build) to generate a new dist/index.html release.

[mr-tz]

Neat, thanks for the details and documentation. The resulting standalone HTML looks good and is exactly what I had in mind. Should we continue to automate the build steps you've documented here via GitHub Actions?

As next step, I'd suggest to either:

1. automate the build via GH Actions #2088
2. move all previous functionality to use Vue.js https://github.com/mandiant/capa/issues/2179