Merge pull request #7029 from abpframework/chore/verdaccio-containers

Added Verdaccio Docker compose to create real-like test environment for Angular UI
5 years ago · 77fcd1bf28
11 changed files with 283 additions and 2 deletions
--- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
+++ b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
@ -35,8 +35,41 @@
  </ng-template>

  <ng-template #abpBody>
-    <form [formGroup]="form" (ngSubmit)="save()" validateOnSubmit>
-      <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
+    <ng-template #loaderRef
+      ><div class="text-center"><i class="fa fa-pulse fa-spinner"></i></div
+    ></ng-template>
+
+    <form *ngIf="form; else loaderRef" [formGroup]="form" (ngSubmit)="save()">
+      <ul ngbNav #nav="ngbNav" class="nav-tabs">
+        <li ngbNavItem>
+          <a ngbNavLink>{{ 'AbpIdentity::UserInformations' | abpLocalization }}</a>
+          <ng-template ngbNavContent>
+            <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
+          </ng-template>
+        </li>
+
+        <li ngbNavItem>
+          <a ngbNavLink>{{ 'AbpIdentity::Roles' | abpLocalization }}</a>
+          <ng-template ngbNavContent>
+            <div
+              *ngFor="let roleGroup of roleGroups; let i = index; trackBy: trackByFn"
+              class="custom-checkbox custom-control mb-2"
+            >
+              <input
+                type="checkbox"
+                class="custom-control-input"
+                [attr.id]="'roles-' + i"
+                [formControl]="roleGroup.controls[roles[i].name]"
+              />
+              <label class="custom-control-label" [attr.for]="'roles-' + i">{{
+                roles[i].name
+              }}</label>
+            </div>
+          </ng-template>
+        </li>
+      </ul>
+
+      <div class="mt-2 fade-in-top" [ngbNavOutlet]="nav"></div>
    </form>
  </ng-template>

--- a/npm/verdaccio-containers/.gitignore
+++ b/npm/verdaccio-containers/.gitignore
@ -0,0 +1,2 @@
+publish-packages/abp/
+serve-app/app
--- a/npm/verdaccio-containers/README.md
+++ b/npm/verdaccio-containers/README.md
@ -0,0 +1,40 @@
+## Running containers that publishing packages to the Verdaccio
+
+### Goal
+
+We test all templates before the releasing. However, since we test packages without publishing, we may be faced breaking errors. That's why, this compose prepares the real-like test environment.
+
+
+The duty of this compose is to publish the packages to the [Verdaccio](https://verdaccio.org/) (a custom NPM server) running in the container and to serve the Angular pro template (copied from `abp/templates/app/angular` folder) that is consumed these packages from the Verdaccio.
+
+
+### Before starting
+
+Make sure the [Docker](https://docs.docker.com/get-docker/) and [Docker Compose](https://docs.docker.com/compose/install/) are installed on your PC.
+
+Before starting, the following command should be run to prepare the environment:
+
+```bash
+npm install && npm run prepare
+```
+
+### Getting Started
+
+To build and up the compose, run the following command:
+
+```bash
+docker-compose rm -f && docker-compose build --build-arg next_version="<version here>" && docker-compose up
+```
+
+> Be sure to replace the "<version here>" with the version you want published. E.g: 4.1.0
+
+This command;
+- Removes the containers if worked before
+- Builds the containers
+- Runs the containers.
+
+The processes may take 30~ minutes.
+
+The Angular app will be running when you see the "Listening on http://localhost:4200" log. If you see the log, open the browser and navigate to the http://localhost:4200.
+
+The running Angular app can connect to the backend that is running on http://localhost:44305. Go to the `abp/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.DbMigrator` folder and run the project to create (or update) the database. Then run the HttpApiHost project which is in the `abp/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.HttpApi.HostWithIds` folder. Then refresh the browser. You'll see the Angular app is working properly.
--- a/npm/verdaccio-containers/docker-compose.yml
+++ b/npm/verdaccio-containers/docker-compose.yml
@ -0,0 +1,41 @@
+version: '3.9'
+
+services:
+  verdaccio:
+    image: verdaccio/verdaccio:4.0
+    container_name: 'verdaccio'
+    networks:
+      - docker_network
+    environment:
+      - VERDACCIO_PORT=4873
+    ports:
+      - '4873:4873'
+    expose:
+      - '4873/tcp'
+  publish:
+    build:
+      context: ./publish-packages
+      dockerfile: Dockerfile
+      args:
+        next_version: ''
+    container_name: 'verdaccio_publish'
+    networks:
+      - docker_network
+    depends_on:
+      - verdaccio
+    expose:
+      - '4872'
+  app:
+    build: ./serve-app
+    container_name: 'verdaccio_app'
+    networks:
+      - docker_network
+    depends_on:
+      - publish
+    ports:
+      - '4200:4200'
+    expose:
+      - '4200/tcp'
+networks:
+  docker_network:
+    driver: bridge
--- a/npm/verdaccio-containers/package-lock.json
+++ b/npm/verdaccio-containers/package-lock.json
@ -0,0 +1,50 @@
+{
+  "name": "verdaccio-publish",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "at-least-node": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
+      "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg=="
+    },
+    "fs-extra": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.0.1.tgz",
+      "integrity": "sha512-h2iAoN838FqAFJY2/qVpzFXy+EBxfVE220PalAqQLDVsFOHLJrZvut5puAbCdNv6WJk+B8ihI+k0c7JK5erwqQ==",
+      "requires": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^1.0.0"
+      }
+    },
+    "graceful-fs": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
+      "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw=="
+    },
+    "jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "requires": {
+        "graceful-fs": "^4.1.6",
+        "universalify": "^2.0.0"
+      },
+      "dependencies": {
+        "universalify": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+          "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ=="
+        }
+      }
+    },
+    "universalify": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz",
+      "integrity": "sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug=="
+    }
+  }
+}
--- a/npm/verdaccio-containers/package.json
+++ b/npm/verdaccio-containers/package.json
@ -0,0 +1,16 @@
+{
+  "name": "verdaccio-publish",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "prepare": "node prepare"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "fs-extra": "^9.0.1"
+  },
+  "devDependencies": {}
+}
--- a/npm/verdaccio-containers/prepare.js
+++ b/npm/verdaccio-containers/prepare.js
@ -0,0 +1,16 @@
+const fse = require('fs-extra');
+const path = require('path')
+
+
+// packages
+fse.removeSync(path.join(__dirname, 'publish-packages/abp'))
+
+fse.removeSync(path.join(__dirname, '../ng-packs/node_modules'))
+fse.removeSync(path.join(__dirname, '../ng-packs/scripts/node_modules'))
+fse.copySync(path.join(__dirname, '../ng-packs'), path.join(__dirname, 'publish-packages/abp/npm/ng-packs'), {overwrite: true, errorOnExist: false, })
+
+// app angular template
+fse.removeSync(path.join(__dirname, 'serve-app/app'))
+
+fse.removeSync(path.join(__dirname, '../../templates/app/angular/node_modules'));
+fse.copySync(path.join(__dirname, '../../templates/app/angular'), path.join(__dirname, 'serve-app/app'), {overwrite: true, errorOnExist: false, })
--- a/npm/verdaccio-containers/publish-packages/Dockerfile
+++ b/npm/verdaccio-containers/publish-packages/Dockerfile
@ -0,0 +1,12 @@
+FROM node:14
+ARG next_version
+ENV next_version=$next_version
+RUN mkdir /publish
+COPY . /publish
+WORKDIR /publish
+EXPOSE 4872/tcp
+
+RUN apt-get update
+RUN apt-get install nano
+RUN chmod +x ./entrypoint.sh
+CMD /bin/bash ./entrypoint.sh
--- a/npm/verdaccio-containers/publish-packages/entrypoint.sh
+++ b/npm/verdaccio-containers/publish-packages/entrypoint.sh
@ -0,0 +1,40 @@
+#!/bin/bash
+echo "v" $next_version " packages to be published to the verdaccio"
+
+
+echo "Waiting for the Verdaccio"
+while ! curl -v --silent verdaccio:4873 &> /dev/null
+do
+    printf "%c" "."
+done
+
+var="$(curl -v --silent verdaccio:4873 2>&1 | grep Trying)"
+echo $var
+
+curl -XPUT -H "Content-type: application/json" -d '{ "name": "volo", "password": "123456", "email": "verdaccio@volo.com" }' 'verdaccio:4873/-/user/org.couchdb.user:your_username'
+
+npx npm-cli-login -u volo -p 123456 -e "verdaccio@volo.com" -r "http://verdaccio:4873"
+npm whoami --registry http://verdaccio:4873
+
+
+cd /publish/abp/npm/ng-packs/scripts
+
+npm install
+
+echo "Running the publish script for abp packages"
+
+npm run publish-packages -- --nextVersion $next_version --skipGit --registry "http://verdaccio:4873"
+
+cd /publish/abp/npm/ng-packs
+
+echo '@abp:registry=http://verdaccio:4873' >> .npmrc
+
+npx npm-check-updates --filter '/^@(abp)\/.*$/' --registry http://verdaccio:4873 --target greatest --packageFile package.json -u
+
+cd scripts
+
+npm install
+
+echo "Running the publish script for abp packages"
+
+npm run publish-packages -- --nextVersion $next_version --skipGit --registry "http://verdaccio:4873"
--- a/npm/verdaccio-containers/serve-app/Dockerfile
+++ b/npm/verdaccio-containers/serve-app/Dockerfile
@ -0,0 +1,10 @@
+FROM node:14
+RUN mkdir /app
+COPY . /app
+WORKDIR /app
+EXPOSE 4200/tcp
+
+RUN apt-get update
+RUN apt-get install nano
+RUN chmod +x ./entrypoint.sh
+CMD /bin/bash ./entrypoint.sh
--- a/npm/verdaccio-containers/serve-app/entrypoint.sh
+++ b/npm/verdaccio-containers/serve-app/entrypoint.sh
@ -0,0 +1,21 @@
+#!/bin/bash
+while ping -c1 publish &> /dev/null 
+do echo "Waiting for publishing to be done"; sleep 10; 
+done;
+
+echo "Serving app"
+
+cd /app/app
+
+echo "@abp:registry=http://verdaccio:4873" >> .npmrc
+echo '@volo:registry=http://verdaccio:4873' >> .npmrc
+
+npx npm-check-updates --filter '/^@(abp|volo)\/.*$/' --registry http://verdaccio:4873 --target greatest --packageFile package.json -u
+
+yarn
+
+yarn ng build --prod
+
+cd dist/MyProjectName
+
+npx http-server-spa . index.html 4200