Improve newcomer onboarding january 2023 (hobbyfarm#146)

* Improve CONTRIBUTING.md

* Merge gitignore entried in root gitignore file

* Fix README.md

* Update package-lock.json to lockfileVersion 2

* Remove warning in tsconfig.json file

* Cosmetic code changes (remove / add empty lines)

* Merge CONTRIBUTING file in README and remove run with docker-compose

* Fix typo in README

* Remove useless nginx.conf

* Rename cicd folder in .docker

* Remove useless .env.example

* Split GitHub actions in CI & PKG pipelines

* Add badges in README

* Fix badges

* Fix English typo

* Update README

* Update README

cicd/stage-release/etc/nginx/conf.d/default.conf → .docker/stage-release/etc/nginx/conf.d/default.conf

@@ -2,11 +2,10 @@ server {
     listen 80 default_server;
     server_name _;
     root /usr/share/nginx/html;
-    
+
     index index.html index.htm;
     location / {
         try_files $uri $uri/ /index.html;
         # This will allow you to refresh page in your angular app. Which will not give error 404.
     }
-
 }

cicd/Dockerfile → .github/workflows/Dockerfile-ci

@@ -1,11 +1,11 @@
-# Should only be used with GitHub Actions cicd
+# Should only be used with GitHub Actions CI pipeline
 # For local, refer to Dockerfile at root of project
 
 FROM nginx:stable-alpine
 
 COPY dist/* /usr/share/nginx/html
 
 # copy staged files
-COPY cicd/stage-release/ /
+COPY .docker/stage-release/ /
 
 ENTRYPOINT ["entrypoint.sh"]

.github/workflows/ci.yaml

@@ -0,0 +1,47 @@
+# Continuous Integration (Packaging) pipeline
+
+name: CI
+
+on:
+  push:
+    branches: [ "master" ]
+  pull_request:
+    branches: [ "master" ]
+  workflow_dispatch: {}
+
+concurrency:
+  group: "ci"
+  cancel-in-progress: true
+
+env:
+  app_image: hobbyfarm/admin-ui
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@master
+
+      - name: Setup node_modules cache
+        id: cache-nodemodules
+        uses: actions/cache@v3
+        env:
+          cache-name: cache-node-modules
+        with:
+          # cache node_modules to improve performance dramatically
+          path: node_modules
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build
+        run: npm run build:prod
+
+      # TODO: lint, sonar, tests
+
+      - name: Create container image
+        run: |
+          docker build -f .github/workflows/Dockerfile-ci -t hobbyfarm/admin-ui:${GIT_COMMIT_SHORT_HASH:-dev} .

.github/workflows/main.yaml → .github/workflows/pkg.yaml

@@ -1,5 +1,11 @@
-name: Main
-on: [push, pull_request]
+# Continuous Delivery (Packaging) pipeline
+
+name: PKG
+
+on:
+  push:
+    branches: [ "master" ]
+  workflow_dispatch: {}
 
 env:
   app_image: hobbyfarm/admin-ui
@@ -26,33 +32,17 @@ jobs:
       - name: Checkout
         uses: actions/checkout@master
 
-      - name: Setup node_modules cache
-        id: cache-nodemodules
-        uses: actions/cache@v3
-        env:
-          cache-name: cache-node-modules
-        with:
-          # cache node_modules to improve performance dramatically
-          path: node_modules
-          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
-
-      - name: Install deps
-        run: npm install
-
-      - name: Build
-        run: npm run build:prod
-
-      - name: Build
+      - name: Create container image
         run: |
-          docker build -f cicd/Dockerfile -t $app_image:${GIT_COMMIT_SHORT_HASH:-dev} .
+          docker build -f Dockerfile -t $app_image:${GIT_COMMIT_SHORT_HASH:-dev} .
 
-      - name: Docker Login
+      - name: Login container registry
         if: fromJSON(env.should_push_image)
         run: |
           echo "${{ secrets.REGISTRY_PASSWORD }}" \
             | docker login -u "${{ secrets.REGISTRY_USER }}" --password-stdin
 
-      - name: Docker Push
+      - name: Push container image to registry
         if: fromJSON(env.should_push_image)
         run: |
           safe_ref=$(echo "${{ github.ref_name }}" | sed -e 's/[^a-zA-Z0-9\-\.]/-/g')
@@ -61,7 +51,7 @@ jobs:
           docker tag $app_image:${GIT_COMMIT_SHORT_HASH:-dev} $publish_tag
           docker push $publish_tag
 
-      - name: Docker Push Latest
+      - name: Push latest tag
         if: fromJSON(env.should_tag_latest)
         run: |
           docker tag $app_image:${GIT_COMMIT_SHORT_HASH:-dev} $app_image:latest

.gitignore

@@ -45,5 +45,8 @@ testem.log
 .DS_Store
 Thumbs.db
 
-# docker-compose enviornment variables
+# local environment variables
 /.env
+
+# local configuration file
+/src/environments/environment.local.ts

Dockerfile

@@ -11,13 +11,12 @@ RUN npm install
 COPY . .
 RUN npm run build:prod
 
-
 ###### release image #####
 FROM nginx:stable-alpine
 
 COPY --from=sdk /app/dist/* /usr/share/nginx/html
 
 # copy staged files
-COPY cicd/stage-release/ /
+COPY .docker/stage-release/ /
 
 ENTRYPOINT ["entrypoint.sh"]

README.md

@@ -1,6 +1,10 @@
-# Hobbyfarm Admin
+# HobbyFarm Admin
 
-This is the admin UI for https://github.com/hobbyfarm
+[![CI](https://github.com/hobbyfarm/admin-ui/actions/workflows/ci.yaml/badge.svg?branch=master)](https://github.com/hobbyfarm/admin-ui/actions/workflows/ci.yaml)
+[![PKG](https://github.com/hobbyfarm/admin-ui/actions/workflows/pkg.yaml/badge.svg?branch=master)](https://github.com/hobbyfarm/admin-ui/actions/workflows/pkg.yaml)
+[![Docker Image Version (latest semver)](https://img.shields.io/docker/v/hobbyfarm/admin-ui?label=Docker)](https://hub.docker.com/r/hobbyfarm/admin-ui)
+
+This is the admin web UI for [HobbyFarm](https://github.com/hobbyfarm). This is a Single Page Application (SPA) developped with Angular.
 
 ## Configuration
 
@@ -22,4 +26,17 @@ To customize logos, mount them into the container at `/usr/share/nginx/html/asse
 
 ## Contributing
 
-If you're interested in contributing, see [CONTRIBUTING.md](CONTRIBUTING.md)
+### Local Development
+
+To modify Angular configuration for your local environment, copy `src/environments/environment.local.example.ts` to `src/environments/environment.local.ts` and update the variables as needed. This is particulary useful for `environment.server`, to match your local gargantua server URL.
+
+This web application needs gargantua (backend) to be working, look at [gargantua](https://github.com/hobbyfarm/gargantua/blob/master/CONTRIBUTING.md) for more information. The default authentification is admin/admin.
+
+Execute from a terminal:
+
+```bash
+npm install
+npm run start:local
+```
+
+The Angular server will start a watch loop and listen on [localhost:4200](http://localhost:4200).

build.sh

@@ -8,10 +8,10 @@ echo "Building HobbyFarm Amdin UI $PACKAGE_VERSION"
 
 ng build --prod --aot
 
-docker build -t "hobbyfarm/admin-ui" . 
+docker build -t "hobbyfarm/admin-ui" .
 
 docker tag "hobbyfarm/admin-ui" "hobbyfarm/admin-ui:$PACKAGE_VERSION"
 
 docker push "hobbyfarm/admin-ui:$PACKAGE_VERSION"
 
-echo "HobbyFarm Admin UI built. Pushed version $PACKAGE_VERSION to Docker hub"
+echo "HobbyFarm Admin UI built. Pushed version $PACKAGE_VERSION to Docker hub"