Create a -Hosted To-Do List Using Jira API & React

-sidebar-toc>

Jira is a well-known software for managing projects that allows you to manage the tasks within a project. If you're working on a big project the Jira dashboard may become overloaded due to the sheer volume of work and team members increase.

To address the issue, to address this issue, use to address the issue, utilize Jira's Jira REST API to build a simple To-Do List application that displays the tasks you have to complete as well as the due dates. This API allows you to programmatically interact with Jira to build, access updates, delete problems, or even create them and also view details about users and details about your project.

The prerequisites

In order to follow the instructions for following along

• Node.js and Node Package Manager (npm) installed on your system for development.
• An account with a Jira that allows you to see the projects.

What is the best way to create the backend Utilizing Node.js and Express

These steps will help you set up your server

1. Create a new directory and go to it. Then, you are able to start Node.js using the instructions below:

NPM init"y"

This command will create a package.json file with default settings that are located in the root folder in the application's directory.

1. You must then install the required dependencies needed to your project via the following command line:

NPM install express dotenv Axios

The command that follows installs following:

• express is a simple Node.js framework that allows you to create APIs.
• dotenv is a program that is loaded by .env variables to process.env to let you securely access them.
• Axios is a promise-based HTTP client designed for Node.js. It is built to permit API calls to Jira.

1. When the installation has been successful, create an.env file. .env The file is required to be in the root your project. Input the PORT number:

PORT=3000

The port number is what that the server is listening to. You can alter it to any port you want.

1. Make index.js. index.js The file is within the root directory and add the following code to load Express to your project. Start an instance of Express. Launch the Express application. Launch 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`); );

1. If you are able to finish the job step, include the package.json File, add a script for starting the server.

"scripts": "start": "node index" ,

Now you can execute the script from the terminal you are using.

NPM run begin

This command starts your server. It should show the below text in your terminal:

Server is running at port 3000

When the server is online and running Once the server is up and running, you are able to configure options to the Jira application.

How to configure an Jira App

To access the Jira REST API, you will need to create an account user through your Jira website. The to-do app API your app develops uses a basic authentication via the Atlassian account email address and API token.

This is the way to set it up:

1. Make a Jira account or log in if there is already one.
2. Log into your Security tab in your Atlassian profile, and then select the button to create API token..
3. In the dialogue that opens you'll be required to input a name to define the item you want to mark (e.g., "jira-todo-list") after which you can hit Create.
4. Copy the token to your clipboard.
5. After that, save the API token into your .env file:

JIRA_API_TOKEN="your-api-token"

Now, you can utilize Jira API. Jira API using basic authentication.

Design routes to fetch issues from Jira

Once you've set up a Jira application. Set up the routes that fetch issues from Jira within your Node.js server.

For you to make an API request using Jira API, you must first access Jira API, you must use the Jira API token you saved in your .env file. Find the API token by using process.env and assign it to the variable JIRA_API_TOKEN within the index.js file. index.js file:

const JIRA_API_TOKEN = process.env.JIRA_API_TOKEN

Now, you need to enter the URL of your endpoint to your API request. The URL is made up of your Jira domain, and the Jira query Language (JQL) statement. The Jira domain serves as a URL for your Jira organisation and appears like org.atlassian.net, where the word "org" is the name of your company. JQL On its other hand, is a query-oriented language used for communicating with the problems of Jira.

The initial step is to include your Jira domain in the.env file: .env file:

JIRA_DOMAIN="your-jira-domain"

It's also essential to save your Jira email in your .env file as it is going to be used in the authorization needed to submit an application to Jira:

JIRA_EMAIL="your-jira-email"

Then, you must create two environment variables. After that, you can create the URL for your endpoint making use of the domain as well as the next JQL query. This query filters issues with "In the process" or "To finish" states of the user. Then, it sorts them according to order of 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 = `https://$jiraDomain/rest/api/3/search?jql=$jql`;

Before creating a route, it is necessary to add Axios to the index.js file:

const axios = require("axios")

Now you can build a new route, and then send a GET request to Jira API. Jira API to return questions. Within index.js add the following code: index.js add the following code:

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

Use the axios.get method to make a GET request to Jira's Jira REST API. Make an Authorization header. authorization header that uses the base64 encryption for your Jira email as well as API token

const response = await axios.get(apiUrl, headers: Authorization: `Basic $Buffer.from( `$email:$JIRA_API_TOKEN` ).toString("base64")`, Accept: "application/json", , );

Wait for the response from Jira API. Jira API and store it in an array of variable. The response will contain the property issues and an array of issues objects:

const data = expect response.json() Const issues = data;

Then, you'll go through the questions list, removing just the relevant information about the items to be completed to be completed, and then return it as a 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 receive a JSON object containing the issues:

curl localhost:3000/issues/all

This can be taken to the next level by utilizing a service like SendGrid as well as a cron task to send out daily emails according to the tasks you have assigned.

Host Your Node.js Application for

1. Install the cors npm program by running the following command on your terminal:

installing cors in npm

1. After you've imported the package, it can be opened, and you can add index.js from the file. index.js .

Const Cors = require('cors')

1. You can then set CORS up as a middleware, enabling it to handle any request. The following code should be added at the beginning of the index.js file index.js file:

app.use(cors());

Now you can send HTTP request to the server through an alternative domain and be assured that you will not experience CORS errors.

1. Create or log in to your account to access the dashboard of your My dashboard.
2. You must authorize your Git service supplier.
3. Click on the appropriate applications from the left sidebar. Then click Add an application.
4. Choose the repository you want to use and the branch you would like to make available from.
5. Create a unique branding name for your app and pick a suitable Data center location.
6. Include your environment variables. There is no need to make the PORT an environment variable as it the process is carried out in a way that's automatic. Check the boxes next to available during running time and Available during build process :

1. Review other information (you may change the defaults) and then click to make an application.

The server has been successfully deployed to . In the menu on the left side, select Domains and then copy the domain you wish to use as your primary. This will be your server's URL endpoint.

Develop a React application that shows the difficulties

1. A fresh React project called jira-todo :

npx create-vite jira-todo --template react

1. Browse to the directory of your project and install all the dependencies you require:

Install NPM

1. Start the development server

npm run dev

Probleme with fetching issues from the server

1. Remove the contents of App.jsx and add this code:

function application() *; the default app to export data;

1. Before you begin to fetch issues, it is necessary to create the URL of your server within a .env file at the root of your app's directory:

VITE_SERVER_BASE_URL="your-hosted-url"

1. Get the URL from App.jsx by adding this line at the top of the file:

const SERVER_BASE_URL=import.meta.env.VITE_SERVER_BASE_URL

1. In your component, create an async program that's called fetchData and then make a GET query to the issues/all endpoint of the Express server. If you are able to get an answer it is necessary to interpret it into JSON and save the data as a state value called "data.":

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 () => try const response = await fetch(`$SERVER_BASE_URL/issues/all`); if (!response.ok) throw new Error('Network response was not ok'); const data = await response.json(); setData(data.issues); catch (error) console.error('Error fetching data:', error); ,[SERVER_BASE_URL]); useEffect(() => // Fetch data when the component mounts fetchData(); ,[fetchData]); return ( What's on my list today? ); export default App;

Be aware that you must utilize the useEffect hook to execute the fetchData function whenever the component is beginning to grow.

Display the issues from Jira in the browser.

1. You are then in a position to alter the return statements of the component so it will run through problems and display these on the web browser.

return ( What's on my list for today? data && data.map(issue => return issue.summary issue.deadline className="status">issue.status ) );

1. For styling this app in the way you like to your liking, simply add the below CSS code into 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 solid #000; border-radius: 5px; 

1. After that, you import App.css in index.js to apply the styles:

import './App.css'

When you open your application, you'll be able to see the list of assignments you have been assigned including their date of completion and status in your web browser.

You can deploy the application for deployment on

1. Log in or create an account in order to gain access to My dashboard. My dashboard.
2. Authorize Git to connect with the services that you're using.
3. Select static sites from the left sidebar, and then click Add Site. Add site.
4. Choose the repository you want to deploy from, as well as the branch that you would like to deploy from.
5. Assign a unique name to your site.
6. My detects the build settings that are part of React Project automatically. React Project automatically. The following settings are already filled in:

• Builder command NPM run build
• Node version: 18.16.0
• Publish directory: dist

1. Add the URL of your server as an environment variable using VITE_SERVER_BASE_URL.
2. After that, you are able to click to start creating your website..

Summary

In this instructional tutorial, you'll discover how you can build an Express app that retrieves identified Jira problems using Jira's Jira REST API. In addition, you linked a React frontend to your Express application in order to show those issues within the browser.

The app provides a basic example of the things you could do with the Jira REST API. The app can be enhanced the app with functionality that lets you make notes of tasks that have been completed, carry out sophisticated filtering and more.

Jeremy Holcombe

Content and Marketing Editor at , WordPress Web Developer, and Content Writer. Outside of everything connected to WordPress I enjoy golf, beaches, as well as watching films. Also, I have height difficulties ;).

•       Website
•       LinkedIn

This post was first seen on here