diff --git a/README.md b/README.md index b7f16a1..e67b62c 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ -# bubble-web +bubble-web +========== Bubble frontend VueJS web application @@ -7,19 +8,49 @@ The initial basis for the bubble-web frontend was Jason Watmore's wonderfully we The [LICENSE](vue-vuex-registration-login-example-docs/LICENSE) and [README.md](vue-vuex-registration-login-example-docs/README.md) files for this code are in the [vue-vuex-registration-login-example-docs](vue-vuex-registration-login-example-docs) directory. -To use this frontend with a Bubble API: - -Build it: - - npm install - webpack - -In your `${HOME}/.bubble-test.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 - -In the `bubble/bubble-server` directory, run the test named `bubble.test.dev.DevServerTest`, which will run the API and perform initial activation. - - mvn -Dtest=bubble.test.dev.DevServerTest test - -You can now test the frontend. If you make changes to the frontend code, you can simply run `webpack` again and reload the page in your browser. +# 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 is safe to run it again, from this (the `bubble-web`) directory: +```shell script +npm install +``` + +# Build the Webapp +Bubble uses [webpack](https://webpack.js.org/) to build the Bubble VueJS webapp. + +In the `bubble-web` directory, run this to build the webapp: +```shell script +webpack +``` +The output files will be in the `bubble-web/dist` directory. + +To perform a production build, run: +```shell script +webpack --mode=production +``` + +# Enable Hot Reloading +If you have a Bubble API running, 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): +```shell script +export BUBBLE_ASSETS_DIR=/path/to/bubble-web/dist +``` + +# Run the API Server +To run the backend API, run this from the `bubble` directory (one level above `bubble-web`): +```shell script +./bin/run.sh +``` + +# Use the Webapp! +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.