Better development experience

backend/README.md

@@ -5,14 +5,19 @@ QA-Board's backend built as a [flask](https://flask.pocoo.org) application. It e
 ```bash
 git clone git@gitlab-srv:common-infrastructure/qaboard.git
 cd qaboard
-docker-compose -f docker-compose.yml -f development.yml up
-# edit development.yml as suits your needs, e.g. change QABOARD_DB_HOST
+docker-compose -f docker-compose.yml -f development.yml up  -d 
+```
+
+> **Tip:** If you called `npm install` in the *webapp/*, (see the [README](../webapp)), a frontend connected to the dev backend will also be up on port 3000.
 
-# if you started with "up -d", get logs and a shell with:
+Get logs and a shell with:
+```bash
 docker-compose -f docker-compose.yml -f development.yml logs -f backend
 docker-compose -f docker-compose.yml -f development.yml exec backend bash
 ```
 
+Edit _development.yml_ as suits your needs to e.g. change connect to another database using `QABOARD_DB_HOST`.
+
 Consult also:
 - [Starting QA-Board Guide](https://samsung.github.io/qaboard/docs/start-server)
 - [Troubleshooting Guide](https://samsung.github.io/qaboard/docs/backend-admin/troubleshooting)
@@ -35,7 +40,7 @@ Flask helps us create an HTTP server. It exposes API endpoints defined in the [a
 ---
 
 
-## Backups (WIP, needs update!)
+## Backups (WIP, needs update after move to `docker-compose`!)
 ```bash
 # Take a look at:
 # deployment/create-backup.sh
@@ -45,18 +50,18 @@ Flask helps us create an HTTP server. It exposes API endpoints defined in the [a
 export LC_ALL=C.UTF-8
 export LANG=C.UTF-8
 # from a computer with the  same postgresql major version, run something like...
-pg_dump --dbname=qaboard --username=ci --password -h localhost  > backup.07-01-2019.sql
+pg_dump --dbname=qaboard --username=qaboard --password -h localhost  > backup.07-01-2019.sql
 
 ```
 
-# Recovery
+## Recovery
 ```bash
 > docker exec -it qaboard-production bash
 export LC_ALL=C.UTF-8 LANG=C.UTF-8
 ps -aux | grep '\(flask run\|sudo .*uwsgi\)' | grep -v grep | awk '{print $2}' | xargs -I{} sudo kill {}
-auth='--username=ci --password -h localhost'
+auth='--username=qaboard --password -h localhost'
 PGPASS=$HOME/.pgpass
-auth='--username=ci --no-password -h localhost'
+auth='--username=qaboard --no-password -h localhost'
 
 dropdb $auth qaboard
 # Password:

development.yml

@@ -1,6 +1,7 @@
 version: "3.5"
 
 services:
+  # don't show logs from those services
   pgadmin:
     logging:
       driver: none
@@ -10,9 +11,6 @@ services:
   cantaloupe:
     logging:
       driver: none
-  # backend:
-  #   logging:
-  #     driver: none
 
   proxy:
     environment:
@@ -23,16 +21,36 @@ services:
     - ./qaboard:/qaboard/qaboard
     - ./backend:/qaboard/backend
     environment:
-    # - QABOARD_DB_ECHO=true
+    - QABOARD_DB_ECHO=true
     - UWSGI_STATS=true
+    - FLASK_APP=backend
     - FLASK_ENV=development
-    # For a flask debugging server
-    # $ "docker-compose run backend 'QABOARD_DB_ECHO=True cd /qaboard/backend && FLASK_APP=backend FLASK_DEBUG=1 flask run --host 0.0.0.0 --with-threads --port 5002'"
+    - FLASK_DEBUG=1
+    # Start a flask debug server instead of the full uwsgi
+    # To use it, comment out, as well as frontent:environment below
+    working_dir: /qaboard/backend
+    command: flask run --host 0.0.0.0 --with-threads --port 5152
     ports:
-    - ${QABOARD_PORT:-5002}:5002
+    - 5152:5152
+    #   logging:
+    #     driver: none
 
-  # website:
-  #   user: "11611:10"
-  #   volumes:
-  #   - ./website:/website
-
+
+  frontend:
+    volumes:
+    - ./webapp:/webapp
+    environment:
+    # Should we comment it out by default?
+    - HOST=0.0.0.0
+    - DANGEROUSLY_DISABLE_HOST_CHECK=true
+    - CHOKIDAR_USEPOLLING=true
+    # - REACT_EDITOR=code
+    # Relay API requests to your development server
+    - REACT_APP_QABOARD_API_HOST=http://backend:5152
+    - REACT_APP_QABOARD_HOST=http://proxy:5151
+    command: npm start
+    ports:
+    - 3000:3000
+    depends_on:
+    - proxy
+    - backend

docker-compose.yml

@@ -96,6 +96,9 @@ services:
       shm_size: 4gb
     volumes:
     - frontend_builds:/builds
+    # by default we assume you run the QA-Board on localhost, but will want to change this
+    environment:
+    - REACT_APP_QABOARD_HOST=http://localhost:5151
 
   website:
     image: docker.pkg.github.com/samsung/qaboard/website
@@ -155,6 +158,11 @@ services:
     command: sh -c 'java -Dcantaloupe.config=/etc/cantaloupe.properties -Dcom.sun.media.jai.disableMediaLib=true -Xms$${CANTALOUPE_MEM_START} -Xmx$${CANTALOUPE_MEM_MAX} -jar /usr/local/cantaloupe/cantaloupe-$${VERSION}.war'
 
 
+  # cron jobs
+  # https://github.com/getsentry/onpremise/blob/master/docker-compose.yml#L126-L133
+  # https://github.com/getsentry/onpremise/blob/master/cron/Dockerfile
+  # https://github.com/getsentry/onpremise/blob/master/cron/entrypoint.sh 
+
 
   # For convenience, we also bundle pgadmin
   # Login at localhost:5050, and use "password" as password

webapp/README.md

@@ -15,14 +15,20 @@ Web frontend for QA-Board.
 - Install the third-party packages and run the application:
 ```bash
 npm install
-# If not running QA-Board at http://localhost:5151 (default), edit src/setupProxy.js
 npm start
 #=> listenning on port 3000
 ``` 
+By default the application will proxy API requests to *http://localhost:5151*. If you prefer something else (e.g. a development server, the production server...), set
+
+```bash
+# bash-style environment variables
+export REACT_APP_QABOARD_HOST=http://your-server:port
+# proxy just for for /api
+export REACT_APP_QABOARD_API_HOST=http://your-server:port
+```
+
+The backend's [README](../backend) explains how to start a full dev server.
 
-:::tip
-To change which backend you connect to (e.g. not localhost but maybe the production backend), edit _webapp/src/setupProxy.js_.
-:::
 
 ## How does it work?
 - This project was started with [Create React App](https://github.com/facebookincubator/create-react-app). [Go to their README](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) to learn a lot about the dev environment (package manager, testing, proxying, formatting, linting, compilation, javascript features...)

webapp/src/setupProxy.js

@@ -2,14 +2,17 @@
 // https://github.com/chimurai/http-proxy-middleware
 const { createProxyMiddleware } = require('http-proxy-middleware');
 
-let QABOARD_SERVER_URL= "http://localhost:5151";
-// QABOARD_SERVER_URL_PROD= "https://qa";
+// by default we assume you run QA-Board on localhost
+let QABOARD_SERVER_URL= process.env.REACT_APP_QABOARD_HOST || "http://localhost:5151";
+// the api server doesn't serve the static content
+let REACT_APP_QABOARD_API_HOST= process.env.REACT_APP_QABOARD_API_HOST || QABOARD_SERVER_URL;
+
 
 module.exports = function(app) {
   app.use(
     '/api',
     createProxyMiddleware({
-      target: QABOARD_SERVER_URL,
+      target: REACT_APP_QABOARD_API_HOST,
       changeOrigin: true,
     })
   );
@@ -27,4 +30,4 @@ module.exports = function(app) {
       changeOrigin: true,
     })
   );
-}
+}

website/docs/specifying-configurations.md

@@ -77,7 +77,7 @@ def run():
     for c in context.obj["configurations"]:
       if isinstance(c, str): # Load from a file.
          # Supports absolute paths for free
-         config_path = Path('configurations') / f"{c}.yaml"
+         config_path = Path('configurations') / c if not c.exists() else c
          with config_path.open() as f:
              new_parameters = yaml.load(f)
       if isinstance(c, dict):

website/src/pages/index.js

@@ -9,9 +9,8 @@ import {Feature} from '../components/feature';
 import styles from './styles.module.css';
 
 
-const publish_github_samsung_private = process.env.PUBLISH === 'github_samsung_private' 
 const publish_github_samsung_public  = process.env.PUBLISH === 'github_samsung_public' 
-const is_for_webapp = !publish_github_samsung_private && !publish_github_samsung_public
+const is_for_webapp = !publish_github_samsung_public
 
 
 const features = [
@@ -63,7 +62,7 @@ function Home() {
                 'button button--secondary button--lg',
                 styles.getStarted,
               )}
-              to={useBaseUrl(is_for_webapp ? '/introduction' : '/docs/introduction')}
+              to={useBaseUrl('docs/introduction')}
             >
               Get Started
             </Link>