Tag Archive for Code

How to setup a dev environment with Officedev/PnP using Visual Studio Code in under 15 minutes

Ok so maybe 15 minutes is a little bit ambitious, but the point of this post is to show how easy you can setup a dev environment for anyone that is interested in contributing to PnP (or any other GitHub project for that matter).

Visual Studio Code

Recently Microsoft released a preview version of Code. https://code.visualstudio.com/ Basically Code is a very slim (and free) version of Visual Studio and can be used to “Build and debug modern web and cloud applications.”. Sounds good right!? At first sight Code is not much of an editor when compared to Visual Studio of course. But since it’s free and has GIT compatibility I wanted to gave it a shot with the OfficeDev PnP Git repository to show how easy it is to contribute to the community.

image

Let’s set this environment up!

Before I start writing this post I already had a Github account and forked the PnP to my Company Github. This is a very easy step which is described in the first chapter of this wiki: https://github.com/OfficeDev/PnP/wiki/Setting-up-your-environment

After you have this fork in place you can close down this wiki and continue here and Download Code from https://code.visualstudio.com/ and run setup. No further questions asked it just installs. Opening Code gives us the following interface.

image

Advanced GIT setup

In my search for good tutorials on how to setup GIT with PnP I came across the PnP Wiki which I mentioned before, but also this post from Patrik Björklund http://blog.cognit.se/hardcore-git/ I decided to follow this last one for a good GIT setup. The next steps are coming from this post.

Download CMDer (https://github.com/bliker/cmder/releases/tag/v1.1.4.1) and Pathman (https://code.google.com/p/pathman/) and unzip in a folder of choice for tooling. Pathman is a nice piece of software with a GUI to add Path variables. CMDer is a good looking commandline tool with GIT aboard. When both tools are unzipped start Pathman and add the path to bin folder where git.exe is stored “[CMDER folder]\vendor\msysgit\bin\”

image

Next up you can follow step 2 of Patriks Blog http://blog.cognit.se/hardcore-git/ to setup authentication with Github. This makes it easy to stay authenticated so you don’t have to put in your credentials constantly when developing. However if you don’t want to do this you can continue here.

Get your GIT together

Ok the following step is to get all Git repositories in sync so we can start developing! Fire up CMDER and start typing the following set of commands:

First set your CMDER path to a folder on your filesystem where you want your PnP repository to land. Then type:

git clone https://github.com/YOURUSERNAME/PnP (This is the url to the Fork you made in the very first step of this post)

The clone will land in the folder “PnP” so use cd PnP to go to your new clone. Next you need to create a remote to the original OfficeDev PnP repository to retrieve latest updates when you want to.

git remote add upstream https://github.com/OfficeDev/PnP

Now we create a dev branch for development by using:

git checkout -b dev origin/dev

Now make sure that the upstream remote is fetched so we can pull it to the dev branch

git fetch upstream

In order it looks like this

image

The final step now is to checkout the dev branch and pull the upstream to the dev branch

git pull upstream dev

This action will fill your console with a lot of info so I’ll spare you that screenshot :). When this is done you can setup Code with this fresh Git branch.

Code and GIT

Now we have a valid dev branch on our local dev machine we can configure Code to use this folder. This way we can commit changes to our branch from Code. The only thing you have to do is Open Folder and choose you PnP GIT repository on your filesystem and start Coding!

image

image

image

image