Push existing UI5 project to private bitbucket

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

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

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.

Make a new folder for this repository

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.

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

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:

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:

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

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

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

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

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

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.

Fill in your password of your Bitbucket account

Commit your UI5 project to the Bitbucket Repository:

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

Push your commit to the remote branch

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.

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

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

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

Kind regards,

Wouter