Posts

Angular 5 continues deployment to Azure App services using GitHub

Image
In today Agile tech industry clients want zero downtime and quick turn around time from dev to prod, with more these process integration like continues development to continues deployment and so on.. (other DevOps process). With these process automation, each team Dev/Testing/QA/Admin all can perform their role easily and independently without any flow caveat till deployment and finally customer is happy ๐Ÿ˜Š Microsoft Azure has this capability in-build without and additional cost and it supports multiple cloud supported repos. out of which GitHub is also supporting this integration which is widely used by the opensource community. Steps for Angular 5 continues deployment using GitHub On the high-level, we need perform below steps ng build --prod --aot install kudu support update .cmd file using kudo script Commit to GitHub branch. Done! Check the portal. What is --AOT angular 5 The Angular Ahead-of-Time (AOT) compiler converts your Angular HTML and TypeScript code i

Create and configure custom connectors for PowerApps and MSFlow from AzureFunctions

Image
I have already discussed How to Create, Configure and Deploy AzureFunction using VisualStudio  and how to create swagger(OpenApi) endpoint for AzureFunctions .  So, In this article will see how to import and use them in PowerApps & MSFlow .  Upon completion of yaml  definition creation, Click->Export to PowerApps + Flow button or copy the API definition URL. Alternatively you can also download  ApiDef.json file. Go to  https://web.powerapps.com  and authenticate then select 'Custom Connectors' from the left navigation. Then Click Create custom connector->Import an OpenApi from URL as mentioed below. Enter function secret code which we copied earlier, Then name the connector and click Contiue. Now, Fill values in each wizard General -> Upload/configure connector icon. Security -> In my scenario I used 'Function' scope access. configure it as appropriate. Definition ->  Ensure you have the proper parameter

Create swagger api endpoint for Azure functions

Image
In my previous article , we saw detailed step on how to create a server-less function using Azure Function . If you are not familiar with Azure Function topic I highly recommend you to have a look before we proceed here. Alright, In this article will see how to create/configure OpenApi for our Crypto Function and to be able to use in other applications. Before proceeding there let us understand OpenApi protocol. What is OpenApi? An open API (often referred to as a public API) is a publicly available application programming interface that provides developers with programmatic access to a proprietary software application or web service. APIs are sets of requirements that govern how one application can communicate and interact with another. - Wikipedia Basically, OpenApi provides its consumers a rich set of functionalities in a single EndPoint and to be able to access from any ecosystem.These Api are public or private based on the use-case. Like I mentioned already Crypto Azure

Setting up Angular 5 environment

Image
Check Node & NPM version Verify that you are running at least node 6.9.x and npm 3.x.x by running node -v and npm -v in a terminal/console window Install angular CLI Enter below command to install angular cli npm install -g @angular/cli How to use NPM commands behind the PROXY ๐Ÿ›  Step to access to use npm commands behind the PROXY ๐Ÿ›  Set SSL false by executing this command: npm set strict-ssl false npm config set registry http://registry.npmjs.org/ Then, Get any one of the below: 1. User-specific -  username : password @proxy.example.com:1431 (User Proxy) 2. Proxy: 129.***.**.**:** (Proxy address with port#) Now, set appropriate by executing below npm  commands: npm config set http http://username:password@proxy.example.com:1431 npm config set https-proxy https://username:password@proxy.example.com:1431 (or) npm config set http_proxy 129.***.**.**:** npm config set https_proxy 129.***.**.**:** Now, all set from an envir

Create and configure Azure Functions

Image
If you want to build a single endpoint which is capable of performing business and performance critical and high available process behind the scene and at the same time it should be accessible to all the ecosystem and development approach right from Mobile to REST calls and Cloud Apps "Azure Function" has it all. Microsoft Azure as evolved(ing) to give best it can from PaaS, IaaS and Azure Functions as FaaS(Function as a Service). The biggest advantage of using Azure Function is its server-less. So, no configuration and maintenance of infrastructure is needed. In this way we can only  pay for resource we consume, But still Azure provides you the ability to configure fixed service plan for better dedicated performance for your function. So i leave it up to you to choose the plan by considering not paying for un-utilized or under utilized server cost or consumption based plan.  Create Azure Functions using Visual Studio Install "Azure Functions" template f

People picker Control in PowerApps

Image
With the latest PowerApps update we can do more customization to achieve more use-cases. Especially with the new "Rule" feature in PowerApps(which keeps remembers me of InfoPath form ๐Ÿ˜) But, Then I was looking for People picker control in this latest PowerApps update. cant find any straight forward control thought. But now saw a connector called "Office365Users" then I started exploring it. How to create People picker control in PowerApps Update 1. Add  "Office365Users" data source to the app. 2.  Insert a "Combobox" from the ribbon. 3. Select "Combobox" and select 'Items' in the formula bar then enter below formula Office365Users . SearchUser ({searchTerm :  ComboBox1. Text }) 4. Then, select "Fields" from the property pane and choose "Primary text" a.k.a "Display Names" and "Search Fields". 5. Play the app and test it. The below steps applies mostly in the early st