Course menuForge Kitchen

Level 1 · Lesson 1

Create the app

Create a Forge app from the Jira issue panel template, deploy it, install it on your developer site and see its panel on the Pad thai ticket.

About 20 min5 steps

By the end of this lesson every work item in Jira can show a small panel that says hello. It is the template’s panel, untouched; the rest of Level 1 turns it into the recipe card. First, watch the journey the code takes from your laptop to Jira.

Deploy and install

forge deploy packs your code and manifest.

In the kitchen: The van loads the playbook and licence.

Lives on your laptop · Home kitchen

Your code The playbook

The JavaScript in your app folder: the frontend that draws the UI and the functions that run in the cloud.

How your kitchen works, written down. Not to be confused with recipes, which come from the supplier.

Where the course explains it

Select any box in the diagram to see what it is.

Step 1: Create the app from a template

Lives on your laptop · Home kitchen

Template (forge create) · a standard floor plan

forge create registers a new app with Atlassian and copies a working starter into a new folder. You pick the starter by product and module. The rest of the course changes that folder; you never start from a blank file.

In the kitchen Opening from a standard floor plan: everything is wired, so you can cook on day one.

Atlassian docs: forge create (opens in a new tab)

In your terminal, go to the folder where you keep projects and run:

RunTerminal
forge create

Answer the prompts:

  1. Developer Space: pick yours, or choose to create one and give it a name. The space owns the app.
  2. App name: Mise en place. The CLI makes the folder name from it: Mise-en-place.
  3. Terms: read the Developer Terms and accept them.
  4. Template: choose Jira, then UI Kit, then jira-issue-panel.
You should seeExampleYour Developer Space differs, and prompts may be worded a little differently in newer CLI versions.
$ forge create
? Select or create a Developer Space: Kitchen course
? Enter a name for your app: Mise en place
? Do you accept? Yes
? Select an Atlassian app or platform tool: Jira
? Select a category: UI Kit
? Select a template: jira-issue-panel
✔ Created Mise en place
Change to directory Mise-en-place to see your app files.

Stuck? “Command failed due to validation error” · The CLI says it is out of date, or forge tunnel mentions ngrok

Step 2: Look at what the template made

Open the new folder in your editor:

CodeMise-en-place
Mise-en-place
├── manifest.yml
├── package.json
├── node_modules/
└── src
    ├── index.js
    ├── frontend
    │   └── index.jsx
    └── resolvers
        └── index.js

The template may add a README or an AGENTS.md file too; they are notes, not code. Four files matter, and they are the same four the home page walks through clue by clue in How the files connect: the panel’s UI, the manifest, the entry point and the resolver.

Every command from now on runs inside this folder:

RunTerminal
cd Mise-en-place

Step 3: Deploy the app

It uploads them as a new version, to the development environment.It delivers them to the building, to your kitchen copy for trying things.

Deploy it without changing anything. This uploads the code and the manifest as the first version of the app, in the development environment.

RunTerminal
forge deploy
You should seeExampleYour names, keys and ids will differ.
$ forge deploy
Deploying Mise en place to development...
ℹ Packaging app files
ℹ Uploading app
✔ Deployed
Deployed Mise en place to the development environment.

Stuck? “Command failed due to validation error” · “Unable to get local issuer certificate”

Step 4: Install it on your developer site

forge install adds the app to one site and product, once.You open at one location, once.
RunTerminal
forge install

Choose Jira, type your developer site’s address, such as your-name.atlassian.net, and confirm. On a demo site from forge site provision, forge install --demo-site picks the site for you. You install once per site and product; every later deploy reaches the site by itself.

You should seeExampleYour names, keys and ids will differ.
$ forge install
? Select an Atlassian app or platform tool: Jira
? Enter the site URL: your-name.atlassian.net
? Do you want to continue? Yes
✔ Install complete!

Stuck? `forge install` warns about installing a development app on a production site · `forge site provision` is not available or fails

Step 5: Open the panel on the Pad thai ticket

Runs in the browser · Front of house

Issue panel (jira:issuePanel) · the recipe card

jira:issuePanel is a module that adds your UI to the work item view. The first time, Jira shows only the app’s button below the summary; once someone opens the panel, it stays on that work item. Its title in the manifest is the heading Jira draws above your UI.

In the kitchen A card clipped to every dish ticket, filled in by your kitchen.

  1. Open the Pad thai work item.
  2. Below the summary, find the app’s button and select it once.

The panel opens with two lines. The first is fixed text in src/frontend/index.jsx. The second came from the cloud: the panel called invoke('getText'), the resolver answered 'Hello, world!', and the panel showed it. That round trip is what every lesson after this one builds on.

You should see, on the work itemExampleJira’s layout changes over time.

Mise en place

Hello world!

Hello, world!

Stuck? I can’t see the recipe card on the work item

Type at least two letters.