Deze tutorial helpt je bij het ontwikkelen van een takenlijst applicatie met Node.js<\/a> als server om issues op te halen uit je Jira account en een React applicatie om ze weer te geven. Je leert ook hoe je zowel de frontend als de server naar Kinsta kunt hosten. Om mee te kunnen doen, heb je nodig:<\/p>\n Express<\/a> is een populair Node.js framework dat een gestroomlijnde omgeving biedt voor het bouwen van server-side applicaties. Express vereenvoudigt de afhandeling van routes en vergemakkelijkt interacties met externe bronnen, zoals API’s, databases en frontend applicaties.<\/p>\n Volg de onderstaande stappen om de server in te stellen:<\/p>\n Dit commando maakt een package.json<\/strong> bestand aan met de standaardinstellingen in de root van de map van je app.<\/li>\n Het bovenstaande commando installeert het volgende:<\/p>\n Dit is het poortnummer waar de server naar luistert. Je kunt het wijzigen in een poort naar keuze.<\/li>\n Nu kun je het startscript in je terminal uitvoeren:<\/p>\n Dit commando start je server. Je zou de volgende tekst gelogd in de terminal moeten zien:<\/p>\n Nu de server draait, kun je je Jira app configureren.<\/li>\n<\/ol>\n Om de Jira REST API te gebruiken, moet je een gebruikersaccount authenticeren met je Jira site. De to-do app API die je bouwt gebruikt basisverificatie met een Atlassian account e-mailadres en API token.<\/p>\n Zo stel je dat in:<\/p>\n Nu heb je toegang tot de Jira API met basisauthenticatie.<\/li>\n<\/ol>\n Nu je een Jira applicatie hebt geconfigureerd. Laten we routes instellen om issues op te halen uit Jira in je Node.js server.<\/p>\n Om een verzoek naar de Jira API te starten, moet je het Jira API token gebruiken dat je in het .env<\/strong> bestand hebt opgeslagen. Haal het API token op met Nu moet je de URL van het endpoint defini\u00ebren voor je API verzoek. Deze URL bevat je Jira domein en een Jira Query Language<\/a> (JQL) statement. Het Jira domein verwijst naar de URL van je Jira organisatie en ziet eruit als Begin met het toevoegen van het Jira domein aan het .env<\/strong> bestand:<\/p>\n Je moet ook je Jira e-mail opslaan in het .env<\/strong> bestand, omdat dit wordt gebruikt voor autorisatie wanneer je een verzoek indient bij Jira:<\/p>\n Voeg vervolgens beide omgevingsvariabelen toe en construeer de URL van het endpoint met behulp van het domein en het volgende JQL statement. Deze query filtert issues met de status “In progress” of “Te do” voor de ingelogde gebruiker en ordent ze vervolgens op status:<\/p>\n Voordat je een route aanmaakt, moet je ook Axios importeren in je index.js bestand:<\/p>\n Je kunt nu een route maken die een GET verzoek naar de Jira API doet en de issues retourneert. Voeg in index.js<\/strong> de volgende code toe:<\/p>\n Gebruik nu de methode Wacht op de respons van de Jira API en sla het op in een variabele. De respons bevat een propery genaamd Vervolgens itereer je over de Als je een verzoek doet aan Je kunt zelfs nog een stap verder gaan door een provider als SendGrid en een cron job te gebruiken om dagelijks e-mails te versturen met de aan jou toegewezen taken.<\/p>\n Voordat je je applicatie op Kinsta host, moet je Cross-Origin Resource Sharing (CORS)<\/a> inschakelen om een Je kunt nu HTTP verzoeken naar je server sturen vanaf een ander domein zonder CORS fouten tegen te komen.<\/li>\n<\/ol>\n Vervolgens push je je code naar een Git provider van je voorkeur (Bitbucket<\/a>, GitHub<\/a> of GitLab<\/a>) en volg je onderstaande stappen om het te hosten:<\/p>\n Je server is nu succesvol gedeployd op Kinsta. Klik in het linkermenu op Domeinen<\/strong> en kopieer het primaire domein. Dit is het URL endpoint van je server.<\/p>\n Vervolgens gebruik je React om de frontend van je app te bouwen en CSS om deze te stylen. Volg de onderstaande stappen om een React project te maken met Vite<\/a>:<\/p>\n Merk op dat je de Als je nu je applicatie start, zou je een lijst met aan jou toegewezen taken met hun status en deadline in je browser moeten zien:<\/p>\n Om het eenvoudig te houden, gebruik je Kinsta’s Statische Site Hosting<\/a> om de applicatie te deployen. Kinsta’s Statische Site Hosting helpt bij het bouwen van je sites tot een statische site en deployt de statische bestanden om een snelle levering van content en minimale downtime te garanderen.<\/p>\n Maak een repository aan op GitHub om je sourcecode te pushen<\/a>. Zodra je repo klaar is, volg je deze stappen om je statische site te deployen naar Kinsta:<\/p>\n En dat is het! Je hebt nu binnen een paar seconden een gedeployde site. Er wordt een link gegeven om toegang te krijgen tot de gedeployde versie van je site. Als je naar het domein van je site navigeert, zie je een lijst met Jira issues. Je kunt later je eigen domein<\/a> en SSL certificaat<\/a> toevoegen als je dat wilt.<\/p>\n Als alternatief voor Static Site Hosting kun je ervoor kiezen om je statische site te deployen met Kinsta’s Applicatie Hosting<\/a>, dat een grotere hostingflexibiliteit, een breder scala aan voordelen en toegang tot robuustere functies biedt. Bijvoorbeeld schaalbaarheid, custom deployments met behulp van een Dockerfile en uitgebreide analyses<\/a> met real-time en historische gegevens.<\/p>\n In deze handleiding heb je geleerd hoe je een Express app maakt om toegewezen Jira issues op te halen met behulp van de Jira REST API. Daarnaast heb je een React frontend applicatie aan je Express applicatie gekoppeld om deze issues in de browser weer te geven.<\/p>\n Deze app is een simpele demonstratie van wat je kunt bereiken met Jira REST API. Je kunt je app uitbreiden met functionaliteit waarmee je voltooide taken kunt markeren, geavanceerde filtering kunt uitvoeren en nog veel meer.<\/p>\n
\nVereisten<\/h2>\n
\n
De backend bouwen met Node.js en Express<\/h2>\n
\n
npm init -y<\/code><\/pre>\nnpm install express dotenv axios<\/code><\/pre>\n\n
express<\/a><\/code> – Een minimaal Node.js framework voor het bouwen van API’s.<\/li>\ndotenv<\/a><\/code> – Een module die .env<\/code> variabelen naar process.env<\/code> laadt zodat je ze veilig kunt gebruiken.<\/li>\naxios<\/a><\/code> – Een op promises gebaseerde HTTP client voor Node.js. Je gebruikt het om API calls naar Jira te doen.<\/li>\n<\/ul>\n<\/li>\nPORT<\/code> nummer toe:\nPORT=3000<\/code><\/pre>\nconst express = require('express');\nrequire('dotenv').config()\nconst app = express();\nconst PORT = process.env.PORT;\n\n\/\/ Define routes here\n\napp.listen(PORT, () => {\n console.log(`Server is running on port ${PORT}`);\n});<\/code><\/pre>\n<\/li>\n\"scripts\": {\n \"start\": \"node index\"\n },<\/code><\/pre>\nnpm run start<\/code><\/pre>\nServer is running on port 3000<\/code><\/pre>\nEen Jira app configureren<\/h3>\n
\n
JIRA_API_TOKEN=\"your-api-token\"<\/code><\/pre>\nRoutes instellen om issues op te halen uit Jira<\/h3>\n
process.env<\/code> en wijs het toe aan een variabele met de naam JIRA_API_TOKEN<\/code> in je index.js<\/strong> bestand:<\/p>\nconst JIRA_API_TOKEN = process.env.JIRA_API_TOKEN<\/code><\/pre>\norg.atlassian.net<\/code>, waarbij org<\/code> de naam van je organisatie is. JQL daarentegen is een querytaal voor interactie met issues in Jira.<\/p>\nJIRA_DOMAIN=\"your-jira-domain\"<\/code><\/pre>\nJIRA_EMAIL=\"your-jira-email\"<\/code><\/pre>\nconst jiraDomain = process.env.JIRA_DOMAIN;\nconst email= process.env.JIRA_EMAIL;\n\nconst jql = \"status%20in%20(%22In%20progress%22%2C%20%22To%20do%22)%20OR%20assignee%20%3D%20currentUser()%20order%20by%20status\";\n \nconst apiUrl = `https:\/\/${jiraDomain}\/rest\/api\/3\/search?jql=${jql}`;<\/code><\/pre>\nconst axios = require(\"axios\")<\/code><\/pre>\napp.get('\/issues\/all', async (req, res) => {\n })<\/code><\/pre>\naxios.get<\/code> om een GET verzoek te doen naar de Jira REST API. Je maakt de Authorization<\/code> header door je Jira e-mail en API token te base64 encoderen:<\/p>\nconst response = await axios.get(apiUrl, {\n headers: {\n Authorization: `Basic ${Buffer.from(\n `${email}:${JIRA_API_TOKEN}`\n ).toString(\"base64\")}`,\n Accept: \"application\/json\",\n },\n });<\/code><\/pre>\nissues<\/code>, die een array van issue-objecten bevat:<\/p>\nconst data = await response.json();\nconst { issues } = data;<\/code><\/pre>\nissues<\/code> array, extraheer je alleen de relevante informatie over de to-do items en retourneer je deze in een JSON respons:<\/p>\nlet cleanedIssues = [];\nissues.forEach((issue) => {\n const issueData = {\n id: issue.id,\n projectName: issue.fields.project.name,\n status: issue.fields.status.name,\n deadline: issue.fields.duedate,\n };\n cleanedIssues.push(issueData);\n});\nres.status(200).json({ issues: cleanedIssues });<\/code><\/pre>\nhttp:\/\/localhost:3000\/issues\/all<\/code>, zou je een JSON object moeten ontvangen dat de issues bevat:<\/p>\ncurl localhost:3000\/issues\/all<\/code><\/pre>\nJe Node.js applicatie hosten op Kinsta<\/h3>\n
access-control-allow-origin<\/code> fout te voorkomen omdat je de backend en de frontend op verschillende domeinen host. Om dit te doen:<\/p>\n\n
npm install cors<\/code><\/pre>\n<\/li>\nconst cors = require('cors')<\/code><\/pre>\n<\/li>\napp.use(cors());<\/code><\/pre>\n\n
![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/11\/kinsta-environment-variables.png\")
Een React applicatie maken om de issues weer te geven<\/h2>\n
\n
jira-todo<\/code>:\nnpx create-vite jira-todo --template react<\/code><\/pre>\n<\/li>\nnpm install<\/code><\/pre>\n<\/li>\nnpm run dev<\/code><\/pre>\n<\/li>\n<\/ol>\nIssues ophalen van de server<\/h3>\n
\n
function App() {\n\n return (\n <div className=\"App\">\n <h1>What's on my list today?<\/h1>\n {\/* Display issues *\/}\n\n <\/div>\n );\n}\n\nexport default App;<\/code><\/pre>\n\n
VITE_SERVER_BASE_URL=\"your-hosted-url\"<\/code><\/pre>\n\n
const SERVER_BASE_URL=import.meta.env.VITE_SERVER_BASE_URL<\/code><\/pre>\n\n
fetchData<\/code> en doe een GET verzoek naar het \/issues\/all<\/code> endpoint op de Express server. Zodra je een antwoord hebt ontvangen, parse je het als JSON en sla je de gegevens op in een statuswaarde met de naam data<\/code>:<\/li>\n<\/ol>\nimport { useCallback, useEffect, useState } from \"react\";\n\nfunction App() {\n const SERVER_BASE_URL=import.meta.env.VITE_SERVER_BASE_URL\n\n const [data, setData] = useState([]);\n const fetchData = useCallback(async () => {\n try {\n const response = await fetch(`${SERVER_BASE_URL}\/issues\/all`);\n if (!response.ok) {\n throw new Error('Network response was not ok');\n }\n const data = await response.json();\n \tsetData(data.issues);\n } catch (error) {\n console.error('Error fetching data:', error);\n }\n },[SERVER_BASE_URL]);\n\n useEffect(() => {\n \/\/ Fetch data when the component mounts\n fetchData();\n },[fetchData]);\n\n return (\n <div className=\"App\">\n <h1>What's on my list today?<\/h1>\n \n <\/div>\n );\n}\n\nexport default App;<\/code><\/pre>\nuseEffect<\/code> hook gebruikt om de fetchData<\/code> functie uit te voeren wanneer het component mount.<\/p>\nDe issues vanuit Jira weergeven in de browser<\/h3>\n
\n
return (\n <div>\n <h1>What's on my list today?<\/h1>\n <section>\n \t{data && data.map(issue => {\n \treturn <div className=\"issues\" key={issue.id}>\n <div>\n <div>{issue.summary}<\/div>\n <small>{issue.deadline}<\/small>\n <\/div>\n <div>\n <div> className=\"status\">{issue.status}<\/div>\n <\/div>\n <\/div>\n })}\n <\/section>\n <\/div>\n);<\/code><\/pre>\n\n
h1 {\n text-align: center;\n font-size: 1.6rem;\n margin-top: 1rem;\n}\nsection {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin-top: 2rem;\n }\n\n .issues {\n display: flex;\n min-width: 350px;\n justify-content: space-between;\n padding: 1rem;\n background-color: #eee;\n margin-bottom: 1rem;\n}\n\n small {\n color: gray;\n}\n\n.status-btn {\n padding: 4px;\n border: 1px solid #000;\n border-radius: 5px;\n}<\/code><\/pre>\n\n
import '.\/App.css'<\/code><\/pre>\n![\"Lijst](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/11\/jira-react-application.png\")
Je React applicatie deployen op Kinsta<\/h2>\n
\n
\n
npm run build<\/code><\/li>\n18.16.0<\/code><\/li>\ndist<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n
VITE_SERVER_BASE_URL<\/code>.<\/li>\nSamenvatting<\/h2>\n