SPFx Web part -Working with GIT version Control


Manimekalai
Technology Specialist
Published On :   19 Jul 2018
Visit Count
Today :  3    Total :   228




ü After setting up your SPFx project, you can use GIT repositories to manage your project source code.

ü Below are the pre-requisites to make use of GIT,

o A VSTS account. If you don't have one, you can sign up for one for free

o GIT for windows

ü After creating VSTS account, Navigate to https://<your account name>.visualstudio.com

ü Create a new project and choose version control as GIT

ü To work with Git, you need to clone your project to your computer

ü Open the node.js command prompt

git clone https://xxxx/MyFirstProject/_git/xxx

ü Enter your office 365 credentials

ü After running the previous command, Git downloads an empty project into a new folder for you to work with

ü Create SPFx Webpart/Extension into the newly create folder path

ü Now you will be in your master branch but you should not work on the master branch for that you have to use the below command to work on your local folder without altering the master branch

git branch feature/newwebpart

git checkout feature/newwebpart

ü Now your local branch is ready to start working

ü Once you are done with your work, check-in your branch and push the code to TFS using the below steps

ü Go to Visual Studio Code, Click on Git Icon from the left side bar

ü Provide Check in Comments in the message box

clip_image002

ü Click on the Commit All as shown in the picture

ü Once committed, click on publish if the branch is not published and from the next time just click on the push option to push the code to your branch.

ü Once you are done with the above step, Go to your git repository and navigate to branches folder https://clt-3fcc36e5-70bf-47b7-99c8-95581a97b955.visualstudio.com/xxx/_git/xxx/branches

ü Click on Pull Request à New Pull request

ü Create New Pull Request to merge your local branch with your master branch

clip_image004

ü Add proper comments in the description section and select Reviewers name to review your code.

ü Once done, your pull request will be created and it will be available for review.

clip_image006

Thanks!

Categories