Step by Step Procedures to Integrate Visual Studio Team Services (VSTS) with Visual Studio Code (VSCode) for SharePoint Framework (SPFx) Projects


Sathish Nadarajan
SharePoint MVP
Published On :   19 Jun 2018
Visit Count
Today :  2    Total :   2537



In this article, we will see how to Integrate VSTS with Visual Studio Code for SharePoint Framework Projects. Usually, we will be using GIT with the VSCode. But, there is an extension called “Visual Studio Team Services” for the VSCode. Let us see, how to use that extension to CheckOut and CheckIn our source code using the TFVC in VSTS.

Now, let us see the step by Step procedure to create an account and profile in the VisualStudio.com

1. Login to the https://visualstudio.com with your Microsoft ID.

2. With this ID, we can use 5 user licenses for free.

3. Once, we login, go to the services page with the below URLhttps://app.vsaex.visualstudio.com/me?mkt=en-US&campaign=o~msft~vscom~signin#

4. We will see the below screen.

clip_image002

5. Click on “Create new Account”.

6. Give a name for the Account and select the second Option on “Manage code using”: section.

7. i.e., the “Team Foundation Version Control” and click on Continue.

clip_image004

8. Once, the account got created, click on “New project”

clip_image006

9. Give an appropriate name for the project as below and select the Version control as “Team Foundation Version Control” and the project template, am leaving it to you. Either it can be an agile, scrum etc.,

clip_image008

10. Create a SPFx project using the Command prompt by giving the YO commands.

clip_image010

11. Open the solution in VS Code.

clip_image012

12. Click on the Extensions, the fifth tab on the left menu and Search for “Visual Studio Team Services” and install the Extension.

clip_image014

13. In vs code go to File->preferences->settings-user settings add the below line of code

clip_image016

"tfvc.location":"C:\\Program Files (x86)\\Microsoft Visual Studio\\2017\\Community\\Common7\\IDE\\CommonExtensions\\Microsoft\\TeamFoundation\\Team Explorer\\TF.exe",

"tfvc.restrictWorkspace": true

14. Go to the command palette

clip_image018

15. On the command palette, enter the Team:Sign in command

clip_image020

16. Once, we enter, we will see the error as shown below. “No Team Services or Team Foundation Server repository configuration was found. Ensure you’ve opened a folder that contains a repository”

clip_image022

17. For creating the repository, we need Visual Studio IDE, Eclipse or with the JetBrains IDEs (e.g, Android Studio, IntelliJ). or any sort of IDE for sure. Without that, we cannot start using the TFVS with VSCode. This is a one time requirement and even the free community version of the Visual Studio 2017 will do this. No extra cost is incurred here.

18. Open the Visual Studio and go to “Manage Connections”

clip_image024

19. Click on the “Connect to a Project”

clip_image026

20. Select the project which we created on the first few steps of this article.

clip_image028

21. On the Configure Workspace section, give appropriate folder name and Click on “Map & Get”

clip_image030

22. Now, close the VSCode and Open again. Otherwise, the newly added .VSCode folder will not be taken by the VSCode.

23. Now, connect with the Team again.

clip_image032

24. This time, we will get a different exception. “You are not connected to Team Services (vstswithvscode). Select ‘Learn more...’ and then run the ‘team signin’ command.

clip_image034

25. Again close the VSCode and reopen and click on the “Team Signin” in the Command palette. This time, we will get the option as shown below. On that, select the second Option “Authenticate and get an access token automatically (new experience)”

clip_image036

26. There will be a code displayed as below. Copy the code and click enter.

clip_image038

27. Paste the code on the below box, which will be opened automatically and click “Continue”

clip_image040

28. A new popup will be displayed, where we need to enter the Microsoft ID and password.

clip_image042

29. Once, the Password is validated, then we will be displayed with the below screen. Now, we can close the screen.

clip_image044

30. When we come back to the VSCode, again, we will end up with a different exception. It appears you are using a Server workspace. Currently, TFVC support is limited to Local Workspaces.

clip_image046

31. Now, go back to Visual Studio and go to the Solution Control Explorer

clip_image048

32. Click on the Workspaces.

clip_image050

33. Select the workspace and Edit and go to the Advanced Mode.

clip_image051

34. The Location of the workspace will be by default “Local” only. But, it is not recognized by VSCode. Am not sure, whether that is a bug with the VSCode or not. But, the workaround is, change the Location to “Server” and do a save.

clip_image052

clip_image053

35. And then, change the location back to “Local” and save.

clip_image054

36. Now, open the developer command prompt

clip_image056

37. Go to the path C:\\Program Files (x86)\\Microsoft Visual Studio\\2017\\Community\\Common7\\IDE\\CommonExtensions\\Microsoft\\TeamFoundation\\Team Explorer\\ Where the TF.EXE is present.

38. Execute the TF.EXE Command (i.e. tf vc workspaces /collection:<YourCollectionName>), it will pop up with the user name and password. Provide the credentials. It will get connected.

clip_image058

39. Then, close the VSCode and open again. Try connect Team. It will connect as below.

clip_image060

40. Open the source code folder from the VSCode. We can see that it got connected with the TFVC and there are around 37K files in the Excluded State. We need to add the .tfignore file similar to .gitignore file. The sample .tfignore file is available on the source code zip, which can be downloaded at the bottom of the article.

41. Once, added the .tfignore file, we will get only 24 files to be checked in approx.. The reason, is we are not going to checkin the NPM Modules along with our source code. Anyhow, for the second developer, he can take the code from the VSTS and if he installs the NPM on the folder, then he will be getting the NPM modules and he should be able to build the solution without any issue.

By this way, we can start using the VSTS for the VSCode projects as well. The same process can be repeated for every developer and get the latest source code from the VSTS. In the upcoming article, let us see, how to do the Continuous Integration and Continuous Deployment with VSTS.

Categories