Boost your google ranking using sub-domain vs subdirectory

 

I heard a lot of SEO techniques about improving your google ranking , one of the popular ones is adding blog to your site. No question about that.

However, now I am facing an issue: where should I put my blog to my site? Under a sub domain like blog.mydomain.com, or subdirectory like mydomain.com/blog? Most of these articles from “SEO experts” suggest definitely go to sub-directory, and the reason from them seems pretty compelling – sub-directory content is treated as in the same entity by google as your main site, it will drive up your ranking. The problem for me with this approach is that it means I have to host both the main site and blog site under the same web application, or ideally blog under virtual directory in IIS. With hosting my ReactJS site on Azure Web App, I simply can not achieve that after 2 days investigation: the reason is simple, I can not get the routing sorted easily. React route has its won routing, which means if the ReactJS app hosted in the root site, all routing will be picked up straight away when a new request sent to the server. URL rewriting doesn’t work no matter how I update the web.config or any other custom configuration. Dead end.

One work around is to use WordPress’s REST API: build my blog in a subdomain site, and extend my ReactJS application to implement a blog which consume wordpress REST API. This is achievable, but too much extra work, and since there are so many existing themes I can use straight away, why would I built everything again? Unless I have no other options!

Things changed until I saw this video from google webmasters

 

So basically google is smart enough to treat subdomains and subdirectories for the same domain as the same “big” entity. That’s good news!

Some people mentioned that this video from google webmasters is dated back to 2012, that’s a long time ago and may not valid anymore. Luckily we have another latest video from google webmasters last year. They still holding the same opinion after 5 years.

Any opinions? Welcome to post below!

Advertisements

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.

Step 1: Create react app and customize to your need

  • create your react boilerplate app using create-react-app. You can easily follow the instruction from facebook create-react-app git to create your react app. Just noted that by default it use yarn instead of npm
  • install npm packages

npm install

  • add the source to github repository
    • create a new project in your github account
    • in the code section, it will give you the detailed instruction how to publish your code to the repository
  • Open the package.json using your preferred editor (I will use Visual Studio Code through this article), inside the scripts node, it lists all the commands you can use.
  • As the create-react-app has everything you need to build a modern SPA, including JSX,ES6, service worker, etc. However these tools are pre-configured to work in a specific way. To take full control of your project, you need to eject to be able to customize it. run the command to eject and you will see all the pre-configured configuration files are generated and available for your.

npm run eject

  • If you are building a SPA, it’s ready to check in your change to the github. If you are not and want to add react routing, redux, etc, I will include the details in the next article.
  • after you check in the latest code to github, login to your visualstudio.com

Step 2: create build definitions

  • Create a new project inside your visualstudio.com
  • navigate to the Build and Release section, and create a new Builds definition
  • In the Select a source section, you can select Github and pick the repository and branch you want to deploy and click continue
  • we will start from scratch, so we will pick empty template
  • In the phase 1, give it a name, here I give it npm since it’s an npm build process
  • Click + button to add task, search and add npm, the display name is Install dependencies, Command would be install. this task will install all packages defined in the package.json before we start build
  • click + button to add another npm task, the display name is build, Command is custom, and we will enter run build in the command and arguments field. this task will create the build folder and generate all files ready for product release
  • click + button to add another task, search and add Archive Files task, leave the name as Create release package $(Build.BinariesDirectory), Root folder or file to archive is build, set archive type to zip, and Archive file to create is $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip, tick the Replace existing archive checkbox
  • click + button to add another task, search publish and add Publish Build Artifacts task. enter the display name Publish release Package. set path to publish to $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip, change Artifact name to drop. Since we are going to use Visual Studio release script to pickup the build file, we select Visual Studio Team Services/TFS from the Artifact publish location.

now when we save and queue the build definition, we will see the build will pickup your source code from github and generate a zip file ready to deploy.

step 3: create web app in Azure. This is pretty straight forward and simple, I will skip this in detal

step 4: create release definition

  • navigate to Releases folder, and search template azure app service and select Azure App Service Deployment under Featured section in the search result
  • Click Add artifact box, select Build as source type, and pick the same project, select the build definition just created for the source, leave Latest as defult version, click Add to save. Tick the lighting icon to enable/disable continuous deployment trigger.
  • select Environments box, and click the link with text 1 phase, 1 task
  • In the deployment process section, select your Azure subscription, and it will cascade dropdown show your web app created in step 2.
  • Fill the missing bit in Deploy Azure App Service section. Leave the default as it is.
  • Once you have filled the required fields and back to the release definition, you should not see any error indication anymore.
  • Click Save button to save your release definition.

Now you can manually start your release definition to get your code released to Azure Web App,.

 

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