Cook from home · Level 1 · Forge Kitchen

Behind, or starting here? Download the code as it should be before this lesson.

Deploying after every small change is slow. This lesson sets up the faster loop you use for the rest of the course: the site keeps calling your app, but your laptop runs the code, so a save and a reload are enough. Changes to the manifest are the exception, and the first step shows why.

Step 1: Name the card

The heading Jira draws above the panel is the module’s title in the manifest. Change it:

Editmanifest.yml

The title Jira shows above the panel.

5	5		`resolver:`
6	6		`function: resolver`
7	7		`render: native`
8		−	Removed: `title: Mise en place`
	8	+	Added: `title: Recipe card`
9	9		`icon: https://developer.atlassian.com/platform/forge/images/icons/issue-panel-icon.svg`
10	10		`function:`
11	11		`- key: resolver`

Why: Module · Deploy

The manifest is read when you deploy, not while the code runs. Any change to it needs a deploy:

RunTerminal

forge deploy

Reload the Pad thai ticket. The panel is now called Recipe card.

Stuck? I changed manifest.yml

Done: after a deploy and a reload, the panel’s heading reads Recipe card

Step 2: Start cooking from home

Lives on your laptop · Home kitchen

forge tunnel · cook from home

forge tunnel connects the deployed app to your laptop. While it runs, Forge sends the app’s function calls to your machine and runs your local code, and UI changes are served from your folder too. Save a file, reload Jira, and you see the change. It works only for code: the manifest still comes from the last deploy.

In the kitchen The location keeps taking requests, but you cook them in your home kitchen and send them over.

Atlassian docs: Tunneling (opens in a new tab)

With forge tunnel running, Forge forwards the call to your laptop and runs your local code.With the tunnel open, the request goes to your home kitchen and you cook it there.

Open a second terminal in the app folder and start the tunnel. Leave it running; you work in the first terminal and your editor.

RunTerminal

forge tunnel

Each time you save, the tunnel prints Reloading code... and the next reload in Jira uses your new code.

Stuck? The CLI says it is out of date, or forge tunnel mentions ngrok · The tunnel is running while I deploy or upgrade

Done: forge tunnel is running in its own terminal and waiting

Step 3: Lay out a sample card

Runs in the browser · Front of house

UI Kit · standard furniture

UI Kit is a set of React components from @forge/react, such as Heading, Stack, Inline, Lozenge and List. Forge draws them with Jira’s own design system, so the card looks like part of Jira and follows its light and dark themes. You arrange the components; you never write CSS.

In the kitchen Furniture from the building’s own catalogue: it always fits and always matches.

Atlassian docs: UI Kit overview (opens in a new tab)

Replace the template’s two lines with the shape of the finished card: a heading, a tag for the servings, and a line where the recipe goes. For now it is sample text, and the panel no longer asks the resolver for anything. Lesson 4 brings that back.

Editsrc/frontend/index.jsx

Import the UI Kit components the card uses.
Replace the template text with a sample card.

1		−	Removed: `import React, { useEffect, useState } from 'react';`
2		−	Removed: `import ForgeReconciler, { Text } from '@forge/react';`
3		−	Removed: `import { invoke } from '@forge/bridge';`
	1	+	Added: `import React from 'react';`
	2	+	Added: `import ForgeReconciler, { Heading, Inline, Lozenge, Stack, Text } from '@forge/react';`
4	3
5	4		`const App = () => {`
6		−	Removed: `const [data, setData] = useState(null);`
7		−	Removed: `useEffect(() => {`
8		−	Removed: `invoke('getText', { example: 'my-invoke-variable' }).then(setData);`
9		−	Removed: `}, []);`
10	5		`return (`
11		−	Removed: `<>`
12		−	Removed: `<Text>Hello world!</Text>`
13		−	Removed: `<Text>{data ? data : 'Loading...'}</Text>`
14		−	Removed: `</>`
	6	+	Added: `<Stack space="space.200">`
	7	+	Added: `<Inline space="space.100" alignBlock="center">`
	8	+	Added: `<Heading size="medium">Pad thai</Heading>`
	9	+	Added: `<Lozenge>2 servings</Lozenge>`
	10	+	Added: `</Inline>`
	11	+	Added: `<Text>The supplier’s recipe goes here.</Text>`
	12	+	Added: `</Stack>`
15	13		`);`
16	14		`};`
17	15

Why: UI Kit

Save the file and reload the Pad thai ticket. Stack puts things under each other with a gap; Inline puts the heading and the tag side by side.

You should see, on the work itemExampleAn example: Jira draws the real components.

Recipe card

Pad thai 2 servings

The supplier’s recipe goes here.

Stuck? I changed code in src/

Done: after a save and a reload, the card shows a Pad thai heading with a 2 servings tag

Step 4: Stop the tunnel and deploy

The tunnel only works while your laptop is on. Stop it with Ctrl + C in its terminal, then deploy, so the site serves the new layout by itself:

RunTerminal

forge deploy

Make this a habit: stop the tunnel before every deploy, and start it again afterwards if you want it.

Stuck? The tunnel is running while I deploy or upgrade

Done: the tunnel is stopped and forge deploy finished

Compare with yours: download the code after this lesson.