feat: set server URL via env vars, and improvements to README (#280)

Co-authored-by: Erik Bjäreholt <erik.bjareholt@gmail.com>

Author: iloveitaly

.eslintrc.json

@@ -49,7 +49,8 @@
     "node": true
   },
   "globals": {
-    "PRODUCTION": false
+    "PRODUCTION": false,
+    "AW_SERVER_URL": false
   },
   "overrides": [
     {

README.md

@@ -11,7 +11,7 @@ A web-based UI for ActivityWatch, built with Vue.js
 Getting started with setting up the development environment is pretty straight forward:
 
 ```bash
-# Start an instance of aw-server running in testing mode (on port 5666, with a separate database), 
+# Start an instance of aw-server running in testing mode (on port 5666, with a separate database),
 # This is what the web UI will connect to by default when run in development mode.
 aw-qt --testing
 # or, to run without watchers:
@@ -26,6 +26,8 @@ npm ci
 npm run serve
 ```
 
+Alternatively, you can run `make dev` to install dependencies and serve the application locally.
+
 You might have to configure CORS for it to work, see the CORS section below.
 
 You may also want to generate fake data so you have something to test with, see: https://github.com/ActivityWatch/aw-fakedata/
@@ -53,8 +55,23 @@ The assets are stored in the following directories (relative to your installatio
  - aw-server-python: `activitywatch/aw-server/aw_server/static/`
  - aw-server-rust: `activitywatch/aw-server-rust/static/`
 
+Either copy the assets manually, or run `make build` from the `aw-server` parent directory to rebuild and copy the assets for you.
+
 Once you've put the files in the directories, you may have to do a hard refresh in your browser to invalidate any stale caches.
 
+If you want to actively iterate on aw-webui with your local production data, you'll want to use a development build, automatically update it, and connect a aw-server running against production data. To do this, in one terminal window run:
+
+```bash
+AW_SERVER_URL="'http://localhost:5600'" npx vue-cli-service build --watch --dest=../aw_server/static
+```
+
+If you want to add `debugger` statements in your code and otherwise break linting rules, you'll need to add a `--skip-plugins=no-debugger` to that command. Then,  in another terminal (with your venv activated, assuming you are using python aw-server) run:
+
+```shell
+poetry install
+aw-server
+```
+
 ## Tests
 
 Tests can be run with:

src/util/awclient.js

@@ -5,10 +5,7 @@ let baseURL = '';
 // If running with `npm node dev`, use testing server as origin.
 // Works since CORS is enabled by default when running `aw-server --testing`.
 if (!PRODUCTION) {
-  const protocol = 'http';
-  const hostname = '127.0.0.1';
-  const port = '5666';
-  baseURL = protocol + '://' + hostname + ':' + port;
+  baseURL = AW_SERVER_URL || 'http://127.0.0.1:5666';
 }
 
 const awc = new AWClient('aw-webui', { testing: !PRODUCTION, baseURL });

vue.config.js

@@ -28,6 +28,7 @@ module.exports = {
     plugins: [
       new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
       new webpack.DefinePlugin({
+        AW_SERVER_URL: process.env.AW_SERVER_URL,
         PRODUCTION: process.env.NODE_ENV === 'production',
       }),
       new CopyWebpackPlugin([{ from: 'static/', to: 'static' }]),