TypeScript: How To Install TypeScript Plugin for Visual Studio 2015

In this article we see the simple step by step process to install Typescript Plugin for Visual Studio.

Important to note that Typescript is already included with the base installation of Visual Studio 2015 but using the Typescript Plugin we can get the latest version of the Typescript SDK to be used with Visual Studio. Though we will consider Visual Studio 2015 in this demo but process remains the same for Visual Studio 2015 and Visual Studio 2017.

We can download the Typescript Plugin from the following location-

http://www.typescriptlang.org/index.html#download-links

As highlighted select required version of Visual Studio that you want to install this plugin on to.

We will choose Visual Studio 2015 for this demo

1

On clicking the link will take us to the Plugin download page as shown below-

Click download to start the download

2

You can run or save the file as required

3

On execution of the Plugin executable, Install wizard triggers and we can see the following screens

Agree the License Terms and click Install

4

Monitor the progress and proceed

5

Close the Setup once it is completed.

6

Now launch Visual Studio, create new project and we can see a project template under TypeScript Node as shown below:

7

We can use this template to start with a TypeScript Project.

Hope you find it helpful.

Advertisements

SharePoint Framework: How to Prepare Environment for Development with SharePoint Framework

Microsoft have introduced another development methodology called as SharePoint Framework, which is claimed more flexible than earlier approaches like Farm Solutions, Sandbox Solutions, SharePoint Add-ins.

SharePoint Framework is compatible with a complete Web Development Stack with an inherent support to all modern JavaScript frameworks like React, Knockout, Type Script and so on.

In order to get a better insight I would recommend you to refer to the Webinar by Andrew Connell.

In this article, we will look for steps required to get developer machine ready for starting with SharePoint Development using SharePoint Framework.

Following image displays the steps to set up the development machine:

1

Step 1: Installation of Node JS

Search for “node js” or and navigate the link as shown below to reach to the official download page for Node JS.

You can also follow the direct link to download Node JS: https://nodejs.org/en/

2

As per recommendation from the Technical Community, it is advisable to go for LTS Version of Node JS.

Download the latest version available as shown below:

3

Run the installer and follow the default options as shown below:

Click Next

4

Accept license agreement and Click Next

5

Leave the default installation directory and Click Next

6

Continue with default features and Click Next

7

Click Install to start installation of Node JS

8

Wait until installation has been completed

9

Click Finish once the installation has been completed

10

Now in order to test the installation, launch Windows PowerShell Command Prompt with Administrator privilege

Type command “npm -v”, If installation is successful you can see the version of Package Manager (NPM).

Note: NPM is the Package Manager that used for dependency management, so that you no longer have to manually download and manage your scripts.

11

Step 2: Visual Studio Code

Search for “visual studio code” or and navigate the link as shown below to reach to the official download page for “Visual Studio Code”.

You can also follow the direct link to download Visual Studio Code:  https://code.visualstudio.com/

12

Since my development environment is using Windows Server 2012 R2 as base operating system, I can download the suitable version as per my needs.

1314

Once downloaded run the installer and proceed as follows-

Click Next to initiate the installation

15

Accept the license agreement and click Next to continue

16

Keep the defaults as it is and click Next to continue

17

18

Select required options and click Next

19

Click Install to start the installation

20

Wait until installation has been completed

21

Click Finish to complete the installation process

22

On completion, install will launch the Visual Studio Code window to ensure installation is successful.

23

Step 3: Install Yeoman  & Gulp

Yeoman scaffolds out a new application, writing your build configuration (e.g Gulpfile) and pulling in relevant build tasks and package manager dependencies (e.g npm) that you might need for your build.

Gulp is the Build System used to build, preview and test your project.

In order to install Yeoman & Gulp launch windows PowerShell command prompt with Administrator privilege

Enter command “npm  install  -g  yo  gulp” and enter

This command will perform global installation of Yeoman and Gulp

24

Wait until installation has been completed

25

262728

Once done successfully it will return with command prompt without any error message.

Step: 4 Install SharePoint Yeoman Plugin (SharePoint Client Side Libraries)

In order to install SharePoint Client Side Libraries enter following command

“npm install  -g  @microsoft/sharepoint”

29

Wait until the installation has been completed

3031

Step: 5 Install SPFX Developer Certificate

Local Workbench Site, which is used to test the WebParts locally with using SharePoint Context, will notify you with the error that it is not configured to load scripts from localhost.

In order to avoid this error message we need to install SPFX Developer Certificate by using the following command

“gulp trust-dev-cert”

32

Wait till installation has been completed

Click Yes on the Security Warning to accept installation of certificate

34

With this Step 5, SharePoint Framework and all related dependencies are installed successfully and it is the time verifies the installation and in the following steps, we will perform validations.

Step: 6 Create SharePoint Project

Enter following command “yo  @microsoft/sharepoint”

35

This command will initiate the Project Configuration for SPFX based SharePoint Solution

This command will take input from the user to configure the project attributes like project name, description, directory, development environment and so on.

36

Input all information required and enter to proceed with Project configuration.

Wait till Project has been created

3738

Once project has been created successfully, we will get command prompt returned without error.

Step: 7 Execute First Project

Now this is the time to finally run the Project and testify the SharePoint Framework.

In order to run the project enter the following command

“gulp  serve”                      (case sensitive so be careful)

39

Wait until the project initialize

40

Once the Project initialized successfully, we can see SharePoint Workbench launch WebPart placeholder, mimicking SharePoint Web Page.

On this page, you can add the WebPart that has been deployed locally without using SharePoint context.

41

On click of Add button we can see available WebParts listed, select the WebPart in question and add it to the Page

42

Once added we can see the WebPart on the Page, this ensures that we have done all configuration as expected

43

In order to open the Project Code we can right click the solution directory choose option “Open with Code”

44

And we can see the Visual Studio Code launched with project dependent files

45

Command Summary

46

That is all for this demo.

Hope you find it helpful.

SharePoint 2010 References

SharePoint 2010 Installation

  1. Managing and Implementing Microsoft SharePoint 2010 Projects
  2. Practical SharePoint 2010 Information Architecture

SharePoint 2010 Architecture & Governance

  1. Pro SharePoint 2010 Disaster Recovery and High Availability
  2. Pro SharePoint 2010 Governance

SharePoint 2010 Project Management

  1. SharePoint 2010 for Project Management, 2nd Edition
  2. Pro Project Management with SharePoint 2010

SharePoint 2010 Development

  1. Using Microsoft InfoPath 2010 with Microsoft SharePoint 2010 Step by Step
  2. Professional SharePoint 2010 Development
  3. SharePoint 2010 Development with Silverlight
  4. SharePoint 2010 Web Parts in Action
  5. Beginning SharePoint 2010
  6. Microsoft SharePoint 2010 Enterprise Applications on Windows Phone 7
  7. Inside Microsoft SharePoint 2010
  8. Microsoft SharePoint Foundation 2010 Inside Out

SharePoint 2010 Designer

  1. Pro SharePoint Designer 2010
  2. Beginning SharePoint Designer 2010
  3. Microsoft SharePoint Designer 2010 Step by Step

SharePoint 2010 Cloud Based Solution

  1. Developing Microsoft SharePoint Applications Using Windows Azure
  2. Professional SharePoint 2010 Cloud-Based Solutions
  3. Pro SharePoint 2010 Development for Office 365

SharePoint 2010 Search

  1. Pro SharePoint 2010 Search
  2. Working with Microsoft FAST Search Server 2010 for SharePoint

SharePoint 2010 PowerShell

  1. Microsoft SharePoint 2010 and Windows PowerShell 2.0

SharePoint Best Practices

  1. Expert SharePoint 2010 Practices

SharePoint 2010 Business Intelligence

  1. Professional Business Connectivity Services in SharePoint 2010
  2. Microsoft SharePoint 2010 Business Application Blueprints
  3. Microsoft SharePoint 2010 Business Intelligence Unleashed
  4. Microsoft SharePoint 2010 PerformancePoint Services Unleashed

SharePoint 2010 Branding

  1. Professional SharePoint 2010 Branding and User Interface Design
  2. Microsoft SharePoint 2010 Administration Cookbook

SharePoint 2010 Administration

  1. Pro SharePoint 2010 Administration
  2. SharePoint Server 2010 Administration 24 Hour Trainer

SharePoint 2010 Enterprise Content Management

  1. SharePoint Server 2010 Enterprise Content Management

SharePoint 2013 User Guides

  1. SharePoint 2010 at Work
  2. SharePoint 2010 Field Guide
  3. SharePoint 2010 Six-in-One
  4. SharePoint 2010 How-To
  5. Microsoft SharePoint Foundation 2010 Step by Step
  6. SharePoint 2010 All-in-One For Dummies
  7. Microsoft SharePoint Server 2010 Bible

SharePoint 2013 References

SharePoint 2013 Installation

  1. SharePoint 2013 Developer’s Installation Guide – LinkTech
  2. SharePoint 2013 Deployment Guide

SharePoint 2013 Architecture & Governance

  1. Microsoft SharePoint 2013: Designing and Architecting Solutions
  2. Microsoft SharePoint 2013: Planning for Adoption and Governance

SharePoint 2013 Development

  1. Beginning SharePoint 2013 Development
  2. Professional SharePoint 2013 Development
  3. SharePoint 2013 For Dummies
  4. Exploring Microsoft SharePoint 2013
  5. Microsoft SharePoint 2013 Developer Reference
  6. Microsoft SharePoint 2013 Inside Out
  7. Inside Microsoft SharePoint 2013
  8. Exam Ref 70-332: Advanced Solutions of Microsoft SharePoint Server 2013
  9. Exam Ref 70-331: Core Solutions of Microsoft SharePoint Server 2013
  10. QuickBooks 2013: The Missing Manual
  11. Custom SharePoint Solutions with HTML and JavaScript
  12. Microsoft SQL Server 2014 Business Intelligence Development
  13. Professional Visual Studio 2013
  14. QuickBooks 2013: The Missing Manual

SharePoint 2013 App Development

  1. Pro SharePoint 2013 App Development
  2. Microsoft SharePoint 2013 App Development

SharePoint 2013 PowerShell

  1. Beginning PowerShell for SharePoint 2013

SharePoint 2013 Business Intelligence

  1. Business Intelligence in Microsoft SharePoint 2013
  2. Pro SharePoint 2013 Business Intelligence Solutions

SharePoint 2013 Branding

  1. Pro SharePoint 2013 Branding and Responsive Web Development
  2. SharePoint 2013 Branding and User Interface Design

SharePoint 2013 Administration

  1. Professional SharePoint 2013 Administration
  2. Pro SharePoint 2013 Administration, 2nd Edition
  3. Microsoft SharePoint 2013 Disaster Recovery Guide
  4. Microsoft SharePoint 2013 Administration Inside Out

SharePoint 2013 Enterprise Content Management

  1. SharePoint 2013 WCM Advanced Cookbook
  2. Practical SharePoint 2013 Enterprise Content Management

SharePoint 2013 User Guides

  1. SharePoint 2013 User’s Guide, 4th Edition