Jira is a popular undertaking management tool this is serving to you keep follow of tasks inside a undertaking. On the other hand, when operating on a large undertaking, your Jira dashboard can turn into cluttered since the number of tasks and crew people will build up.

To deal with this concern, you’ll be capable of use the Jira REST API to generate a simplified To-Do Document software that shows your assigned tasks and their closing dates. The API means that you can programmatically interact with Jira to create, retrieve, substitute, and delete issues and access shopper wisdom and undertaking details.

This instructional walks you by the use of rising a to-do file software with Node.js since the server to fetch issues from your Jira account and a React software to turn them. You moreover learn how to host each and every the frontend and server to Kinsta.

Must haves

To watch along, you wish to have:

• Node.js and Node Bundle Supervisor (npm) installed on your construction machine.
• A Jira account for gaining access to tasks.
• A cast working out of Node.js and React.

How To Assemble the Backend With Node.js and Explicit

Specific is a popular Node.js framework that provides a streamlined environment for building server-side programs. Explicit simplifies the coping with of routes and facilitates interactions with external assets, similar to APIs, databases, and frontend programs.

Apply the steps beneath to prepare the server:

1. Create a brand spanking new checklist and navigate to it. Then, initialize Node.js via running the command beneath:

   npm init -y

   This command creates a package deal.json report with the default settings at the root of your app’s folder.

2. Next, arrange all the necessary dependencies for your undertaking via running the following command:

   npm arrange particular dotenv axios

   The command above installs the following:

   • specific — A minimal Node.js framework for building APIs.
   • dotenv — A module that so much .env variables to process.env to imply you’ll be able to securely access them.
   • axios — A promise-based HTTP consumer for Node.js. You employ it to make API calls to Jira.
3. As quickly because the arrange is a good fortune, create a .env report inside the root of your undertaking and add the PORT amount:

   PORT=3000

   That’s the port amount the server listens to. You’ll trade it to a port of your variety.

4. Create an index.js report in your undertaking’s root folder and add the following code to import Explicit, create an instance of an Explicit software, and get began your server:

   const particular = require('particular');
   require('dotenv').config()
   const app = particular();
   const PORT = process.env.PORT;
   
   // Define routes proper right here
   
   app.listen(PORT, () => {
     console.log(`Server is operating on port ${PORT}`);
   });

5. After all, in your package deal.json report, add a script to begin out your server:

   "scripts": {
      "get began": "node index"
     },

   Now, you’ll be capable of run the start script in your terminal:

   npm run get began

   This command starts your server. You’ll have to see the following text logged inside the terminal:

   Server is operating on port 3000

   With the server up and dealing, you’ll be capable of now configure your Jira app.

How To Configure a Jira App

To use the Jira REST API, you wish to have to authenticate a shopper account at the side of your Jira internet web site. The to-do app API you assemble uses elementary authentication with an Atlassian account electronic mail deal with and API token.

Proper right here’s recommendations on the way to set it up:

1. Create a Jira account or log in if you probably have one.
2. Navigate to the safety phase of your Atlassian profile and click on on Create API token.
3. Throughout the dialog that appears, enter a Label for your token (e.g., “jira-todo-list”) and click on on Create.
4. Copy the token on your clipboard.
5. After all, store the API Token in your .env report:

   JIRA_API_TOKEN="your-api-token"

   Now, you’ll be capable of access the Jira API the usage of elementary authentication.

Set Up Routes To Fetch Issues From Jira

Now that you simply’ve were given configured a Jira software. Let’s prepare routes to fetch issues from Jira in your Node.js server.

To start out a request to the Jira API, you’ll have to use the Jira API token you saved inside the .env report. Retrieve the API token the usage of process.env and assign it to a variable named JIRA_API_TOKEN in your index.js report:

const JIRA_API_TOKEN = process.env.JIRA_API_TOKEN

Now, you wish to have to stipulate the endpoint URL for your API request. This URL contains your Jira house and a Jira Question Language (JQL) remark. The Jira house refers to the URL for your Jira crew and turns out like org.atlassian.web, where org is your corporate’s establish. JQL, however, is a query language for interacting with issues in Jira.

Get began via together with the Jira house to the .env report:

JIRA_DOMAIN="your-jira-domain"

You moreover want to store your Jira electronic mail to the .env report because it may well be used for authorization when making a request to Jira:

JIRA_EMAIL="your-jira-email"

Next, add each and every environment variables and bring together the endpoint URL the usage of the realm and the following JQL remark. This query filters issues of “In building” or “To do” statuses for the logged-in shopper and then orders them via reputation:

const jiraDomain = process.env.JIRA_DOMAIN;
const electronic mail= process.env.JIRA_EMAIL;

const jql = "popularityp.c20inp.c20(%22Inp.c20progressp.c22p.c2Cp.c20p.c22Top.c20dop.c22)%20ORp.c20assigneep.c20p.c3Dp.c20currentUser()%20orderp.c20byp.c20status";
 
const apiUrl = `https://${jiraDomain}/recreational/api/3/search?jql=${jql}`;

Previous than creating a trail, moreover import Axios into your index.js report:

const axios = require("axios")

You’ll now create a trail make a GET request to the Jira API and return the issues. In index.js add the following code:

app.get('/issues/all', async (req, res) => {
  })

Now, use the axios.get approach to make a GET request to the Jira REST API. You create the Authorization header via base64-encoding your Jira electronic mail and API token:

const response = look ahead to axios.get(apiUrl, {
        headers: {
        Authorization: `Basic ${Buffer.from(
          `${electronic mail}:${JIRA_API_TOKEN}`
        ).toString("base64")}`,
        Accept: "software/json",
      },
    });

Watch for the response from the Jira API and reserve it in a variable. The response contains a property known as issues, which holds an array of issue goods:

const wisdom = look ahead to response.json();
const { issues } = wisdom;

Next, iterate over the issues array, extract absolute best the comparable information about the to-do items, and return it in JSON response:

let cleanedIssues = [];
issues.forEach((issue) => {
      const issueData = {
        id: issue.id,
        projectName: issue.fields.undertaking.establish,
        reputation: issue.fields.reputation.establish,
        ultimate date: issue.fields.duedate,
      };
      cleanedIssues.push(issueData);
});
res.reputation(200).json({ issues: cleanedIssues });

In case you are creating a request to http://localhost:3000/issues/all, you’ll have to download a JSON object containing the issues:

curl localhost:3000/issues/all

You’ll even take this extra via the usage of a provider like SendGrid and a cron procedure to send day by day emails containing your assigned tasks.

Host Your Node.js Instrument on Kinsta

Previous than website online web hosting your software on Kinsta, enable Pass-Foundation Useful resource Sharing (CORS) to stop an access-control-allow-origin error since you host the backend and the frontend on different domains. To try this:

1. Arrange the cors npm bundle via running this command in your terminal:

   npm arrange cors

2. Then, import the package deal in index.js.

   const cors = require('cors')

3. Next, configure CORS as middleware to permit it for each and every incoming request. Add the following code at the peak of your index.js report:

   app.use(cors());

   You’ll now send HTTP requests on your server from a unique house without encountering CORS errors.

Next, push your code to a most well liked Git provider (Bitbucket, GitHub, or GitLab) and follow the steps beneath to host it:

1. Log in or create an account to view your MyKinsta dashboard.
2. Authorize Kinsta at the side of your Git provider.
3. Click on on Programs on the left sidebar, then click on on Add software.
4. Select the repository and the dept you wish to have to deploy from.
5. Assign a novel establish on your app and choose a wisdom center location.
6. Add the environment variables. There’s no want to add the PORT as an environment variable, as Kinsta handles it automatically. Check out the boxes next to Available during runtime and Available during assemble process:

   

7. Analysis other wisdom (you’ll be capable of go away the default values) and click on on Create software.

Your server is now successfully deployed to Kinsta. On the left-hand menu, click on on Domains and replica the principle house. This is your server’s URL endpoint.

Create a React Instrument to Display the Issues

Next, you use React to build your app’s frontend and CSS to style it. Apply the steps beneath to create a React undertaking with Vite:

1. Scaffold a brand spanking new React undertaking named jira-todo:

   npx create-vite jira-todo --template react

2. Navigate to the undertaking checklist and arrange the necessary dependencies:

   npm arrange

3. Get began the development server:

   npm run dev

Fetch Issues From the Server

1. Clear the contents in App.jsx and add the following code:

function App() {

  return (
    

      
What's on my file at the present time?
      {/* Display issues */}

   
 );
}

export default App;

2. Previous than you get began fetching the issues, store the server URL from Kinsta in a .env report at the root of your app’s folder:

VITE_SERVER_BASE_URL="your-hosted-url"

3. Get the URL in App.jsx via together with the following line at the peak of the report:

const SERVER_BASE_URL=import.meta.env.VITE_SERVER_BASE_URL

4. For your phase, create an async function named fetchData and make a GET request to the /issues/all endpoint on the Explicit server. While you download a response, parse it as JSON and store the data in a state price named wisdom:

import { useCallback, useEffect, useState } from "react";

function App() {
  const SERVER_BASE_URL=import.meta.env.VITE_SERVER_BASE_URL

  const [data, setData] = useState([]);
  const fetchData = useCallback(async () => {
    check out {
      const response = look ahead to fetch(`${SERVER_BASE_URL}/issues/all`);
      if (!response.ok) {
        throw new Error('Group response was once as soon as not ok');
     }
      const wisdom = look ahead to response.json();
      	setData(wisdom.issues);
    } catch (error) {
      console.error('Error fetching wisdom:', error);
  }
     },[SERVER_BASE_URL]);

  useEffect(() => {
    // Fetch wisdom when the phase mounts
    fetchData();
     },[fetchData]);

  return (
    

        
What's on my file at the present time?
      
    
  );
}

export default App;

Understand that you just use the useEffect hook to execute the fetchData function when the phase mounts.

Render the Issues From Jira inside the Browser

1. Now, you’ll be capable of modify the return remark of your phase to iterate over the issues and file them inside the browser:

return (
  

    
What's on my file at the present time?
    

      	{wisdom && wisdom.map(issue => {
      	return 

        

         
{issue.summary}
          {issue.ultimate date}
        
        

          
 className="reputation">{issue.reputation}
        
      
    })}
    
  
);

2. To style this software, add the following CSS code to App.css:

h1 {
    text-align: center;
  font-size: 1.6rem;
  margin-top: 1rem;
}
section {
  display: flex;
  flex-direction: column;
 justify-content: center;
  align-items: center;
  margin-top: 2rem;
 }

 .issues {
  display: flex;
  min-width: 350px;
  justify-content: space-between;
  padding: 1rem;
  background-color: #eee;
  margin-bottom: 1rem;
}

 small {
  color: gray;
}

.status-btn {
  padding: 4px;
  border: 1px cast #000;
  border-radius: 5px;
}

3. Then, import App.css in index.js to make use of the kinds:

import './App.css'

Now, whilst you get began your software, you’ll have to see a list of tasks assigned to you with their reputation and shutting date in your browser:

Deploy Your React Instrument on Kinsta

To stick problems simple, use Kinsta’s Static Web page Web hosting to deploy the application. Kinsta’s Static Internet web page Internet web hosting helps assemble your internet sites proper right into a static internet web site and deploys the static information ensuring swift content material subject material provide and minimal downtime.

Create a repository on GitHub to push your supply code. Once your repo is ready, follow the ones steps to deploy your static internet web site to Kinsta:

1. Log in or create an account to view your MyKinsta dashboard.
2. Authorize Kinsta at the side of your Git provider.
3. Click on on Static Internet sites on the left sidebar, then click on on Add internet web site.
4. Select the repository and the dept you wish to have to deploy from.
5. Assign a novel establish on your internet web site.
6. MyKinsta detects the assemble settings for this React undertaking automatically. You understand the following settings prefilled:
   • Assemble command: npm run assemble
   • Node fashion: 18.16.0
   • Submit checklist: dist

7. Add the URL of your server as an environment variable the usage of VITE_SERVER_BASE_URL.
8. After all, click on on Create internet web site.

And that’s it! You right now have a deployed internet web site inside a few seconds. A link is provided to access the deployed fashion of your internet web site. Will have to you navigate on your internet web site’s house, you notice a list of Jira issues. You’ll later add your customized area and SSL certificates if you wish to have.

As an alternative to Static Internet web page Internet web hosting, you’ll be capable of opt for deploying your static internet web site with Kinsta’s Software Web hosting, which supplies higher website online web hosting flexibility, a wider range of benefits, and access to additional tough choices. For example, scalability, customized deployment the usage of a Dockerfile, and complete analytics encompassing real-time and historical wisdom.

Summary

In this knowledge, you discovered recommendations on the way to create an Explicit app to retrieve assigned Jira issues the usage of the Jira REST API. Additionally, you attached a React frontend software on your Explicit software to turn the ones issues inside the browser.

This app is a rudimentary demonstration of what you’ll be capable of succeed in with Jira REST API. You’ll improve your app with capacity that permits you to mark completed tasks, perform complicated filtering, and much more.

Moreover, with Kinsta, you’ll be capable of host each and every your server and the internet web site in one dashboard the usage of our various services and products. Take a look at Kinsta’s tough, flexible web website online web hosting for your whole programs.

The publish Create a Kinsta-Hosted To-Do Record The use of the Jira API and React seemed first on Kinsta®.

WP Hosting

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more