Category: vscode

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 !)

Debug Application under VSCode and Docker–part 22

What I wanted is that people that have only a container application ( docker) and  VSCode ( not Visual Studio , nor .NET Core Framework) be able to debug the application and run it. That means, I no longer require to install .NET Core SDK on the local PC

Read a lot

https://code.visualstudio.com/docs/remote/containers#_devcontainerjson-reference

https://github.com/microsoft/vscode-dev-containers/tree/master/containers/dotnetcore-3.0

https://code.visualstudio.com/docs/remote/containers

Some important things :

  1. in the devcontainer.json put  “shutdownAction”: “stopContainer”
  2. Delete continuously the vscode image if something wrong

docker container prune -f

docker images “vs*”

docker image rm <id of the prev image>

Now I have all in place ( see commit https://github.com/ignatandrei/InfoValutar/commit/474698d33e20e1aa6fc9e2fd6f4c42ea73e50b03 )

A .devContainer folder with a DockerFile and devcontainer.json ( to construct the docker container)

A .vscode folder with launch.json , devcontainer.json, settings.json  – to run F5 into the container

All I need is to Launch VSCode, press Remote-Container : Open Folder in Container, goto Infovalutar folder that has the .sln. Then press F5 in VS Code  and voila!

Now, anywhere I go, I can launch VSCode and debug the application.

Infovalutar

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

VSCode and Docker

I am super-excited about Docker – because it gives a new meaning about “ it works on my PC”! ( I have a presentation ready –   https://github.com/ignatandrei/presentations/tree/master/2019/shorts/DockerForDevs/ )

However, I want to state something more important: VSCode is now ready to open Docker Containers!

You have to install:

1.

Name: Docker
Id: ms-azuretools.vscode-docker
Description: Adds syntax highlighting, commands, hover tips, and linting for Dockerfile and docker-compose files.
Version: 0.6.4
Publisher: Microsoft
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker

2. 

Name: Remote – Containers
Id: ms-vscode-remote.remote-containers
Description: Open any folder inside (or mounted into) a container and take advantage of Visual Studio Code’s full feature set.
Version: 0.59.0
Publisher: Microsoft
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers

Or this extension:

Name: Remote Development
Id: ms-vscode-remote.vscode-remote-extensionpack
Description: An extension pack that lets you open any folder in a container, on a remote machine, or in WSL and take advantage of VS Code’s full feature set.
Version: 0.15.0
Publisher: Microsoft
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack

I have tried with dotnet try the extensions ( for your reference, you can generate the docker image and run the container by using the files from https://github.com/ignatandrei/Presentations/tree/master/2019/shorts/NetCoreGlobalTools/dotnetTry . Then use the externsion to open the dotnet try files under usr folder )

However, the VSCode has now capabilities over SSH, VSL and Docker. It is a wonderfull world, and now we can say : : it works on my Docker!

( My only regret is that VS 2019 has not  those capabilities)

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.