The Bubble web UI in VueJS
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Jonathan Cobb 45fb9fa7ca bump version 1 month ago
src set version, add copyright header 2 months ago
vue-vuex-registration-login-example-docs first commit 1 year ago
.babelrc Implement lazy loading and new UI layout (#17) 7 months ago
.gitignore do not commit actual 5 months ago update docs, readme 2 months ago update docs, readme 2 months ago
package-lock.json bump version 2 months ago
package.json bump version 1 month ago
webpack.config.js revert: set explicity entry point 2 months ago


Bubble frontend VueJS web application

The initial basis for the bubble-web frontend was Jason Watmore’s wonderfully well-written Vue/Vuex Registration and Login Example. The LICENSE and files for this code are in the vue-vuex-registration-login-example-docs directory.

Install Requirements

If you’ve ever built the Bubble API jar, you have already run npm install and can skip this step.

If you’re not sure, it’s safe to run again. In the bubble-web directory, run:

npm install

Build the Webapp

Bubble uses npm and webpack to build the Bubble VueJS webapp.

In the bubble-web directory, run this to build the webapp:

npm run build

The output files will be in the bubble-web/dist directory.

To perform a development build (for example, so the VueJS firefox/chrome plugin will work), run:

npm run dev-build

Run Webapp with a Remote Bubble API Server

To connect to a remote Bubble API, set the BUBBLE_API environment variable and run:

BUBBLE_API= npm run start

This will run a local web server where you can use the webapp. The local web server will proxy API calls to the remote Bubble API server.

Run Webapp with a Local Bubble API Server

To run the backend API locally, run this from the bubble directory (one level above bubble-web):


If this is the first time you have run the Bubble API, you will need to activate it.

Enable Hot Reloading

If you have a Bubble API running locally, you can update the web UI without restarting the server.

Set the BUBBLE_ASSETS_DIR environment variable in the Bubble environment file to be the path to the bubble-web/dist directory, then start the API server. It will serve static assets from that directory, so you can update the webapp just by overwriting those files via webpack.

To enable hot reloading: in your ${HOME}/.bubble.env file, add this line (fix the path to point to the correct location of your bubble-web/dist directory):

export BUBBLE_ASSETS_DIR=/path/to/bubble-web/dist

You can now use and test the frontend.

If you make changes to the frontend code, you can simply run webpack again and reload the page in your browser.