DEV Community: Bharat Dwarkani

How to publish Angular App to Azure web app for Linux/ FTP using Azure DevOps Pipelines explained from scratch

Bharat Dwarkani — Sun, 17 May 2020 13:56:29 +0000

In this post, I will explain from scratch in 10 steps, how to build a Azure DevOps pipeline to publish Angular app in Azure Web app for Linux using FTP method. Using this method you can also publish app in any FTP location also.

Azure DevOps — Is a continuous integration tool offered by Microsoft.

For creating Azure Web app for Linux checkout this
https://dev.to/bharatdwarkani/how-to-publish-an-angular-app-in-azure-linux-web-app-service-explained-from-scratch-4e9m

Login in your Azure DevOps account. https://azure.microsoft.com/en-in/services/devops/
Create a new Pipeline

Select the source where your application source code is located.

Since my source is located in Gitlab, so I have selected Other Git , you can select based on your need

Select new service connection

Fill the details related to your Source Git repository and click continue.

Select Empty Job in template.

Now pipeline view will appear. There are various predefined tasks available in Azure DevOps. In next few steps I will explain which tasks to add to build and publish Angular app.

i) NPM Install
ii) NPM Build
iii) Publish Artifact
iv) FTP Upload

Add task — NPM

Click on npm install. In property select your app location.

Here I have filled** $(Build.SourcesDirectory)/myapp**

Since in repository, my source is located not directly in root folder instead inside myapp folder. Based on your source folder structure you can fill appropriate source path folder which contains package.json file

Next, again search NPM and add npm task. This task is for build.

Change properties as shown in screenshot for Build task.

i)** Command** to Custom

ii) Working folder — $(Build.SourcesDirectory)/myapp

iii) *Command and arguments *— run build-prod-agent

build-prod-agent — depends on what you have set in package.json file of your app.

Now add one more task Publish build artifacts. Using this you can download published files after CI completes. If this is not added after build completes you wont be able to access published files.

Change artifacts properties

*Path to publish *→ Angular dist folder path
*Artifact name *— publish

Final step is to Create a FTP upload task. Select and add.

Click on manage FTP to add a FTP connection for your azure app service.

On clicking manage a Service connection page will appear. Click new Service connection.

Select type — Generic

Now go to your Azure app, Click on Deployment center and get Endpoint, Username and password.

File the details in FTP connection page and click OK.

After that in FTP task properties select recently created FTP service connection name and fill root folder

Root folder is your publish location where your app creates publish dist folder.
$(Build.SourcesDirectory)/myapp/dist/publishfiles.

If your app produces files directly in dist then can just give $(Build.SourcesDirectory)/myapp/dist

Final step is to create a trigger. Here I am creating a trigger scheduled task. Every day at 2 AM Pipeline will run at 2.00 AM to build and publish development branch source to Azure app service for Linux.

You can also run manually build from pipelines page.

On clicking pipeline you can view details and also download publish files

Hope, you have found this post useful. Azure DevOps has several inbuilt tasks you can add to enhance your pipelines. Like adding Test, Security testing etc., There is one more way by using yaml file you can create pipeline.

For more such interesting technology related blogs, resources visit my site
(https://sharetechlinks.com/)

How to publish an Angular App in Azure Linux Web App Service explained from scratch

Bharat Dwarkani — Sun, 17 May 2020 13:43:09 +0000

In this article, I will explain from scratch in just 5 steps, How to Setup Azure Web app for Linux and publish your Angular application. You can also setup Azure DevOps Pipeline to setup continuous integration for automatic deployment of your app.

Create a new **App Service Plan. **If you have already created then skip this step. App service is like one container or a VM machine. In a single azure app service, you can host N no. of web apps. Based on the load you can split your apps to separate app services if required. To create a new app service. First, you need to set a resource group name if you already have created it, can use the same or else can create new. Next, fill the app service name, Select OS as Linux. and then select a pricing plan based on your needs and create.

Note: Selecting Linux is not necessary you can use Windows also. But, if Linux supports it why not use it, Linux App services are cheaper than Windows-based app services.

In a few minutes app will be deployed

There is a free app service plan available for both Windows and Linux Azure app services

https://azure.microsoft.com/en-in/pricing/details/app-service/windows/

Linux

Windows

In your app service. Select TLS/SSL Settings. Change some parameters

Go to Configuration -> General Settings

Include Startup Command **-> **node /home/site/wwwroot/server
**Also change **HTTP Version — 2.0

Now, your Azure app service is ready for deployment.

Next, few steps are related to building your angular app in VS code and publishing to App service using VS code App service extension.

3. Download VS Code if you don’t have and install Azure App service extension

Build your angular app

Click on Azure App service Extension. Initially it will ask for subscription details and your Azure Ad Login. Fill those details. Once filled all apps will be listed. Select your app and click Deploy to Web app

Browse the dist folder where your angular app was published.

After selection click deploy — Deployment will start

That’s all you can Browse the website. Your angular app is published to Azure Web app.

Next time, your configuration will be saved you can just click on dist folder and click deploy. Within minutes your Angular app will be published.

You can also use Azure DevOps pipeline to automate this process.
https://dev.to/bharatdwarkani/how-to-publish-angular-app-to-azure-web-app-for-linux-ftp-using-azure-devops-pipelines-explained-from-scratch-o03

Hope you find this article short and crisp. If you are interested in more such technical resource please visit my site https://sharetechlinks.com/

How to publish ASP.NET Core 3.0 Web App / API in Azure Linux App Service explained from scratch

Bharat Dwarkani — Sun, 13 Oct 2019 05:43:32 +0000

Create a new App Service Plan. If you have already created then skip this step. App service is like one container or a VM machine. In a single azure app service, you can host N no. of web apps. Based on load you can split your apps to separate app services if required. To create a new app service. First, you need to set a resource group name if you already have created it, can use the same or else can create new. Next, fill the app service name, Select OS as Linux. and then select a pricing plan based on your needs and create.

Note: Selecting Linux is not necessary you can use Windows also. But, if Linux supports it why not use it, Linux App services are cheaper than Windows-based app services.

Once the app service plan is created. Next, you need to create App Service. You can search and select app service. App service is nothing but your web app / API. Create a new app under your app service plan. Select run time .Net Core 2.2 at present .NET Core 3.3 is not listed Azure team is rolling out. But there is a workaround by which you can change to 3.0 later, explained below. Note Select the same app service name created in the previous step, else you will end up creating a new app service plan and will be charged. It will appear in the list once you select a region.

Note: Select the same app service name created in the previous step, else you will end up creating a new app service plan and will be charged. It will appear in the list once you select a region.

There is a free app service plan available for both Windows and Linux Azure app services

https://azure.microsoft.com/en-in/pricing/details/app-service/windows/

Linux

Windows

After filling details a next screen will be shown. Review and create app service.

In a few minutes, the app will be deployed. Click on Go to resource and you will be redirected to your newly created app.

In your app service. Select Configuration tab -> General settings Change Version to .Net Core 3.0 which was not available in the previous step and save it.

Next, enable security by going to TLS/SSL Settings — Binding Set HTTPS only — ON and save it.

Next go to Configuration -> Application Settings Add some setting as shown below WEBSITE_DYNAMIC_CACHE — 0 WEBSITE_LOCAL_CACHE_OPTION- Never (For staging enable this else app will be cached and will not refresh on publishing) WEBSITE_WEBDEPLOY_USE_SCM — false (Set false else you will not able to use VS to publish directly)

Next, download the publish profile. Now the configuration is Azure is done we can now publish directly site from Visual Studio which is explained below.

Open your web app in Visual Studio — 2019. Select Build → Publish

Next, the Publish screen will open. Click on import and browse the publish file which we download in step 8.

On importing file two settings will be generated one for web deploy and other for FTP. You can select Web deploy. Finally, click Publish, the site will be published to Azure.

Before publishing Click on edit and check option — Remove additional files at the destination. Else default azure site will show up in azure.

Go to Azure and restart the app service. Sometime it won't auto-refresh on publishing. So we need to manually restart.

Next, Click on the Site URL. Now the site is hosted.

Additional Note: You can also configure FTP for publishing, Custom domain can also be mapped in case you don't need default Azure site URL. Firewall can be configured, logging can be enabled. Azure also provides application insights, performance testing, etc.,

Azure also supports Staging and Production slots in the higher plan using that you can first publish in staging slot and can swap to production slot after testing within seconds with almost no downtime.

There is a traffic manager inbuilt using which Azure can load balance your site.
Detailed reference can refer here —
Pricing — https://azure.microsoft.com/en-in/pricing/details/app-service/windows/
Documentation — https://docs.microsoft.com/en-us/azure/app-service/

For more such interesting ASP.NET Core related blogs, resources visit my site https://sharetechlinks.com/

.NET Core 3.0 - What’s New and Upcoming

Bharat Dwarkani — Tue, 24 Sep 2019 14:33:26 +0000

.NET Core 3.0 released yesterday — Sep 23rd.

Announcing .NET Core 3.0
https://devblogs.microsoft.com/dotnet/announcing-net-core-3-0/

Live virtual Conference on going — https://www.dotnetconf.net/agenda

Key Points

Performance is greatly improved
C# 8.0 support.
WPF and WF support in .NET Core 3.0 but will not work in Linux yet.
More improvements for IoT, Rasberry Pi.
High-performance JSON APIs
.NET Core apps now have executables
Pack your application with all dependencies in single exe and trimming support.
gRPC support for serverless programming use as an alternative to WCF services.

ASP.NET Core and Blazor updates in .NET Core 3.0
https://devblogs.microsoft.com/aspnet/asp-net-core-and-blazor-updates-in-net-core-3-0/

Client-Side Blazor to get its stable release by May 2020

Entity Framework Core 3.0 and Entity Framework 6.3
https://devblogs.microsoft.com/dotnet/announcing-ef-core-3-0-and-ef-6-3-general-availability

Key Points:

Restricted client evaluation — A much-needed feature.
Single SQL statement per LINQ query
Cosmos DB support
Nullable reference types.

What’s new in ASP.NET Core 3.0
https://docs.microsoft.com/en-us/aspnet/core/release-notes/aspnetcore-3.0?view=aspnetcore-3.0

Key Points:

Performance improvement.
Blazor support
gRPC — is a popular, high-performance RPC (remote procedure call) framework.
SignalR improvements — Auto-reconnect support.
Awaitable for loops, async enumerables.
Generic Host support
Improvements in hosting app under reverse proxy.
Identity server integrated templates.
Project Templates for Separated frontend (Angular, React) and backend API under the same project.
Project Templates for microservices.

What’s new in Xamarin
https://devblogs.microsoft.com/xamarin/xamarin-dotnet-conf-2019/

Key Points:

XAML Hot Reload for Xamarin.Forms
Xamarin Hot Restart iOS 13 & Android 10
iOS 13 & Android 10 Support

Visual Studio 2019–16.3
https://devblogs.microsoft.com/visualstudio/dot-net-core-support-in-visual-studio-2019-version-16-3/

Migration from .NET core 2.2 to 3.0
https://docs.microsoft.com/en-us/aspnet/core/migration/22-to-30?view=aspnetcore-3.0

What’s Next?
.NET Core 3.1 LTS will release by Nov 2019
.NET 5 — Nov 2020 goal is to combine all platform under the same roof — .NET 5

Check out my site for more blogs and resource links related to ASP.NET Core — https://sharetechlinks.com

Checklist for Hosting ASP.NET Core Site in Linux VM

Bharat Dwarkani — Wed, 28 Aug 2019 15:10:52 +0000

I have listed items with references which will help you in deploying your ASP.NET Core site from scratch in a fresh VM for a production environment.

Install and Setup Supervisor - It is a tool which will help in the auto-start of your site on server restart, otherwise, on server restart, you might need to manually start site.
Install and Setup Nginx - For Reverse Proxying to your .NET app
Install DotNet Core https://dotnet.microsoft.com/download/linux-package-manager/ubuntu16-04/sdk-current
Get a domain - Can get from GoDaddy or any other vendor.
Setup and Install Lets Encrypt - To Obtain Free SSL Certification or if you have own certificate purchased you can also use it.
Enable Firewall to allow port 80, 443 - or any other port based on your requirement.
Enable https redirect in your Ngnix Configuration
After Hosting ensure you have enabled basic Security Headers for the site - Can test Using Security Headers site- https://securityheaders.com/
Can test your site for SEO if your site needs it - https://sharetechlinks.com/post/detail/101/free-seo-checker

References

Server Setup
You can get a cheap Digital Ocean Server for $5–$10 which is more than enough to run a simple site.
This site runs on same - https://sharetechlinks.com
Enabling Remote Desktop - XRDP
https://websiteforstudents.com/connect-to-ubuntu-16-04-17-10-18-04-desktop-via-remote-desktop-connection-rdp-with-xrdp/
Installing Ubuntu Mate OS
Usually, when you purchase Linux VM from Digital Ocean or any other Vendor you won't get OS. To install a lightweight Ubuntu Mate Linux OS

https://jerrygamblin.com/2016/10/19/ubuntu-remote-desktop-on-digital-ocean/

Supervisor, Nginx Configuration
https://www.hanselman.com/blog/PublishingAnASPNETCoreWebsiteToACheapLinuxVMHost.aspx
Microsoft Official Docs
https://docs.microsoft.com/en-us/aspnet/core/host-and-deploy/linux-nginx?view=aspnetcore-2.1&tabs=aspnetcore2x
Nginx - In-Depth configurations
https://sharetechlinks.com/post/detail/173/nginx-everything-about-proxy-pass
https://sharetechlinks.com/post/detail/204/nginx-with-modsecurity-and-brotli-production-setup-dockerized
Setting up Firewall
https://www.digitalocean.com/community/tutorials/how-to-set-up-a-firewall-with-ufw-on-ubuntu-14-04
Installing Putty in Windows

https://medium.com/@bharatdwarkani/5-easy-steps-to-install-putty-and-connecting-to-linux-ubuntu-server-in-windows-adcdc9d755dc

Transferring file from windows to Linux using Putty
https://medium.com/@bharatdwarkani/copying-a-file-from-windows-to-linux-through-ssh-17f4f4c2eca8
Security Headers
https://sharetechlinks.com/post/detail/133/adding-http-headers-to-improve-security-in-an-asp-net-core-application
Refer this for Unzip file in Ubuntu
https://www.hostingadvice.com/how-to/unzip-file-linuxubuntu/
Installing My SQL In Linux
https://www.digitalocean.com/community/tutorials/how-to-install-mysql-on-ubuntu-16-04

https://www.digitalocean.com/community/tutorials/how-to-secure-mysql-and-mariadb-databases-in-a-linux-vps

https://www.configserverfirewall.com/ubuntu-linux/enable-mysql-remote-access-ubuntu/

Conclusion
The above-mentioned checklist is more than enough to host your ASP.NET Core site in a fresh Linux VM starting from Scratch.

Share Tech Links - A platform to share tech resources

Bharat Dwarkani — Wed, 21 Aug 2019 15:52:57 +0000

Share Tech Links — a platform to share links of articles, blogs, tutorials, and resource links of software technologies to the community.

I've recently developed a web-based application conceptualized, designed and back-end entirely done by me. The concept is different from other Blogs/Q&A sites. Here only links can be shared with a short description.

URL — https://sharetechlinks.com

Following technology used

ASP.NET Core MVC
MySQL - Backend
Material Design
Hosted in Linux server

Features

Tagging Support
Posts categorization under appropriate topics
Dynamic - Each page runs using back end no static content
Any one can share - Will be visible to the public after the moderator approved.
Gamification - Credit to Contributors for each post
Google Login
SEO optimized
Optimized for speed
Progressive Web App
Mobile friendly
Bookmark feature
Like/Unlike the post
User Profiles
Filters to sort by - recent, popularity, most viewed

Home Page
In this site, tech resources are well categorized into Topics and Tags spanning several software technologies.

Topics across various technologies are available

General
GitHub — Projects links
Software and Tools
ASP.NET Core
Angular
Android
Javascript
Databases
Xamarin
Blazor
Web Development
UI/UX Design and more to come

Tags
Each post contains tag support for quick access.

Bookmark, Like, View Count
You have to sign to bookmark / like a post

Filters
Several filters provided for quick access

Contributors
Top contributors are listed. you can also become a contributor by sharing links. You earn 5 points for each approved post.

Create Post

Anyone can submit a post, For submitting a post you need to log in using your Google account.
You can share a link to Blog Post, Articles related to the category specified.
Post created will be sent to Admin for approval. You will get 5 Points for each approved posts
If you don't find the appropriate category you can include in Notes.

Upcoming Enhancements

Universal Search by content
Email Subscription
App Notifications
Follow User / Category
Auto fetch of meta tags from the link for quick posting.
Android app

Conclusion
Share Tech Links provides a good platform to share valuable technical resources with the community.
Your contributions and feedback are welcome.

If any feedback please drop an email at — sharetechlinks@gmail.com

Top 10 Static Code Quality Analysers for ASP.NET Core

Bharat Dwarkani — Thu, 08 Aug 2019 18:00:56 +0000

FXCopAnalyzers

Created by Microsoft, a set of analyzers, called Microsoft.CodeAnalysis.FxCopAnalyzers, that contains the most important "FxCop" rules from static code analysis, converted to Roslyn analyzers. These analyzers check your code for security, performance, and design issues, among others.

You can install these FxCop analyzers either as a NuGet package or as a VSIX extension to Visual Studio.

https://www.nuget.org/packages/Microsoft.CodeAnalysis.FxCopAnalyzers

StyleCopAnalyzers

An implementation of StyleCop rules using the .NET Compiler Platform. It helps in enforcing standard style for code.

https://www.nuget.org/packages/StyleCop.Analyzers/

Security Code Scan

Detects various security vulnerability patterns: SQL Injection, Cross-Site Scripting (XSS), Cross-Site Request Forgery (CSRF), XML eXternal Entity Injection (XXE), etc.

https://security-code-scan.github.io/

Web API analyzers

ASP.NET Core 2.2 and later includes the Microsoft.AspNetCore.Mvc.Api.Analyzers NuGet package containing analyzers for web APIs.

https://www.nuget.org/packages/Microsoft.AspNetCore.Mvc.Api.Analyzers

SonarAnalyzer

Analyzers which spot bugs and code smells in your code.

https://www.sonarqube.org/
https://www.nuget.org/packages/SonarAnalyzer.CSharp

Lindhart.Analyser.MissingAwaitWarning

When using dependency injection and async-await pattern it is possible to end up with an interface with a method that returns a Task. If this interface method is used in a synchronous method there is a likelihood that it will erroneously be run like a fire and forget method. In this situation, this analyzer generates a warning.

https://www.nuget.org/packages/Lindhart.Analyser.MissingAwaitWarning

NSubstitute.Analyzers.CSharp

Provides diagnostic analyzers to warn about incorrect usage of NSubstitute in C#.

https://www.nuget.org/packages/NSubstitute.Analyzers.CSharp

xUnit.net [Code Analyzers]

Code Analyzers for projects using xUnit.net that help finds and fix frequent issues when writing tests.

https://www.nuget.org/packages/xunit.analyzers

Microsoft.CodeQuality.Analyzers

CodeQuality Analyzers

https://www.nuget.org/packages/Microsoft.CodeQuality.Analyzers

Microsoft.CodeAnalysis.VersionCheckAnalyzer

Microsoft.CodeAnalysis Version Check Analyzer
https://www.nuget.org/packages/Microsoft.CodeAnalysis.VersionCheckAnalyzer

Few more analyzers - https://github.com/dotnet/roslyn-analyzers

Top 3 Open Source ASP.NET Core based e-commerce web applications

Bharat Dwarkani — Sat, 03 Aug 2019 18:19:56 +0000

Top 3 Open Source ASP.NET Core based e-commerce web applications
Listed below are top 3 open sources, cross-platform ASP.NET Core based e-commerce web applications

nopCommerce

nopCommerce is the best open-source e-commerce shopping cart. nopCommerce is available for free. Today it’s the best and most popular ASP.NET e-commerce software. It has been downloaded more than 1.8 million times!
nopCommerce is a fully customizable shopping cart. It’s stable and highly usable. nopCommerce is an open source e-commerce solution that is ASP.NET Core based with an MS SQL 2008 (or higher) backend database. There are several plugins also available.

Site — https://www.nopcommerce.com/
GitHub Link — https://github.com/nopSolutions/nopCommerce

SimplCommerce

A simple, cross-platform, scalable, modularized e-commerce system built on .NET Core. This application is based on Micro Service Architecture.

Site — http://www.simplcommerce.com/
GitHub Link — https://github.com/simplcommerce/SimplCommerce

grandnode (Powered By nopCommerce)

It’s an open-source, free, cross-platform e-commerce software based on ASP.NET Core 2.2 and MongoDB — NoSQL database. You can run it on Linux, Windows, and macOS easily. GrandNode also supports Docker, so you are able to install it just in seconds with Docker.
It can be used for any kind of online store. GrandNode is a perfect choice for people who want to sell simple products. It’s a solution dedicated to the most demanding users. You can also create auctions, booking/reservation products or product kits. GrandNode became a mature solution especially for developers who want to develop a modern, functional and high-performance e-commerce system.

Site — https://www.grandnode.com/
GitHub Link — https://github.com/grandnode/grandnode

This open-source e-commerce web applications are great to get started. You can also check out their source codes for a good reference of real-time scalable applications.

ASP.NET Core starter templates for SasS MultiTenant application infrastructure

Bharat Dwarkani — Sat, 03 Aug 2019 18:16:34 +0000

Some of the top Open Source templates for setting a strong infrastructure base for your SasS application. This framework provides the base for getting started quickly doing all the infrastructure part needed to handle multitenancy.

ASP.NET Boilerplate — Web Application Framework
ASP.NET Boilerplate is a general purpose application framework specially designed for new modern web applications. It uses already familiar tools and implements best practices around them to provide you a SOLID development experience.
ASP.NET Boilerplate works with the latest ASP.NET Core & EF Core but also supports ASP.NET MVC 5.x & EF 6.x as well.
https://github.com/aspnetboilerplate/aspnetboilerplate
https://aspnetboilerplate.com/
https://aspnetboilerplate.com/Pages/Documents/Multi-Tenancy

abp — Preview
It is also an open source web application framework for asp.net core. It is is an entire rewrite of ABP Boilerplate mentioned above
https://abp.io/

SasS kit
SaasKit is a .NET toolkit for building SaaS (Software As A Service) applications.
The goal of the project is to help developers build SaaS products without getting in the way. It aims to be platform agnostic and as simple to use as possible.
https://github.com/saaskit/saaskit
https://benfoster.io/blog/tagged/saaskit

Finbuckle.MultiTenant
Finbuckle.MultiTenant is a multitenancy library for ASP.NET Core 2.1+. It provides functionality for tenant resolution, per-tenant app configuration, and per-tenant data isolation
https://www.finbuckle.com/MultiTenant/Docs
https://github.com/Finbuckle/Finbuckle.MultiTenant

cloudscribe
ASP.NET Core multi-tenant web application foundation with management for sites, users, roles, claims and more
https://github.com/cloudscribe/cloudscribe
https://www.cloudscribe.com/introduction

OrchardCore
Orchard Core is an open-source modular and multi-tenant application framework built with ASP.NET Core, and a content management system (CMS) built on top of that application framework.
https://github.com/OrchardCMS/OrchardCore
https://orchardcore.readthedocs.io/en/dev/

Copying a file from Windows to Linux through SSH

Bharat Dwarkani — Sat, 03 Aug 2019 18:13:47 +0000

If you are working on Windows and need to transfer a file from window to Ubuntu server follow these simple steps

First, Install and configure SSH on your Ubuntu server

Execute the following commands :
$ sudo apt update
$ sudo apt install openssh-server

Enable port 22 for SSH in firewall
$ sudo ufw allow 22

Check status whether SSH is running in a linux machine
$ sudo systemctl status ssh

You can start or stop SSH using the following commands
$ sudo systemctl status ssh
$ sudo systemctl status ssh

Copy file from Windows to Ubuntu server
Execute this command

scp Filepathinwindows username@ubuntuserverip:linuxserverpath

Example
scp D:/TxtFile.txt root@ipaddress:/home/usr/

On transferring, cmd prompt will ask for password enter your ubuntu password corresponding to user