Difference between revisions of "IT-SDK-Angular"

From wiki.samerhijazi.net
Jump to navigation Jump to search
(→‎Web-Links)
 
(19 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
* Source: https://angular.io/docs
+
=Web-Links=
−
* Source: https://blog.codecentric.de/en/2019/03/docker-angular-dockerize-app-easily/
+
* Angular E2E Testing: Protractor is dead, long live Cypress! https://www.youtube.com/watch?v=-lWY0X-ybME
−
* Source: https://mherman.org/blog/dockerizing-an-angular-app/
+
* https://nodejs.org/de/docs/guides/nodejs-docker-webapp/
−
* SRC: https://malcoded.com/posts/angular-docker/
+
* web-src: https://angular.io/docs
−
* SRC: https://www.whitehorses.nl/blog/running-angular-application-docker-dummies
+
* Web-src: https://angular.io/cli/generate
 +
* web-src: https://mherman.org/blog/dockerizing-an-angular-app/
 +
* web-src: https://malcoded.com/posts/angular-docker/
 +
* web-src: https://www.whitehorses.nl/blog/running-angular-application-docker-dummies
 +
* web-src: https://www.attosol.com/npm-notes-tips-tricks/
 
* Angular requires Node.js version 10.9.0 or later.
 
* Angular requires Node.js version 10.9.0 or later.
  
 +
=Setting=
 
<pre class="code">
 
<pre class="code">
−
npm install -g @angular/cli
+
$ npm config get userconfig
−
ng new my-app
+
$ npm config list
−
ng serve --open
+
...
 +
$ npm config set registry "http://registry.npmjs.org/"
 +
$ npm config set http_proxy "127.0.0.0"
 +
$ npm config set https_proxy "127.0.0.0"
 +
$ npm config set noproxy "127.0.0.0"
 +
$ npm config set strict-ssl false
 +
</pre>
 +
 
 +
=Setting Protractor=
 +
<pre class="code">
 +
$ npm install -g protractor
 +
$ webdriver-manager update --ignore_ssl --versions.chrome=77.0.3865.120 --proxy $HTTP_PROXY
 +
</pre>
 +
 
 +
=Angular-CLI (ng) Options=
 +
<pre class="code">
 +
new    : Greate new workspace.
 +
build  : Compiles the app.
 +
serve  : Builds and Serves the app.
 +
deploy : Invokes the builder for a specified project.
 +
</pre>
 +
=Life-Cycle: ng=
 +
<pre class="code">
 +
$ npm install -g @angular/cli     # Install Angular CLI
 +
$ ng new angular-app
 +
$ ng serve --open --port 4321    # Run the application on port 4321 and open
 +
</pre>
 +
<pre class="code">
 +
$ del package-lock.json
 +
$ npm cache clear --force
 +
$ npm config set registry http://registry.npmjs.org/
 +
</pre>
 +
 
 +
=Docker-File=
 +
==Basic==
 +
<pre class="code">
 +
FROM node:11.6.0-alpine AS builder
 +
COPY . ./angular-app
 +
WORKDIR /angular-app
 +
RUN npm install
 +
RUN $(npm bin)/ng build --prod
 +
 
 +
FROM nginx:1.15.8-alpine
 +
COPY --from=builder /angular-app/dist/angular-app/ /usr/share/nginx/html
 +
</pre>
 +
 
 +
==With QA==
 +
<pre class="code">
 +
FROM node:12.2.0 as build
 +
#------------------------------
 +
# install chrome for protractor tests
 +
RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
 +
RUN sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
 +
RUN apt-get update && apt-get install -yq google-chrome-stable
 +
#------------------------------
 +
WORKDIR /app                          # set working directory
 +
ENV PATH /app/node_modules/.bin:$PATH  # add `/app/node_modules/.bin` to $PATH
 +
#--------------------------------------# install and cache app dependencies
 +
COPY package.json /app/package.json
 +
RUN npm install
 +
RUN npm install -g @angular/cli@7.3.9
 +
COPY . /app
 +
# run tests
 +
RUN ng test --watch=false
 +
RUN ng e2e --port 4202
 +
# generate build
 +
RUN ng build --output-path=dist
 +
############
 +
### prod ###
 +
############
 +
FROM nginx:1.16.0-alpine
 +
# copy artifact build from the 'build environment'
 +
COPY --from=build /app/dist /usr/share/nginx/html
 +
 
 +
EXPOSE 80                            # expose port 80
 +
CMD ["nginx", "-g", "daemon off;"]  # run nginx
 +
</pre>
 +
=Docker-CMD=
 +
<pre class="code">
 +
$ docker build -t angular-docker .
 +
$ docker run -d -p 80:80 --env BACKEND_API_URL=yourApiUrl --env DEFAULT_LANGUAGE=de angular-docker
 
</pre>
 
</pre>

Latest revision as of 00:10, 6 October 2021

Web-Links

Setting

$ npm config get userconfig
$ npm config list
...
$ npm config set registry "http://registry.npmjs.org/"
$ npm config set http_proxy "127.0.0.0"
$ npm config set https_proxy "127.0.0.0"
$ npm config set noproxy "127.0.0.0"
$ npm config set strict-ssl false

Setting Protractor

$ npm install -g protractor
$ webdriver-manager update --ignore_ssl --versions.chrome=77.0.3865.120 --proxy $HTTP_PROXY

Angular-CLI (ng) Options

new    : Greate new workspace.
build  : Compiles the app.
serve  : Builds and Serves the app.
deploy : Invokes the builder for a specified project.

Life-Cycle: ng

$ npm install -g @angular/cli     # Install Angular CLI
$ ng new angular-app
$ ng serve --open --port 4321     # Run the application on port 4321 and open

$ del package-lock.json
$ npm cache clear --force
$ npm config set registry http://registry.npmjs.org/

Docker-File

Basic

FROM node:11.6.0-alpine AS builder
COPY . ./angular-app
WORKDIR /angular-app
RUN npm install
RUN $(npm bin)/ng build --prod

FROM nginx:1.15.8-alpine
COPY --from=builder /angular-app/dist/angular-app/ /usr/share/nginx/html

With QA

FROM node:12.2.0 as build
#------------------------------
# install chrome for protractor tests
RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
RUN sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
RUN apt-get update && apt-get install -yq google-chrome-stable
#------------------------------
WORKDIR /app                           # set working directory
ENV PATH /app/node_modules/.bin:$PATH  # add `/app/node_modules/.bin` to $PATH
#--------------------------------------# install and cache app dependencies
COPY package.json /app/package.json
RUN npm install
RUN npm install -g @angular/cli@7.3.9
COPY . /app
# run tests
RUN ng test --watch=false
RUN ng e2e --port 4202
# generate build
RUN ng build --output-path=dist
############
### prod ###
############
FROM nginx:1.16.0-alpine
# copy artifact build from the 'build environment'
COPY --from=build /app/dist /usr/share/nginx/html

EXPOSE 80                            # expose port 80
CMD ["nginx", "-g", "daemon off;"]   # run nginx

Docker-CMD

$ docker build -t angular-docker .
$ docker run -d -p 80:80 --env BACKEND_API_URL=yourApiUrl --env DEFAULT_LANGUAGE=de angular-docker
Retrieved from "http://wiki.samerhijazi.net/index.php?title=IT-SDK-Angular&oldid=2096"