Episode 1: Building cross-platform mobile app - create react application hello world

Series:  Building a cross-platform mobile app using ionic and react

This is a series that will showcase you how to build a mobile application with an ionic framework and react. For this series, we will use Ionic 5 and React latest version.
There is an alternative for ionic, which is React Native it will be a topic for our next series.

Ionic vs React Native

ionic is entirely based on web standards, it is like a regular web app. Another benefit of ionic is it helps you to build PWA(Progressive Web Apps), potentially we can hit 3 platforms Web, Android, and iOS from single code base.

What is ionic?

• Ionic is free and opensource.
• It offers a library of mobile-optimized UI components
• Ionic is a UI component library, it is more than a component library. Ionic allows you to build cross-platform apps. It means an app that can run in a regular web browser, but also build as Android and ios mobile apps.
• The major benefit of the ionic framework is you need to write code once and you can publish it on Android and iOS play store.
• The ionic framework supports the following languages
1. Angular
2. React
3. Vue
4. Vanilla javascript

          They do provide official integrations for React and Angular at present.

Required Tools

• NodeJS
• Code editor: I prefer Visual studio code
• Browser

Prerequisite:

• HTML
• CSS
• Javascript
• React

Today we will start with hello world application

1. We need to create react application first, it will take a few minutes to create react app 

                   npx create-react-app hello-world

It will create react project, you can find project structure like below:

To run a project you can execute the command: 

                              npm start or yarn start           

The project will execute and open in a browser

Update App.js file as below:

import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
  return (
<div className="App">      <header className="App-header">        Hello World
      </header>    </div>  );
}
export default App;

You will see the output


We have achieved what we have targeted.
In this tutorial, we have created a react project, in next tutorial we will add an ionic project.

Happy Coding!!

Azure Active Directory Authentication with roles

I got the requirement to implement Azure Active directory authentication in our project. When i searched for this then i came to know following articles which helped me to understand the how this authentication works and how to implement it.

Source Code is available at following location :

https://github.com/AzureADSamples/WebApp-RoleClaims-DotNet

Brief introduction, how it works is mentioned at following links: 

http://justazure.com/azure-active-directory-part-4-group-claims/

http://www.asp.net/identity/overview/getting-started/developing-aspnet-apps-with-windows-azure-active-directory

http://webbercross.azurewebsites.net/implementing-azure-ad-group-authorization/

Happy Coding !!

Power BI: How to consume shared Content pack

Step 1: Click on Get Data

Step2 : Select “Get” from My Organization

Step 3: Search Content package name in search box

Step 4: Click on requested content package

4.1 Click on Connect

4.2 It will show the requested content packs report/datasets in workspace

Happy Coding!!

Power BI: Share your reports and data set with another developer

My Dashboard

I have following Reports and dataset which I want to share with another developer

Step 1: Click on setting button as shown in screen

1.1.  Select “Create content pack”

Step 2: Select Specific group

2.1 Enter end user’s email id. Whom you want to share dataset and reports

Step 3: Select your Dashboard, as following I have selected my created dashboard. Select which reports/Datasets you want to share with the user.

3.1 Click on publish

Happy Coding!!

Microsoft Azure Webjobs

The long awaited webjobs is now in preview for Windows Azure!  How many times have you deployed a website, then after a couple months requirements change and they want you to run a daily or continuous job that processes files or re-size images or works a queue, now with web jobs in Windows Azure it is easy. 

What is webjob?

Azure WebJobs enables you to run programs or scripts in your website as background processes. It runs and scales as part of Azure Web Sites. It is kind of a lightweight Worker Role associated with web site. Process life cycle is strictly connected with web sites, so restarting a web site will cause a Web Job restart.

Each Web job can be configured to run in one of the following modes:
1. Continuous – runs all the time, analogy to Windows Service configured with auto start option is in place. Hosting environment monitors the job status and brings it up when process is down. (NOTE: With the current preview, this works properly on standard web sites with ‘always on’ setting. Caution is required when we scale the site up from Standard mode – Web Jobs will be terminated when there is no request for 20 minutes)
2. Scheduled – runs at particular times.
3. On Demand – runs when started manually.

Azure WebJobs can be created using the following scripts: 

1. .cmd, .bat, .exe (using windows cmd)
2. .ps1 (using powershell)
3. .sh (using bash)
4. .php (using php)
5. .py (using python)
6. .js (using node)

Creating WebJobs:
A simple console application will work for you as a webjob.

Deploying Webjobs:
We can deploy webjob in either two ways -
1. Automatic deployment - When you publish web application, webjobs get deployed automatically.
2. Manual deployment - Manually deploy code file to portal.


Manual Deployment:

1. To manually deploy our application as new Web Job – we need to create a zip file that contains our project output (in our case standalone exe file is enough). It is important to remember that the main executable file needs to be on the root level of that zip file. Name of the file is irrelevant. The current limit size for one zip file is 100 MB.


2. Open Azure Management Portal and select destination web site.
3. On the web site details page go to Web Jobs tab and click New
4. Now we can configure our new Web Job.I want to run this one every 5 minutes:

5. Now, our job is up and running. To verify it, we can check log file produced by Web Job (link in Logs columns) – this file contains diagnostic information about run and application output that was redirected automatically to that file (the same goes for error stream, so if, by any chance, program throws exception that is unhandled it will also be logged in that file and job run status will be set as Failed)



And the output:

Automatic Deployment:

1. To deploy the WebJob, right-click on the project and select Publish as Azure WebJob.

 

2. Select when the WebJob shall run and click OK. In this example, the job shall be run on demand.

 

3. Select a publish target, in this example the target shall be an Azure WebSite

You shall be required to sign-in and enter your Microsoft Azure credentials

Once signed in, you may select in which WebSite the Job Shall runs.

 

4. Click on OK, then select Publish.
Now, if you go the the Microsoft Azure portal, and navigate to your WebSite, you shall see a new WebJob created and deployed.

 

Make webjob settings configurable:

It attempts to read configuration settings in this prioritized order:

1. Try to find the configuration value in the Web Site's online configuration (see below).
2. Try to find the configuration value in the .cscfg file.
3. Try to find the configuration value in the app.config file or web.config file.

By the Web Site's online configuration, I mean the configuration settings you can edit on a deployment-by-deployment basis using the Azure management portal, under the Configure 'tab':

Exception in webjobs which I have faced:

Azure WebJob that fails after only 20 minutes of running with the exception "Thread was being aborted".

Cause: By default, web apps are unloaded if they are idle for some period of time. This lets the system conserve resources.

Resolution: In Basic or Standard mode, you can enable Always On to keep the app loaded all the time. If your app runs continuous web jobs, you should enable Always On, or the web jobs may not run reliably.

Also add few settings to your webjob which are mentioned below -

1. WEBJOBS_IDLE_TIMEOUT = 14400

2. STOPPING_WAIT_TIME = 14400

                                   The time is specified in seconds

Web Job: Azure web job aborted some time

Issue: If deployed azure webjob running for long time, it will get aborted after some time.

Issue cause: Sometimes there are interruptions which can stop your WebJob abruptly without notice aborting your process, and get time out.
These interruptions could be due to: stopping your site, restarting your site, some configuration change to your site which causes your site to
restart, Azure maintenance (version update for example) or even the VM simply crashing for some reason.

Resolution:
Make confuguration on for - ALWAYS ON = ON.
Go to Configure menu under APP settings add follwing:
- SCM_COMMAND_IDLE_TIMEOUT = 90000 (in seconds)
- WEBJOBS_IDLE_TIMEOUT = 90000 (in seconds)

- stopping_wait_time = 90000 (in seconds)

Happy Coding!!

ServiceConfiguration transformation

ServiceConfiguration transformation:

This will help us to build the package immediately. You just need to add different configuration files, and give different values.

Add following sections in cloud solution ccproj
1)
<ItemGroup>
<ServiceConfiguration Include="ServiceConfiguration.production.cscfg" />
<ServiceDefinition Include="ServiceDefinition.csdef" />
<ServiceConfiguration Include="ServiceConfiguration.Dev.cscfg" />
<ServiceConfiguration Include="ServiceConfiguration.Int.cscfg" />
<ServiceConfiguration Include="ServiceConfiguration.Staging.cscfg" />
<ServiceConfiguration Include="ServiceConfiguration.Local.cscfg" />
<ServiceConfiguration Include="ServiceConfiguration.Cloud.cscfg" />
</ItemGroup>

2)

<PropertyGroup Condition=" '$(Configuration)' == 'Dev' ">
<OutputPath>bin\Dev\</OutputPath>
</PropertyGroup>
<PropertyGroup Condition=" '$(Configuration)' == 'Int' ">
<OutputPath>bin\Int\</OutputPath>
</PropertyGroup>
<PropertyGroup Condition=" '$(Configuration)' == 'Staging' ">
<OutputPath>bin\Staging\</OutputPath>
</PropertyGroup>
<PropertyGroup Condition=" '$(Configuration)' == 'Production' ">
<OutputPath>bin\Production\</OutputPath>
</PropertyGroup>

3)
<Import Project="$(MSBuildExtensionsPath)\Microsoft\VisualStudio\v12.0\Web\Microsoft.Web.Publishing.targets" />
<ItemGroup>
<EnvironmentDefinition Include="ServiceDefinition.Debug.csdef">
<BaseConfiguration>ServiceDefinition.csdef</BaseConfiguration>
</EnvironmentDefinition>
<EnvironmentDefinition Include="ServiceDefinition.Production.csdef">
<BaseConfiguration>ServiceDefinition.csdef</BaseConfiguration>
</EnvironmentDefinition>
<EnvironmentDefinition Include="ServiceDefinition.Int.csdef">
<BaseConfiguration>ServiceDefinition.csdef</BaseConfiguration>
</EnvironmentDefinition>
<EnvironmentDefinition Include="ServiceDefinition.Local.csdef">
<BaseConfiguration>ServiceDefinition.csdef</BaseConfiguration>
</EnvironmentDefinition>
<EnvironmentDefinition Include="ServiceDefinition.Dev.csdef">
<BaseConfiguration>ServiceDefinition.csdef</BaseConfiguration>
</EnvironmentDefinition>
<EnvironmentDefinition Include="ServiceDefinition.Cloud.csdef">
<BaseConfiguration>ServiceDefinition.csdef</BaseConfiguration>
</EnvironmentDefinition>
<EnvironmentDefinition Include="ServiceDefinition.Staging.csdef">
<BaseConfiguration>ServiceDefinition.csdef</BaseConfiguration>
</EnvironmentDefinition>
<None Include="@(EnvironmentDefinition)" />
</ItemGroup>
<Target Name="ValidateServiceFiles" Inputs="@(EnvironmentDefinition);@(EnvironmentDefinition->'%(BaseConfiguration)')" Outputs="@(EnvironmentDefinition->'%(Identity).transformed.csdef')">
<Message Text="ValidateServiceFiles: Transforming %(EnvironmentDefinition.BaseConfiguration) to %(EnvironmentDefinition.Identity).tmp via %(EnvironmentDefinition.Identity)" Importance="High" />
<TransformXml Source="%(EnvironmentDefinition.BaseConfiguration)" Transform="%(EnvironmentDefinition.Identity)" Destination="%(EnvironmentDefinition.Identity).tmp" />
<Message Text="ValidateServiceFiles: Transformation complete; starting validation" Importance="High" />
<ValidateServiceFiles ServiceDefinitionFile="%(EnvironmentDefinition.Identity).tmp" ServiceConfigurationFile="ServiceConfiguration.$(Configuration).cscfg" />
<Message Text="ValidateServiceFiles: Validation complete; renaming temporary file" Importance="High" />
<Move SourceFiles="%(EnvironmentDefinition.Identity).tmp" DestinationFiles="%(EnvironmentDefinition.Identity).transformed.csdef" />
</Target>
<Target Name="MoveTransformedEnvironmentConfigurationXml" AfterTargets="AfterPackageComputeService">
<Copy SourceFiles="ServiceDefinition.$(Configuration).csdef.transformed.csdef" DestinationFiles="$(OutDir)ServiceDefinition.csdef" />
</Target>

<Target Name="PublishVirtualApplicationsBeforeCSPack" BeforeTargets="CorePublish;CsPackForDevFabric" Condition="'$(PackageForComputeEmulator)' == 'true' Or '$(IsExecutingPublishTarget)' == 'true' ">
<Message Text="Start - PublishVirtualApplicationsBeforeCSPack" />
<PropertyGroup Condition=" '$(PublishDestinationPath)'=='' and '$(BuildingInsideVisualStudio)'=='true' ">
<!-- When Visual Studio build -->
<PublishDestinationPath>$(ProjectDir)$(OutDir)</PublishDestinationPath>
</PropertyGroup>
<PropertyGroup Condition=" '$(PublishDestinationPath)'=='' ">
<!-- When TFS build -->
<PublishDestinationPath>$(OutDir)</PublishDestinationPath>
</PropertyGroup>
<Message Text="Publishing '%(VirtualApp.Identity)' to '$(PublishDestinationPath)%(VirtualApp.PhysicalDirectory)'" />
<MSBuild Projects="%(VirtualApp.Identity)" ContinueOnError="false" Targets="PublishToFileSystem" Properties="Configuration=$(Configuration);PublishDestination=$(PublishDestinationPath)%(VirtualApp.PhysicalDirectory);AutoParameterizationWebConfigConnectionStrings=False" />
<!-- Delete files excluded from packaging; take care not to delete xml files unless there is a matching dll -->
<CreateItem Include="$(PublishDestinationPath)%(VirtualApp.PhysicalDirectory)\**\*.dll">
<Output ItemName="DllFiles" TaskParameter="Include" />
</CreateItem>
<ItemGroup>
<FilesToDelete Include="@(DllFiles -> '%(RootDir)%(Directory)%(Filename).pdb')" />
<FilesToDelete Include="@(DllFiles -> '%(RootDir)%(Directory)%(Filename).xml')" />
</ItemGroup>
<Message Text="Files excluded from packaging '@(FilesToDelete)'" />
<Delete Files="@(FilesToDelete)" />
<Message Text="End - PublishVirtualApplicationsBeforeCSPack" />
</Target>

Happy Coding!!