DEV Community

Play Button Pause Button
Ankit Rattan
Ankit Rattan

Posted on

Deploy on Jira

#javascript #productivity #tutorial #devops

Jira, developed by Atlassian, is a popular project management and issue-tracking tool widely used by developers and teams to manage tasks, bugs, and agile workflows. For beginners, the easiest way to get started is by using Jira Cloud. Simply sign up on the Jira website, create a new project by choosing a suitable template like Scrum, Kanban, or bug tracking, and invite your team members. Jira’s interface is user-friendly, allowing you to set up boards with columns such as "To Do", "In Progress", and "Done" to track work visually. It’s beneficial for task management, where you can break down work into smaller issues, assign them to team members, and set due dates. Additionally, Jira excels in bug tracking, helping you log and prioritize software issues efficiently. If you're working with agile methodologies, Jira supports sprint planning, backlogs, epics, and real-time progress tracking. Its integration with tools like GitHub, Slack, and Confluence makes it even more powerful for team collaboration. Overall, Jira is a beginner-friendly yet robust tool that streamlines workflow, enhances productivity, and adapts well as your project or team grows.

Here in the video attached, I have shown how to deploy your first app to Jira via Forge.

Here is my code :

  • Folder Structure
    Image description

  • static/hello-world/src/App.js

import React, { useEffect, useState } from 'react';
import { events, invoke } from '@forge/bridge';

function App() {
  const [data, setData] = useState(null);

  const handleFetchSuccess = (data) => {
    setData(data);
    if (data.length === 0) {
      throw new Error('No labels returned');
    }
  };
  const handleFetchError = () => {
    console.error('Failed to get label');
  };

  useEffect(() => {
    const fetchLabels = async () => invoke('fetchLabels');
    fetchLabels().then(handleFetchSuccess).catch(handleFetchError);
    const subscribeForIssueChangedEvent = () =>
      events.on('JIRA_ISSUE_CHANGED', () => {
        fetchLabels().then(handleFetchSuccess).catch(handleFetchError);
      });
    const subscription = subscribeForIssueChangedEvent();

    return () => {
      subscription.then((subscription) => subscription.unsubscribe());
    };
  }, []);

  if (!data) {
    return <div>Loading...</div>;
  }
  const labels = data.map((label) => <div>{label}</div>);
  return (
    <div>
      <span>Hello World from ANKIT</span>
      <div>{labels}</div>
    </div>
  );
}

export default App;

-manifest.yml

modules:
  jira:issuePanel:
    - key: hello-world-panel
      resource: main
      resolver:
        function: resolver
      viewportSize: medium
      title: Ankit Panel (HackQuest)
      icon: https://developer.atlassian.com/platform/forge/images/issue-panel-icon.svg
  function:
    - key: resolver
      handler: index.handler
resources:
  - key: main
    path: static/hello-world/build
permissions:
  scopes:
    - read:jira-work
app:
  runtime:
    name: nodejs22.x
    memoryMB: 256
    architecture: arm64
  id: ari:cloud:ecosystem::app/--YOUR_APPID

Top comments (0)