Docker environment for Angular–part 42

Trying the alpine container from https://github.com/microsoft/vscode-dev-containers/tree/master/containers . It does not work – the error was that it cannot mount the binding folder . I figure that it was a Docker issue, https://blogs.msdn.microsoft.com/stevelasker/2016/06/14/configuring-docker-for-windows-volumes/ .

Then I had a problem with “ tarball data for @angular/compiler@8.2.14 seems to be corrupted” – delete package.json for this.

This is the result 

  1. in folder .devcontainer : A DockerFileAng file that have a new line, RUN npm install -g @angular/cli
  2. in folder .devcontainer : A devcontainer.json file that have “appPort”: [4200], “postCreateCommand”: “npm i && echo ‘you should run npm start'”,
  3. Modified package.json, “start”: “ng serve –host 0.0.0.0”, – in order to publish the port.

 

Now I can open from VSCode with Remote Extension  – and use there without installing on my PC anything but VSCode + Docker + Remote Extension

You can find the sources at https://github.com/ignatandrei/InfoValutar/commit/2aba3e9ed667d03728916a784a969e28b1026ec6

Tools List 2019

Browsers

  1. Chrome
  2. Firefox
  3. Edge
  4. IE

Chrome Addons

  1. Advanced REST client
  2. Angular state inspector
  3. Angular Tracer for View Updates
  4. Augury
  5. BehindTheOverlay
  6. Ceev – Linkedin Resume Generator
  7. Chrome Apps & Extensions Developer Tool
  8. Chrome Media Router
  9. draw.io Desktop
  10. Exploratory Testing Chrome Extension
  11. Export links of all extensions
  12. File Icon for GitHub and GitLab
  13. Google Voice Search Hotword (Beta)
  14. Hacker Tab
  15. iMacros for Chrome
  16. Image Checker
  17. Images ON/OFF
  18. JavaScript Errors Notifier
  19. JSONView
  20. Kingsquare HTML Validator
  21. Library Detector
  22. LinkedIn Sales Navigator
  23. Microformats
  24. Minimal New Tab
  25. OneNote Web Clipper
  26. OneTab
  27. Open SEO Stats(Formerly: PageRank Status)
  28. Postman
  29. Project Naptha
  30. Puppeteer Recorder
  31. Quick Language Switcher
  32. React Developer Tools
  33. Request Maker
  34. RescueTime for Chrome and Chrome OS
  35. Resolution Test
  36. REST Console
  37. SelectorGadget
  38. Selenium IDE
  39. Send to Kindle for Google Chrome
  40. Slim Lists for Trello
  41. Sourcegraph
  42. StayFocusd
  43. Tag Assistant (by Google)
  44. T-boards
  45. Text Mode
  46. TheWebMiner Sitemap Generator
  47. Timeline Support
  48. TLDR This – Free automatic text summary tool
  49. Trelabels for Trello
  50. Trellists: Trello Lists Master
  51. Trello
  52. Trello List Filter
  53. TrelloExport
  54. Web Developer Checklist
  55. Window Resizer

Communications

  1. FaceBook Messenger
  2. SMS
  3. WhatsApp
  4. mail.yahoo.com
  5. gmail.com
  6. Skype

Continuous Integration

  1. Azure pipeline , https://dev.azure.com
  2. dotnet property
  3. coverlet
  4. reportgenerator
  5. Powershell Core
  6. Bash

Decompilers

  1. DotPeek

Frameworks

  1. .Net Core
  2. Angular

Hardware

  1. Surface Book
  2. Samsung Android Phone

IDE

  1. Notepad++
  2. Notepad
  3. Visual Studio 2019
  4. Visual Studio Code
  5. SSMS for SqlServer

Newsletters

  1. Code Project Daily
  2. Code Project Daily Build
  3. Code Project WebDeveloper
  4. DNK Daily
  5. JSK Daily
  6. SqlServer Central
  7. R weekly

Organizer

  • rescue time

  • Trello – major projects
  • Todoist – shopping list

RemoteViewers

  • TeamViewer

  • RemoteDesktop

Visual Studio  Code Extensions

  1. aaron-bond.better-comments
  2. adamhartford.vscode-base64
  3. alefragnani.Bookmarks
  4. christian-kohler.npm-intellisense
  5. CoenraadS.bracket-pair-colorizer
  6. csholmq.excel-to-markdown-table
  7. dbaeumer.vscode-eslint
  8. donjayamanne.githistory
  9. DotJoshJohnson.xml
  10. eamodio.gitlens
  11. eg2.vscode-npm-script
  12. esbenp.prettier-vscode
  13. fernandoescolar.vscode-solution-explorer
  14. formulahendry.auto-close-tag
  15. formulahendry.auto-rename-tag
  16. ginfuru.ginfuru-better-solarized-dark-theme
  17. Gruntfuggly.todo-tree
  18. hbenl.vscode-test-explorer
  19. hoovercj.vscode-dimmer
  20. humao.rest-client
  21. ionutvmi.path-autocomplete
  22. joelday.docthis
  23. johnpapa.vscode-peacock
  24. karigari.chat
  25. k–kato.docomment
  26. L13RARY.l13-diff
  27. mhutchie.git-graph
  28. ms-azure-devops.azure-pipelines
  29. ms-azuretools.vscode-azurefunctions
  30. ms-azuretools.vscode-docker
  31. msjsdiag.debugger-for-chrome
  32. ms-mssql.mssql
  33. ms-vscode.azure-account
  34. ms-vscode.csharp
  35. ms-vscode.powershell
  36. ms-vscode.vscode-typescript-tslint-plugin
  37. ms-vscode.vs-keybindings
  38. ms-vscode-remote.remote-containers
  39. ms-vscode-remote.remote-ssh
  40. ms-vscode-remote.remote-ssh-edit
  41. ms-vscode-remote.remote-ssh-explorer
  42. ms-vscode-remote.remote-wsl
  43. ms-vscode-remote.vscode-remote-extensionpack
  44. ms-vsliveshare.vsliveshare
  45. ms-vsliveshare.vsliveshare-audio
  46. ms-vsliveshare.vsliveshare-pack
  47. ms-vsts.team
  48. oderwat.indent-rainbow
  49. quicktype.quicktype
  50. redhat.vscode-yaml
  51. sdras.night-owl
  52. Shan.code-settings-sync
  53. tomoki1207.pdf
  54. tomoyukim.vscode-mermaid-editor
  55. vscode-icons-team.vscode-icons
  56. wayou.vscode-todo-highlight
  57. yzane.markdown-pdf
  58. yzhang.markdown-all-in-one

Other

  1. Docker
  2. Powershell
  3. Snipping tool
  4. Chrome Bookmarks
  5. imdisk
  6. 7zip
  7. GitHub

For 2020 , please add your suggestions at ignatandrei+wqryx2iezg0j5govtkur . ( the domain is : boards.trello.com)

Adding Angular to WebAPI site-part 41

First, I want to add an index.html file – to see the result.

For this, I add to the startup:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
         //more code
app.UseDefaultFiles();
app.UseStaticFiles();

I also add an index.html into a wwwroot folder ( also created into the root)

You can see the modifications here: https://github.com/ignatandrei/InfoValutar/commit/4deb32528aee7b667f22a38c8e96899052cbfd4c

Now I want to compile the Angular application and add the index html generated by Angular to the wwwroot site

I create a powershell ( easy for me , because you can install dotnet tool powershell )

echo “starting build angular”
cd InfovalutarWebAng
npm i
ng build  –prod –build-optimizer
cd ..

$source= “InfovalutarWebAng/dist/InfovalutarWebAng/”
$dest= “InfoValutarWebAPI/wwwroot/”
echo “delete files”
Get-ChildItem -Path $dest -Include *.* -File -Recurse | foreach { $_.Delete()}
echo “copy files”
Get-ChildItem -Path $source | Copy-Item -Destination $dest

and put in Azure Devops pipelines

 
– powershell: |
       cd InfoValutar
       .\copyAng.ps1
   displayName: copy angular site to web api

Now commit in GitHub (https://github.com/ignatandrei/InfoValutar/comAmit/5208036a4cb1da719692966880236dc33b1b2e74 )and waiting to see if it works

The error is : “The term ‘ng’ is not recognized as the name of a cmdlet, function, script file, or

The term ‘ng’ is not recognized as the name of a cmdlet, function, script file, or operable program. Check the

spelling of the name, or if a path was included, verify that the path is correct and try again.

Adding

npm i -g @angular/cli

It works!

Web site–Angular- part 40

Creating  Angular app

ng new InfovalutarWebAng

Then customizing to add angular material

ng add @angular/material

and https://material.angular.io/guide/schematics#navigation-schematic 

ng generate @angular/material:nav banks

Delete everyhing in app component ( without

<div class=”content” role=”main”>

add

<app-banks></app-banks>

)

See if it works. If yes, move the router outlet and footer to app-banks.

Now, I want to solve the CD and to run in a container for the people that do not have Angular installed  – or do not want to.

Remember how it was for .NET Core , that I need just an Internet Connection , Docker and VSCode  ? http://msprogrammer.serviciipeweb.ro/2019/12/04/debug-application-under-vscode-and-dockerpart-22/ 

Now it does not work – cannot load application because some bug in .NET Core . Why ? I have been going to .NET Core 3.1 and not updated the docker file…

ARG DOTNETCORE_VERSION=3.1

Now it loads – however, saying that the methid has not an implementation. Solving later.

Now going to

https://github.com/microsoft/vscode-dev-containers

to find same for Angular…

After some attempts, I have this files into .devcontainer

devcontainer.json

// For format details, see https://aka.ms/vscode-remote/devcontainer.json or the definition README at
// https://github.com/microsoft/vscode-dev-containers/tree/master/containers/alpine-3.10-git
{
     “name”: “Angular”,
     “dockerFile”: “DockerfileAng”,   
     // Uncomment the next line to have VS Code connect as an existing non-root user in the container.
     // On Linux, by default, the container user’s UID/GID will be updated to match your local user. See
     // https://aka.ms/vscode-remote/containers/non-root for details on adding a non-root user if none exist.
     // “remoteUser”: “vscode”,

    // Uncomment the next line if you will use a ptrace-based debugger like C++, Go, and Rust
     // “runArgs”: [ “–cap-add=SYS_PTRACE”, “–security-opt”, “seccomp=unconfined” ],
    
     // Use ‘settings’ to set *default* container specific settings.json values on container create.
     // You can edit these settings after create using File > Preferences > Settings > Remote.
     “settings”: {
         // This dev container does include /bin/bash if you prefer to use it instead of ash.
         “terminal.integrated.shell.linux”: “/bin/ash”
     },

    // Use ‘appPort’ to create a container with published ports. If the port isn’t working, be sure
     // your server accepts connections from all interfaces (0.0.0.0 or ‘*’), not just localhost.
     // “appPort”: [],

    // Uncomment the next line to run commands after the container is created.
     // “postCreateCommand”: “uname -a”,

    // Add the IDs of extensions you want installed when the container is created in the array
     // below. Note that some extensions may not work in Alpine Linux due to glibc dependencies
     // in native code inside the extension. See https://aka.ms/vscode-remote/linux for details.
     “extensions”: [],
     “postCreateCommand”: “cd InfovalutarWebAng && npm i”,
     “overrideCommand”:true,
     “shutdownAction”: “stopContainer”
}

and DockerFileAng

#————————————————————————————————————-
# Copyright (c) Microsoft Corporation. All rights reserved.
# Licensed under the MIT License. See https://go.microsoft.com/fwlink/?linkid=2090316 for license information.
#————————————————————————————————————-
FROM alpine:3.10

# This Dockerfile adds a non-root user with sudo access. Use the “remoteUser”
# property in devcontainer.json to use it. On Linux, the container user’s GID/UIDs
# will be updated to match your local UID/GID (when using the dockerFile property).
# See https://aka.ms/vscode-remote/containers/non-root-user for details.
ARG USERNAME=vscode
ARG USER_UID=1000
ARG USER_GID=$USER_UID

# Install git, bash, dependencies, and add a non-root user
RUN apk add –no-cache git bash libgcc libstdc++ \
     #
     # Create a non-root user to use if preferred – see https://aka.ms/vscode-remote/containers/non-root-user.
     && addgroup -g $USER_GID $USERNAME \
     && adduser -S -s /bin/bash -u $USER_UID -G $USERNAME $USERNAME \
     # [Optional] Add sudo support for the non-root user
     && apk add –no-cache sudo \
     && echo $USERNAME ALL=\(root\) NOPASSWD:ALL > /etc/sudoers.d/$USERNAME\
     && chmod 0440 /etc/sudoers.d/$USERNAME

RUN apk add –update npm
RUN npm install -g @angular/cli

Now I can run in remote container and ng serve from remote container ( do not forget to be in Angular folder and forward port from VSCode !)

Last Commit info–GitHub and AzureDevOps–part 39

I was thinking that I need to see the date of last CD – who done what. For this, I need 2 things: to have a controller/gui to show the info and the CD process, via GitHub/AzureDevOps  ,to take care of that.

For the part with code, the problem was pretty simple:

 

using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace InfoValutarWebAPI.Controllers
{
    /// <summary>
    /// info about commit
    /// </summary>
    public class LastCommitInfo
    {
        /// <summary>
        /// comment latest commit
        /// </summary>
        public string LatestCommit { get; set; }
        /// <summary>
        /// last date of commit
        /// </summary>
        public DateTime DateCommit { get; set; }
        /// <summary>
        /// last author of commit
        /// </summary>
        public string LastAuthor { get; set; }
    }
    /// <summary>
    /// controller about info the application
    /// </summary>
    [ApiController]
    [ApiVersion("1.0")]
    [Route("api/v{version:apiVersion}/rates")]
    public class InfoController
    {
        /// <summary>
        /// info about latest commit
        /// </summary>
        /// <returns></returns>
        public LastCommitInfo GetLatestCommit()
        {
            return
                new LastCommitInfo()
                {
                    LatestCommit = "{LatestCommit}",
                    DateCommit = DateTime.ParseExact("{DateCommit}", "yyyyMMdd:HHmmss", null),
                    LastAuthor = "{LastAuthor}"
                }
                ;
        }
    }
}

 

What about the CD process ?

Well, this was cumbersome. To see ALL the environment  variables, I used cmd /K set ( in command ) or Get-ChildItem Env: ( in powershell).

And I come with this:

A bash script to take the version

– bash: |

git log –format=’%s’ -1

git log –pretty=oneline | head -1

gitMessage=$(git log –format=’%s’ -1)

echo “##vso[task.setvariable variable=commitMessage;isOutput=true]$gitMessage”

displayName: Store commit message in variable

– powershell: .\modifyinfo.ps1

displayName: modify info

 

And a  .ps1 powershell

$file = “.\InfoValutar\InfoValutarWebAPI\Controllers\InfoController.cs”

$date = Get-Date -Format “yyyyMMdd:HHmmss”

Get-ChildItem Env:

$author= $Env:BUILD_SOURCEVERSIONAUTHOR

$commitText = $env:BASH_COMMITMESSAGE

((Get-Content -path $file -Raw) -replace ‘{LatestCommit}’,$commitText -replace ‘{LastAuthor}’,$author -replace ‘{DateCommit}’ , $date ) | Set-Content -Path $file

(Get-Content -path $file -Raw)

The result can be seen at  https://infovalutar.azurewebsites.net/api/v1.0/info

And one hour passes...
(This is the result of 1 hour per day auto-challenge as a full cycle developer for an exchange rates application)
( You can see the sources at https://github.com/ignatandrei/InfoValutar/ )
NrPost 
1Start
2Reading NBR from internet
3Source control and build
4Badge and test
5CI and action
6Artifacts and dotnet try
7Docker with .NET Try
8ECB
9Intermezzo - Various implementations for programmers
10Intermezzo - similar code - options
11Plugin implementation
12GUI for console
13WebAPI
14Plugin in .NET Core 3
15Build and Versioning
16Add swagger
17Docker - first part
18Docker - second part
19Docker - build Azure
20Pipeline send to Docker Hub
21Play with Docker - online
22Run VSCode and Docker
23Deploy Azure
24VSCode see tests and powershell
25Code Coverage
26Database in Azure
27Sql In Memory or Azure
28Azure ConString, RSS
29Middleware for backward compatibility
30Identical Tables in EFCore
31Multiple Data in EFCore
32Dot net try again
33Start Azure Function
34Azure function - deploy
35Solving my problems
36IAsyncEnumerable transformed to IEnumerable and making Azure Functions works
37Azure functions - final
38Review of 37 hours
39Last Commit in AzureDevOps
40Create Angular WebSite
41Add static Angular to WebAPI .NET Core
42Docker for Angular
43Angular and CORS
44SSL , VSCode, Docker
45Routing in Angular
46RxJS for Routing
47RxJs Unsubscribe

Exchange rates–what I have done in 37 hours–part 38

What I have create for now in 37 hours :

  1. A source control – https://github.com/ignatandrei/InfoValutar
  2. A plugin based software – you can use to load any kind of exchange rates, for anywhere , provided that you implement the interface – see implementation
  3. Tests for some of the code
  4. Deployment:
  5. A SqlServer database – to store datas
  6. An Azure Function  – https://azurefuncloaddata20191205080713.azurewebsites.net/ –  to load data at time based cron intervals
  7. A GitHub action to compile ,run tests , – https://github.com/ignatandrei/InfoValutar/actions
  8. An AzureDevops CI + CD  to do all 1-6 things +code coverage + deploy https://dev.azure.com/ignatandrei0674/InfoValutar/_build?definitionId=5&_a=summary

 

I did say it is a nice work for 37 hours of work, right ?

And one hour passes...
(This is the result of 1 hour per day auto-challenge as a full cycle developer for an exchange rates application)
( You can see the sources at https://github.com/ignatandrei/InfoValutar/ )
NrPost 
1Start
2Reading NBR from internet
3Source control and build
4Badge and test
5CI and action
6Artifacts and dotnet try
7Docker with .NET Try
8ECB
9Intermezzo - Various implementations for programmers
10Intermezzo - similar code - options
11Plugin implementation
12GUI for console
13WebAPI
14Plugin in .NET Core 3
15Build and Versioning
16Add swagger
17Docker - first part
18Docker - second part
19Docker - build Azure
20Pipeline send to Docker Hub
21Play with Docker - online
22Run VSCode and Docker
23Deploy Azure
24VSCode see tests and powershell
25Code Coverage
26Database in Azure
27Sql In Memory or Azure
28Azure ConString, RSS
29Middleware for backward compatibility
30Identical Tables in EFCore
31Multiple Data in EFCore
32Dot net try again
33Start Azure Function
34Azure function - deploy
35Solving my problems
36IAsyncEnumerable transformed to IEnumerable and making Azure Functions works
37Azure functions - final
38Review of 37 hours
39Last Commit in AzureDevOps
40Create Angular WebSite
41Add static Angular to WebAPI .NET Core
42Docker for Angular
43Angular and CORS
44SSL , VSCode, Docker
45Routing in Angular
46RxJS for Routing
47RxJs Unsubscribe

Software Year 2019 in review

This is what impressed me in 2019

  1. On 8 January https://blog.github.com/2019-01-07-new-year-new-github/
  2. On 21 January https://java.com/en/download/release_notice.jsp : Public updates for Oracle Java SE 8 released after January 2019 will not be available for business, commercial or production use without a commercial license.
  3. On 8 February Ie default browser
  4. On 12 February https://www.bleepingcomputer.com/news/security/windows95-v20-lets-you-play-doom-wolfenstein-3d-and-more/
  5. On 7 March Microsoft Calculator implementation
  6. On 13 March https://send.firefox.com/
  7. On 29 March https://www.redhat.com/en/blog/future-through-software-developers-red-hat-key
  8. On 3 April https://docs.microsoft.com/en-us/visualstudio/releases/2019/release-notes
  9. On 18 May https://arstechnica.com/gadgets/2019/05/microsoft-open-sources-algorithm-that-gives-bing-some-of-its-smarts/
  10. On 23 May https://blog.stephenwolfram.com/2019/05/launching-today-free-wolfram-engine-for-developers/
  11. On 24 May Photo to OCR to Excel
  12. On 2 June https://devblogs.microsoft.com/typescript/announcing-typescript-3-5/
  13. On 2 June https://blog.angular.io/version-8-of-angular-smaller-bundles-cli-apis-and-alignment-with-the-ecosystem-af0261112a27
  14. On 7 June https://techcrunch.com/2019/06/05/microsoft-and-oracle-link-up-their-clouds/
  15. On 11 June UIPath – with CoreWF
  16. On 11 June CoreWCF – community : https://www.infoq.com/news/2019/06/WCF-Decision/
  17. On 12 June Salesforce is buying data visualization company Tableau for $15.7B in all-stock deal
  18. On 24 June https://www.raspberrypi.org/blog/raspberry-pi-4-on-sale-now-from-35/
  19. On 25 July Oracle EF Core
  20. On 5 August https://mspoweruser.com/microsoft-will-disable-vbscript-in-internet-explorer-11-from-this-month/
  21. On 2 September https://www.oracle.com/database/technologies/appdev/dotnet/odtvscodequickstart.html
  22. On 11 September https://www.zdnet.com/article/java-finally-goes-all-in-on-open-source-with-the-release-of-jakarta-ee-8/
  23. On 14 October https://www.oracle.com/cloud/free/
  24. On 9 November TypeScript 3.7
  25. On 11 December https://techcommunity.microsoft.com/t5/Microsoft-Teams-Blog/Microsoft-Teams-is-now-available-on-Linux/ba-p/1056267
  26. On 11 December .NET Core 3.1

What I have done in 2019–and goals for 2020

In 2019

  1. I have learned
    • .NET Core  – up to the version 3.1
    • Angular-  up to the version 8.0
    • Docker –  up to the 19.3
    • TypeScript –up to 3.7
    • JavaScript frameworks for backend and mono-repo
  2. I have started
  3. Coordinating automation work at the office ( I am TD at EA )
  4. Written this blog and series about
  5. Become an MVP again https://mvp.microsoft.com/en-us/PublicProfile/4025203?fullName=Ignat%20Andrei
  6. Organizing 12 ADCES meetings – Bucharest meetup about .NET and programming technologies : https://www.meetup.com/Bucharest-A-D-C-E-S-Meetup/
  7. Speaking at various conferences about .NET Core and Angular – see my previous MVP track

For 2020 I want

  1. Keep learning new versions of .NET Core / Angular / TypeScript / Docker
  2. Start learn AI / ML so I can be proficient ( starting point my InfoValutar)
  3. Finish migrating InfoValutar to Azure
  4. Continuing ADCES
  5. Continuing blogging ( this blog!)
  6. Speak at conferences
  7. Doing good work at the office
  8. Starting again the video series about tools in 5 minutes – maybe separating in C# and general programming tools ?
  9. Become MVP again

Basically, the same thing as for this year.

Andrei Ignat weekly software news(mostly .NET)

* indicates required

Please select all the ways you would like to hear from me:

You can unsubscribe at any time by clicking the link in the footer of our emails. For information about our privacy practices, please visit our website.

We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing. Learn more about Mailchimp's privacy practices here.