Deploy create-react-app to Azure from github using VSTS CI/CD

create-react-app is one of the easiest way to create your react boilerplate project. For developers from .Net background, it is a natural choice to use Azure as the hosting environment. However it’s not so easy to do the deployment to Azure for react project, especially in case you want to setup Continuous Integration and Continuous Delivery.

Some people have written articles how to deploy to Azure manually, but not with CI/CD which is a great practise. Here I show step by step how to use Visual Studio Online to create CI to deploy your react application to Azure.

Prerequisite:

  1. You have react project created using create-react-app CLI
  2. You have Azure subscription and have Web App created ready to use
  3. You have Visual Studio Online account where you can host your source code and create CI/CD, if your source code is in github, it’s OK, we can only use the CI/CD from VSTS and use github as your source repository.

 

Advertisements

Is it worth to try Typescript in React Project

My Answer is NO.

The reason is pretty simple, the typescript packages contains too much errors and issues, it will introduce more problem and bugs than the benefit it brings to you.

Another issue it comes is the version compatibility issue. As the react project grows, each one of these new react related components, Redux, React-Redux, React-Router etc, every single one of these components will need its corresponding typescript type definitions, and I am sure they will have compatibility issue between the current supported version and latest version, just like what it is now. When your project grow, you will end up having lots of constraints to adapt a very simple new version of one of these component.

So for now, at this stage, don’t use typescript.

The Javascript Libraries/packages worth you spend time to know (part 1)

Recently I searched for the most popular programming languages, and I am surprised seeing that JavaScript is still the #1 languages in the list. Although I am a .NET developer, but I have been using JavaScript for many years. My original thought was that only OOP languages like c, c++,Java, c#, etc are called “Programming language”, because all these languages are high-leve, strongly typed, object-oriented, they share a strong, well-defined libraries out-of-box can be used, and they all run on server-side and can be used against multiple-purpose, they are called “advanced programming language”.  the languages like JavaScript is only “low level” language, it is weakly typed, doesn’t have rich built-in libraries, and its main purpose is manipulate HTML, which is used by none “Programmer”. However things seems changed completely since the introduction of Node.js. Since I learnt node.js few years ago, these original “thought” changed me completely.

What makes the JavaScript so powerful in recent years? the answer is Libraries. because JavaScript is open-source, tons of libraries, engines based on JavaScript were built in an amazing speed. Just because the simplicity, weakly typed, prototype-based of the JavaScript, the Libraries build on top of it can be really powerful. Here is a list of JavaScript Libraries: List of JavaScript libraries, on top of these libraries, there are lots of JavaScript packages can help you to achieve more quickly and easily. These packages pack some reusable commonly used functionality together and provide an easy-to-use interface and document for any JavaScript programmer in the open source community.

Here are the most popular JavaScript Libraries/Framework (2017-2018) worth you spend time to know it.

1. ReactJS and React Native

ReactJS is obviously the most popular and fastest grown library. It was originally developed by Facebook, and published to open source in 2013. It is used for building user interfaces specifically for single page applications. The benefit of React is it can be used to create large web applications which can change data, without reloading the page. It is fast, scalable, and simple. It works only on user interfaces in application, so it can be worked with a combination of other JavaScript Libraries, such as AngularJS, Node.js, or ASP.NET MVC.

React Native library were announced in 2015, which provides the react architecture to native mobile applications for iOS and Andriod. It enable user with JavaScript background can build mobile application for iOS and Andriod with one shared code base, but build native iOS and Andriod application. More important, according some analysis and comparisons, the performance of React Native apps are as good as the apps build by using C++/Swift in iOS and Java in Andriod. It is a great choice for cross-mobile-platform, high performance, limited-budget apps.

2. Angular JS

Compare with ReactJS, angular has been around for many years, angular is a much fuller featured framework compared with react. the set up code for angular is a little verbose. even through i was a big fan of Angular, I have almost completely abandon it since I started to use React, since React can do pretty much anything Angular can do, and having the advantage of performance, easy to use, quick to setup, easy to implement, and big time saver. Here I am not going to spend time on Angular, from my opinion the only reason you will adopt Angular over React is because you already well-educated in Angular and don’t have big learning curve, and is well deep-dived in the angular community.

3. Meteor

Meteor is a cross-platform, open source JavaScript library wirtten using node.js. it allows for rapid prototyping and produces cross-platform code (android, iOs, Web). It integrated with MongoDB and uses the Distributed Data Protocol and Publish-subscribe pattern to automatically propagate data changes to clients without requiring the developer to write any synchronization code.

4. Knockout

Knockout is the first JavaScript framework I learnt to build dynamic data two-way data binding web pages. It was so powerful and easy to learn that it quickly earn a large number of developers. It is implemented in the Model-View-ViewModel pattern, so it clearly separate Damian data, view component, and data to be displayed.

Compared with angularjs and react, knockout is like a lightweight angularjs. It doesn’t have lots of features like routing, etc, but it can be achieved by using third party libraries. From the performance perspective, knockout is the slowest From this speed comparison between angular, react, and knockout . It may not necessary to learn knockout at this time since we have much better options, but it is still a very good lightweight library, especially good for the web site only need a dynamic loading pages for existing sites, or built on top of asp.net mvc with only a few pages need asynchronous data loading.

5. Vue.js

Vue is another framework has been gaining rapid progress in the recent years. It adopt the advantage of both react and angular, providing similar roles as the react – playing the V in MVC model. It need to work with other libraries together as a Full-stack JavaScript framework. Because it works in the “view layer” only, it makes it can be easily integrated into other projects/libraries.

Compared with AngularJs, Vue is one-way data binding, and AngularJs is two-way data binding. One-way binding give the developer more controls on how the DOM object is updated, which in turn will increase the performance.

Up coming next

In the next part, I will talk about the JavaScript packages which are very helpful to avoid you to re-invent the wheel.

how to use Keys in React Dynamic children the right way

Recently I was stuck in a react component which children components doesn’t update no matter how I set the state or props. I eventually find the solution is really easy and simple: set the Key value unique across the parent context all the time.

Problem:

The issue can happen in all cascade drop down scenarios. For example, the parent dropdown is a list of countries, and the child dropdown is a list of cities. If the country drop down list changes, the cities drop down should reload with the corresponding country’s cities. However once the cities drop down option changed, it will always keep  the current selected status when I change the countries drop down.

Solution:

The solution is pretty simple: always make sure the Key value in the child list unique across the countries, not just the current selection.

Case study:

My previous thought was that just make the the Key value unique, and the simplest way is just pass the index of the child children array, and it works in most cases, as long as you don’t have a cascade dropdown. and it is true in that case. However in the cascade drop down scenario, the index is not unique across parent drop down selection, which means the child index 1 of city New York in the drop down for United State, is not the same for London for United Kingdom. If the index of the array is still passed to child dynamic list, it will cause the child component think it’s the same component as its previous one, so just leave it and don’t update the child component. In my scenario, I just need to pass the id of country and id of city as the Key value, and it fix the problem.

Lesson Learnt:

  1. React can only determine child dynamic component based on the Key
  2. always make sure the Key is unique across the parent component, not the current selection

cors for rest web api

to add support for CORS

  1. install package
    Install-Package Microsoft.AspNet.WebApi.Cors
  2. add to WebApiConfig.Register method
    config.EnableCors();
  3. To enable CORS for all Web API controllers in your application, pass an EnableCorsAttribute instance to the EnableCors method:
     var cors = new EnableCorsAttribute("www.example.com", "*", "*");

In the case you have token oauth authentication for rest web api, fix the pre-flight request cors issue:

  1. Move the code to the first line Startupapp.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
  2. REMOVE  context.OwinContext.Response.Headers.Add("Access-Control-Allow-Origin", new[] { "*" }); from the GrantResourceOwnerCredentials()

 

reference:

 

Sideloading of apps is not enabled on this site

If you are deploying a solution/ sharepoint apps to sharepoint, at some point, you will likely come across this error: “sideloading of apps is not enabled on this site”.

so with this error, you won’t be able to deploy apps to sharepoint on-premise or online. to fix this issue, we have two different approaches for on-premise and online.

  1. on-premise server with full control

Enable-SPFeature e374875e-06b6-11e0-b0fa-57f5dfd72085 –url http://sp.contoso.com

2. sharepoint online

It is 2-steps solution for sharepoint online

  1. download and install sharepoint online management shell
  2. execute the script below
#CODE STARTS HERE
$programFiles = [environment]::getfolderpath("programfiles")
add-type -Path $programFiles'\SharePoint Online Management Shell\Microsoft.Online.SharePoint.PowerShell\Microsoft.SharePoint.Client.dll'
Write-Host 'Ready to enable Sideloading'
$siteurl = Read-Host 'Site Url'
$username = Read-Host "User Name"
$password = Read-Host -AsSecureString 'Password'
 
$outfilepath = $siteurl -replace ':', '_' -replace '/', '_'
 
try
{
    [Microsoft.SharePoint.Client.ClientContext]$cc = New-Object Microsoft.SharePoint.Client.ClientContext($siteurl)
    [Microsoft.SharePoint.Client.SharePointOnlineCredentials]$spocreds = New-Object Microsoft.SharePoint.Client.SharePointOnlineCredentials($username, $password)
    $cc.Credentials = $spocreds
    $site = $cc.Site;

    $sideLoadingGuid = new-object System.Guid "AE3A1339-61F5-4f8f-81A7-ABD2DA956A7D"
    $site.Features.Add($sideLoadingGuid, $true, [Microsoft.SharePoint.Client.FeatureDefinitionScope]::None);
     
    $cc.ExecuteQuery();
     
    Write-Host -ForegroundColor Green 'SideLoading feature enabled on site' $siteurl
    #Activate the Developer Site feature
}
catch
{ 
    Write-Host -ForegroundColor Red 'Error encountered when trying to enable SideLoading feature' $siteurl, ':' $Error[0].ToString();
}

#CODE ENDS HERE

Run the code as shown below, enter the site url with username nad password for your sharepoint online, the powershell will take care of the rest for you.

enable-sideloading-sharepoint-online_thumb

VS 2015 Package Manager Console Failed

Opening package manager console produce the error message:

“Windows PowerShell updated your execution policy successfully, but the setting is overridden by a policy defined at a more specific scope. Due to the override, your shell will retain its current effective execution policy of Unrestricted. Type “Get-ExecutionPolicy -List” to view your execution policy settings. For more information please see “Get-Help Set-ExecutionPolicy”.”

A temp fix is update the regedit

[HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Windows\PowerShell]
"ExecutionPolicy" set to empty

Restart the VS 2015 should fix this issue

How to make AJAX Call from POSTMAN

There are two types of RESTful Web Service methods can be consumed by ajax call: HttpPost and HttpGet.

for HttpGet, it’s pretty simple, all we need to do is add querystring parameters to the URL.

for HttpPost, if the Rest web service method take an object as parameter, we will need to construct the object as JSON and pass it in the body of the request. A key element to get it working is to add Content-Type: application/json to HEADER section.

Do NOT check Email first thing in the morning

Ignorance is Productive

When it comes to email, ignorance is bliss. That’s why if you’ve got something important you want to make progress on, I have these four words for you:

Don’t Check Your Email

as soon as you get up, work on something important for 30-45 minutes, and only then check it. If you can stand it, wait even longer.

And you know what? As long as you’re ignorant of everything else that’s going on outside, you can concentrate on what you want to work on.

Any new information you get can cause you to get distracted. On a quick tangent, this is also why I often don’t look at any news in the morning, don’t turn on the TV, and listen to audiobooks or even educational podcasts instead of the radio in my car – I don’t want anything to distract me. I can’t control everything but I can control my own.

It’s not Your Todo List

Do you know what is most important for you to work on? Do you know the first thing you want to do this morning? Then go ahead and do it!

On the other hand by checking email, you risk doing what someone else wants you to do. Every time you open an Email, you should consider whether it’s more important than everything else on your task list – but realistically, how many of us actually do that?

If you don’t, then the items you end up working on (even if it’s just replying and giving information) end up being tasks for other people rather than yourself.

Or more bluntly, when you check your inbox, the emails you get are a todo list someone else makes for you.

So, Who is in charge of your time – you, or the person emailing you?

It’s an excuse to Lack Direction

“Why are you checking email first thing in the morning anyway?”

Most likely the answer could be “you don’t know what you are supposed to be working on”

I am certainly not immune to this myself. If I am checking my inbox too often, that’s frequently an early warning sign that my todo list has gotten off track somewhere.

The real problem behind this behavior is that you don’t see checking email as a low priority activity, because you haven’t decided what the high priority activities area are. when you don’t have a clear list of priorities, checking email becomes an urgent activity that you do, but at the expense of your important ones.

If this strikes a nerve with you, don’t worry – it can be fixed. Find out Urgent versus Important time management matrix, and stop checking email so frequently.

Reaction or “Proaction”

when you check your email, the best case scenario is you checked at exactly the right moment, just when a super important email came in – and you can take instant action right away. How often does that actually happen? Rarely

The usual case is that, when you turn on your “check email” mode, you end up with more work to do, by replying emails regardless of their true priority.

I prefer taking proactive actions – what I call proaction. Work on the things that are important to you, regardless of whether they’re urgent or simply at the top of your inbox.

Searching for Excuses

If I’ blindly checking email, I am usually not checking for anything important – I am usually searching for an excuse to not do the work I know I must do.

I am searching for any reason why I can tell myself later I didn’t get the work done that needed to be.

Don’t fall in that trap. Don’t give yourself an out by checking your email for an excuse to fail.

It builds Expectation

A lot of people tell me “But I have to check my email! People expect a response from me”

First of all, I don’t believe it. If they do urgently awaiting your response, there are surly lots of ways to reach you, by phone, by visiting, by calling your colleague.

The more often you check email, the more often people will expect you to check it. and that’s the reason why people are EXPECTING response from you.

Just stop checking it first thing in the morning, and people won’t expect it anymore.

I know, it’s easier said than done. Don’t worry, after the first week or two, nobody will think anything of it.

Of course, there are causes you must check your email. well, if you do, constrain yourself to only check a limited subset of email, and I recommend you follow these rules

  1. Only check if there is something specific you are looking for or awaiting for
  2. Separate low value emails
  3. Set a time limit. Commit to checking for 5 minutes, just to look for that one piece of information, and you are done. before you open your inbox, decide what you will do if 1)the email is there 2)the email isn’t there 3)the email is incomplete. Don’t be reactionary – proactively decide what action you will take based on the outcomes you expect.

reference: http://sidsavara.com/personal-development/do-not-check-email-in-the-morning

IoT: Monetizing the Internet of Things

IoT continues to evolve at a rapid pace, right in front of our very eyes. Supoposely,

  • By 2017, an estimated 90M people will live in smart homes.
  • By 2020, 50B connected devices is IoT

but there are challenges, especiallyu when it comes building a recurring revenue model that allows you to stay agile, respond to your market, and scale products quickly and successfully.

IoT is clearly the near future of business. But as we quickly progress into our increasingly digitized world, one that concentrates on connections – wireless, virtuals, etc. It’s super critical to focus on a solid business model will ensure your business gets a smart start on the right track.

the questions you have to understand and answer before you made any possible success in IoT

  1. How, if done right, IoT could mean massive growth opportunities for your business
  2. How can you successfully conquer the challenges of integrating products and services
  3. How companies like Nest, Honeywell, and Lowe’s have built powerful business models