Getting started

For this introduction, you will be creating a set of extensions for the pull request page in Bitbucket Server 7.0, and explore all the capabilities that Client-side Extensions brings to you as a front-end developer creating Atlassian Plugins.

The Bitbucket Server team provides a template to create a Bitbucket Plugin with all the tools already configured for you, including Client-side Extensions (CSE).

You can grab a copy by cloning Bitbucket CSE template:

1
2
git clone git@bitbucket.org:atlassianlabs/bitbucket-client-side-extensions-template.git

Installing the requirements

You will need to install:

• Node 12.19+
• Maven 3.6.3
• Java JDK 1.8
• Atlassian SDK 8

Starting Bitbucket

To install all the dependencies for the first time, run:

1
2
atlas-package -DskipTests

To start Bitbucket from your project, run:

1
2
atlas-run -DskipTests

Once the Bitbucket starts, you should see this message in the terminal:

1
2
bitbucket started successfully in XYZs at http://localhost:7990/bitbucket

Now, you can open the browser and navigate to http://localhost:7990/bitbucket

Default credentials

The local instance of Bitbucket requires you to log in using those credentials:

• username: admin
• password: admin

Developing

The template comes with watchmode and hot reload configured for your front-end code. You can run the CSE watch server by executing:

1
2
npm start

Creating a pull request to test your extensions

You will need to open a pull request in your local copy of Bitbucket.

The Bitbucket CSE template provides a testing project called Project 1, and inside, a testing repository called rep_1.

Let's create a PR in that repository:

1. Go to the Pull Request page for that repository: http://localhost:7990/bitbucket/projects/PROJECT_1/repos/rep_1/pull-requests
2. Click the Create Pull Request button:
3. Create a Pull Request using the branch basic_branching:

Creating a working directory for your extensions

Now, create a folder to use as your working directory and store the code for your extensions.

Open the Bitbucket CSE template you cloned, and:

1. Create a folder called getting-started under /src/my-app/extensions. This will be the directory where you will be creating your extensions.

You're ready!

That's it! You're now ready to create your first extension!