Dear UI5 Developers,

Within the WebIDE you have the possibility to connect your project with a git repository. When talking about git, most of you will probably think of github.

In fact there are multiple git providers like Bitbucket, Gitlab, … .Github is definty the most popular one. Problem of Github is that you need to pay if you want to use a private repository. Therefore I prefer Bitbucket! Bitbucket offers you free private repositories!

In the Webide you can clone UI5 projects from a bitbucket git repository to your WebIDE which is very good explained in this blog: http://scn.sap.com/community/developer-center/front-end/blog/2015/12/13/want-to-use-bitbucket-as-your-project-repository-with-sap-web-ide

But what if you already have an existing project? In this blog I’ll show you how you can push your project to a new bitbucket git repository.

The way of pushing your existing UI5 project from the WebIDE to Bitbucket is a bit different than with github. For some reason Bitbucket requires a initial commit and push. After that Bitbucket will create the master branch. Without the master branch you cannot commit and push anything to the git repository from the WebIde. Therefore you’ll have to do a commit first from you local pc and push it to the git repository. After that you’ll be able to work with the Bitbucket git repository from in the WebIDE. I’ve explained all steps to perform this:

Start with creating a repository in bitbucket

/wp-content/uploads/2016/07/f1_1002179.png

Give a name to your new repository and click on “Create repository”

/wp-content/uploads/2016/07/f2_1002180.png

We cannot direclty connect the SAP WebIDE with Bitbucket. Bitbucket requires a intial commit to create a master branch. The WebIDE in his turn requires a master branch before it can push an initial commit. This means we have to do our first commit and push manually. Therefore I start the Git Shell. You could also use CMD or other shells.

/wp-content/uploads/2016/07/f3_1002181.png

Make a new folder for this repository

/wp-content/uploads/2016/07/f4_1002182.png

Bitbucket gives you an example on how to do your first commit on the overview page. I started from this but did a few small changes.

/wp-content/uploads/2016/07/f5_1002183.png

This is the script I used:

1) init git

> git init

2) connect to your bitbucket git repository, you can find the url in the how-to on the overview page

[master]> git remote add origin https://lemaiwo120@bitbucket.org/lemaiwo120/myfirstui5repo.git

3) Create description file for our first commit

[master]> echo “Demo for SCN” >> description.txt

4) Add the file to git

[master +1 ~0 -0 !]> git add *

5) Commit the file

[master +1 ~0 -0]> git commit -m “Initial commit with description”

6) Set http.sslVerify to false. This is required if you want to use Bitbucket from in the WebIDE

[master]> git config http.sslVerify false

7) Push the description file to my bitbucket git repository

[master]> git push origin master

/wp-content/uploads/2016/07/f6_1002184.png

Now bitbucket has created a master branch and we can push our UI5 project from the webide to bitbucket.

First we need to configure the Git Settings in the WebIDE. Go to the configuration of the webide and fill in your git setting:

/wp-content/uploads/2016/07/f7_1002185.png

You’re not required to fill in the Git Settings. If you don’t the WebIDE will ask you the Git Settings during your first Pull with the following popup:

/wp-content/uploads/2016/07/f8_1002186.png

Before you push your UI5 project to Bitbucket it will look like this

/wp-content/uploads/2016/07/f9_1002187.png

First step to add your UI5 project to your Bitbucket repository:

Right click on your project –> Git –> Initialize Local Repository

/wp-content/uploads/2016/07/f10_1002188.png

Fill in the URL to your Bitbucket repository. You can find this on the overview page of the Bitbucket repository

/wp-content/uploads/2016/07/f11_1002189.png

You’ll see some new icons in front of your project in the WebIDE. This means it’s connected to your Bitbucket Repository 🙂

/wp-content/uploads/2016/07/f12_1002190.png

Next step, go to the Git Pane on the right of the WebIDE and click on Pull. You’ll need to get the file from your first commit from your local pc before you can push your UI5 project.

/wp-content/uploads/2016/07/f13_1002191.png

Fill in your password of your Bitbucket account

/wp-content/uploads/2016/07/f14_1002192.png

Commit your UI5 project to the Bitbucket Repository:

Git Pane –> Stage All –> fill in a Commit description –> Commit

/wp-content/uploads/2016/07/f15_1002193.png

Push your commit to the remote branch

/wp-content/uploads/2016/07/f16_1002194.png

Select the branch orign/master. This branch will only appear when you did a first commit from your local pc and after a Pull in the WebIDE.

/wp-content/uploads/2016/07/f17_1002195.png

If everything went well you’ll see green icons in front of every file and folder of your UI5 project.

/wp-content/uploads/2016/07/f19_1002197.png

To be sure if everything is in the Bitbucket repository you can check it on the Bitbucket website –> your repository –> Source

/wp-content/uploads/2016/07/f20_1002198.png

Using Bitbucket you can share your UI5 project between multiple developers using trial accounts and you’ll keep your code private!

Kind regards,

Wouter

To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

  1. Luca Manassero

    Thank you very much!

    I’m developing a SAP HCP application using SAP Web IDE and was wondering since months how to configure BitBucket (which we normally use) instead of GitHub: you just made my life (and that of my team) a lot easier 🙂

    Luca

    (1) 

Leave a Reply