Jira is a widely-used tool for managing projects that enables you to monitor project tasks. However, in a larger project, an excess of tasks and team members could lead to a cluttered Jira dashboard.
This guide will take you through the process of creating a to-do list application, using Node.js as the server to fetch issues from your Jira account and a React application to display these issues. The steps to host both the frontend and the server to Kinsta will also be outlined.
Express is a sought-after Node.js framework that eases the building of server-side applications. It makes route handling seamless and interacts with external resources like APIs, databases, and frontend applications.
Here’s how to set up the server:
Initiate a new directory, navigate to it, and initialize Node.js by executing the command below:
npm init -yThis command generates a package.json file at the root of your app’s folder with the default settings.
After creating the directory, proceed to install all the vital dependencies for your project by executing the command underneath:
npm install express dotenv axiosThe above command will install the items below:
express dotenv .env variables to process.env permitting you secure access to them.axios
Upon successful installation, generate a .env file at the root of your project and input the PORT number:
PORT=3000This port number is what your server listens to. Feel free to modify it to a port number of your preference.
Generate an index.js file in your project’s root folder and add the following code to import Express, initiate an Express application, and kick start your server:
const express = require('express');
require('dotenv').config()
const app = express();
const PORT = process.env.PORT;
// Define routes here
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
Eventually, in your package.json file, append a script to start your server:
"scripts": {
"start": "node index"
},You can now proceed to start the script in your terminal:
npm run startThis command commences your server. The following message should be logged in your terminal:
Server is running on port 3000With your server running, you can proceed to configure your Jira app.
To employ the Jira REST API, you need to authenticate a user account with your Jira website. For authentication, you need a basic Atlassian account email address and an API token, which the to-do app API will use.
Below are steps to execute:
Sign up for a Jira account or log in if you already have one.
Head to the security page of your Atlassian profile and click Create API token .
In the dialog box that follows, input a Label for your token, for example, “jira-todo-list,” then click Create .
Copy the token to your clipboard.
Eventually, store the API Token in your .env file:
JIRA_API_TOKEN="your-api-token"You should now have access to the Jira API using basic authentication.
With your Jira application already set up, let’s create routes to retrieve issues from Jira in your Node.js server.
To begin a request to the Jira API, you must engage the Jira API token which you stored in the .env file. Recover the API token using process.env and assign it to a JIRA_API_TOKEN variable in your index.js file:
const JIRA_API_TOKEN = process.env.JIRA_API_TOKENThen, define the endpoint URL for your API demand. This URL includes your Jira domain and a Jira Query Language (JQL) statement. A Jira domain is your Jira organization’s URL, something like org.atlassian.net, where org is the name of your organization. On the other hand, JQL is a query language used for interaction with issues in Jira.
Begin by adding the Jira domain to the .env file:
JIRA_DOMAIN="your-jira-domain"Also, include your Jira email in the .env file as it will be deployed for authorization when making a request to Jira:
JIRA_EMAIL="your-jira-email"Subsequently, append both environment variables and build the endpoint URL with the domain and the following JQL statement. This query filters issues with “In progress” or “To do” statuses for the logged-in user and then orders them by status:
const jiraDomain = process.env.JIRA_DOMAIN;
const email= process.env.JIRA_EMAIL;
const jql = "status%20in%20(%22In%20progress%22%2C%20%22To%20do%22)%20OR%20assignee%20%3D%20currentUser()%20order%20by%20status";
const apiUrl = `Before route creation, import Axios into your index.js file:
const axios = require("axios")You can now create a route, make a GET request to the Jira API, and return the issues. To index.js add the cast as follows:
app.get('/issues/all', async (req, res) => {
})Now, adopt the axios.get method to make a GET request to the Jira REST API. An Authorization header is created by base64-encoding your Jira email and API token:
const response = await axios.get(apiUrl, {
headers: {
Authorization: `Basic ${Buffer.from(
`${email}:${JIRA_API_TOKEN}`
).toString("base64")}`,
Accept: "application/json",
},
});Anticipate the response from the Jira API and store it in a variable. The response comprises a property titled issues, which holds an array of issue objects:
const data = await response.json();
const { issues } = data;Subsequently, sift through the issues array, extract only the significant 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.project.name,
status: issue.fields.status.name,
deadline: issue.fields.duedate,
};
cleanedIssues.push(issueData);
});
res.status(200).json({ issues: cleanedIssues });If you make a request to http://localhost:3000/issues/all, you should be given a JSON object holding the issues:
curl localhost:3000/issues/allA further improvement can be made by leveraging a provider like SendGrid together with a cron job to dispatch daily emails
