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 project's tasks. If you're involved with an immense project it is possible that Jira's Jira dashboard may become overwhelmed due to the massive amount of projects. In addition, number of team members increases.

To solve the problem, for this problem to be addressed, use to address this problem, utilize Jira's Jira REST API to build a basic To-Do List application that displays the tasks you need to be able to complete, as well as deadlines. It lets you programmedly interact with Jira to build, access the latest updates, remove issues or create them and as well look up information on the people that you've reached out to, as well as information on the application you've created.

The rules

In order for you to be able to comply with the instructions for observing

• Node.js and Node Package Manager (npm) can be installed on your computer for development.
• A Jira account which has a Jira which lets you view the project.

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

These steps will assist you to establish your server.

1. Create a brand new directory, and go to it. After that, you'll be in a position to launch Node.js by following these steps:

NPM init"y"

The command will create the package.json file with default settings, which are stored within the root directory of the directory used by the application.

1. Then, you must add the essential dependencies needed for your project with the below command line:

NPM install express dotenv Axios

The command that follows will install the following

• express is a simple Node.js framework which allows developers build APIs.
• dotenv is a program in software that is loaded through .env variables to process.env to let you securely access them.
• Axios is a promise-based HTTP client designed specifically to work with Node.js. It was designed to allow API requests to Jira.

1. If your installation succeeded, create an.env file. .env The file should be placed in the root your project. You must enter the port number:

PORT=3000

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

1. Create index.js. index.js The file is part of that directory. It is possible to add the below code to load Express in your project. You must start with a program called Express. Launch Express. Open the Express application. Open 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're able to finish the job step and add the package.json File, include a script to start the server.

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

Now you can execute your script using the terminal that you're using.

NPM run begin

This command will start your server. The following message in the terminal.

Server is operating at 3000 port.

If your server is running functioning after the server is up and operational it will be in a position to set up possibilities for Jira. Jira application.

How to configure an Jira App

To use Jira REST API for access, you must sign up. Jira REST API to access, you must register as a user on the Jira site. The API for the application is developing relies on a simple authentication via the Atlassian Account email and API token.

The way to setup it:

1. Sign up for your own Jira log-in or sign-in if you already have an account.
2. Join the Security tab within the security tab of your Atlassian profile. Select the option which will generate an API token..
3. When the dialog opens, users are required to input a first name for the item you wish to record (e.g., "jira-todo-list") and then click the Create button..
4. Copy the token to your clipboard.
5. After you've saved the API token to your .env file:

JIRA_API_TOKEN="your-api-token"

Now, you can utilize Jira API. Jira API with the basic authentication.

Find ways to recover difficulties from Jira

After you've set up your Jira application. Create the routes that cause issues to Jira inside the framework of your Node.js server.

In order to submit an API call using Jira API You must first connect to Jira API to utilize your Jira API token which you saved within your .env file. The API token with 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

The next step is to add your URL to the API endpoint. API request. The URL is made up of the Jira domain, as well as the Jira query Language (JQL) assertion. The Jira domain acts as an URL that represents your Jira organization and is akin to org.atlassian.net, where the term "org" is the brand name for your company. JQL is a different matter. JQL is a query-oriented programming language that allows you to communicate for the purpose of solving problems with Jira.

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

JIRA_DOMAIN="your-jira-domain"

It's also crucial to keep your Jira email within the.env file. .env file as it will be utilized for the authorization required to forward your application Jira:

JIRA_EMAIL="your-jira-email"

Then, you'll need to create two environment variables. Following that, you're able to make the URL for your destination using the domain as well as a JQL query. This query can be used to resolve issues involving "In this procedure" or "To finish" states that the user is in. This query then sort the issues based on the status of every.

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 incorporate Axios within your index.js file.

const axios = require("axios")

Now you can design a new route, and then send an GET request to Jira API. Jira API. Jira API to return questions. Index.js should contain the following code: index.js include the following instructions: index.js add the following code:

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

Use using the axios.get method to create a GET call to Jira's Jira REST API. Create the Authorization. Authorization header, which utilizes the base64 encryption method to secure your Jira email and also serves being an API token

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

Find the response of Jira API. Jira API. Jira API and store it as a variable array. The response will include properties problems and a list issues objects:

cont. data = Expect response.json() Issues with const are data

Then, you'll go through the question list and delete only relevant details about the work to be done Then, you'll return to it using a JSON response. 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

It is possible to take it to the next level through the assistance of companies like SendGrid and the cron task which will deliver daily email as per the jobs that you've set.

Host Your Node.js App to

1. Installation of the cors npm program using the following command on your terminal:

Cors are now added to NPM

1. After you've imported your file, it can be open, and then you'll have the option of adding index.js to the file. index.js .

Const Cors = require('cors')

1. It is then feasible to build CORS that serve as a middleware, and let it respond to any request. The following code should be added at the beginning of the index.js file. index.js file:

app.use(cors());

You can now transmit HTTP requests to the server using an alternative domain. This way, you'll know that you don't experience CORS errors.

1. Register or log in to your account in order access your dashboard. My dashboard.
2. It is necessary to authorize your Git service supplier.
3. Select the appropriate programs from the sidebar on left. Click on on the Add button..
4. Select the repository that you would like to open and select the branch you'd like to make available from.
5. Choose a distinct brand name for your app and pick an appropriate website for data centers.
6. Include your environment variables. There's nothing wrong with making the PORT an environment variable as this process happens automatically. Find the checkboxes close to the running time and available during the build process :

1. Check other information (you can change the defaults) then click to register your account.

The server has been successfully installed . From the menu on the left, choose Domains and take the domain that you want to utilize as your principal. This is the address of your server's endpoint.

Create a React application that demonstrates the challenges

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 the dependencies are required:

Installation NPM

1. Create a server to allow development

npm run dev

Issues in fetching data from the server

1. Take out the content from App.jsx and add the following code:

function application() * which is the program that is set to default to export information

1. Before you can begin obtaining issues, you must set up the URL for the server inside the .env file at the root of your application's directory:

VITE_SERVER_BASE_URL="your-hosted-url"

1. Find the URL in App.jsx by adding this line at the very at the top of the file:

const SERVER_BASE_URL=import.meta.env.VITE_SERVER_BASE_URL

1. Within your component, you'll need to build an async app that's named fetchData after which you'll need to make an HTTP query for an issues/all endpoint of the Express server. If you are able to receive an answer, it's crucial to translate it into JSON and save the data as a value in the state known as "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;

Use your useEffect hook in order to run fetchData. fetchData function is executed when the component begins to increase in dimensions.

Show the problems from Jira on the web browser.

1. You are then in a position to alter the return messages of the program so that it can run through the problems and display those on the internet browser.

return ( Which task is in my list of things to do for today? data && data.map(issue => return issue.summary issue.deadline className="status">issue.status ) );

1. For styling this application the style, just 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. And then, load App.css in index.js to apply the styles:

import './App.css'

When you open your app and then launch your application, you'll be able to seeing the assignments you've received, along with the date when they were done and the state in the web browser.

You can deploy the application to be deployed onto

1. Sign up or sign in to an account in order to gain the access of My Dashboard. My dashboard.
2. You must authorize Git to join with your current services.
3. Select static sites in the left-hand sidebar. After that, click Add Site. Click Add Site..
4. Select the repository that you'd like to deploy from, along with the branch you'd prefer to deploy from.
5. Assign a unique name to your site.
6. My detects the building settings that comprise React Project automatically. React Project automatically. The 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 you've completed the above, you'll have the ability to hit the button to create your site..

Summary

In this instructional tutorial, you'll discover how you can create an Express application that can retrieve well-known Jira issues by utilizing Jira's Jira REST API. In addition, you added the React frontend for your Express application, to display the problems on the browser.

The app provides a basic illustration of what you can accomplish using Jira's REST API. The application can be improved with features that permit you to keep notes of the tasks you have completed as well as perform advanced filtering, and more.

Jeremy Holcombe

Editorial Editor as well as Editor of Content WordPress Web Developer and Content Writer. Apart from everything connected to WordPress I love the beach golf, beaches and beaches and watching films. Also, I have height problems ;).

•       Website
•       LinkedIn

The post first appeared on here

Article was posted on this site

This post was posted on here