bubble-web

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 README.md 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=https://bubble-api.example.com/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):

./bin/run.sh

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.