This tutorial will walk you through creating a sample Forge app for Confluence. There are three parts to the tutorial:
This page: describes creating, changing, and installing a simple hello world app. The focus is on learning the CLI commands needed to work with apps.
Call a Confluence API: describes how to make API calls to the Confluence REST API.
Change the frontend with the UI kit: describes how to use UI kit components.
We recommend you work through all three parts to get a good understanding of how to develop apps with Forge.
Complete Getting started before working through this tutorial.
Forge apps can't be viewed by anonymous users. When testing a Forge app, you should be logged in to your Atlassian cloud developer site.
An Atlassian cloud developer site lets you install and test your app on Confluence and Jira products set up for you. If you don't have one yet, set it up now:
You can install your app to multiple Atlassian sites. However, app data won't be shared between separate Atlassian sites, products, or Forge environments.
The limits on the numbers of users you can create are as follows:
The Atlassian Marketplace doesn't currently support cross-product apps. If your app supports multiple products, you can publish two separate listings on the Marketplace, but your app won't be able to make API calls across different products and instances/installations.
Create an app based on the Confluence macro template.
When you create a new app, Forge will prompt you to set a default environment. In this tutorial we use the environment as our default. Learn more about staging and production environments.
Navigate to the directory where you want to create the app. A new subdirectory with the app’s name will be created there.
Create your app by running:
Enter a name for your app (up to 50 characters). For example, hello-world-app.
Select the UI kit 2 (Preview) category.
Select the Confluence product.
Select the confluence-macro template.
Change to the app subdirectory to see the app files:
The app we'll create will display a macro on a Confluence page, with a function that provides the contents of the macro.
The template uses Node.js and has the following structure:
hello-world-app ├── README.md ├── manifest.yml ├── package-lock.json ├── package.json └── src ├── frontend │ └── index.jsx ├── index.js └── resolvers └── index.js
Let’s have a look at what these files are:
This app displays content within a Confluence page using a . Confluence shows the title of the macro in the quick insert menu when you add the app to a page. Let's change the title to include your name.
Your file should look like the following, with your values for the title and app ID:
modules: macro: - key: hello-world-app-hello-world resource: main render: native resolver: function: resolver title: Forge app for Mia description: Inserts hello world! function: - key: resolver handler: index.handler resources: - key: main path: src/frontend/index.jsx app: id: '<your app id>'
To use your app, it must be installed onto an Atlassian site. The command builds, compiles, and deploys your code; it'll also report any compilation errors. The command then installs the deployed app onto an Atlassian site with the required API access.
You must run the command before because an installation links your deployed app to an Atlassian site.
Navigate to the app's top-level directory and deploy your app by running:
Install your app by running:
Select your Atlassian product using the arrow keys and press the enter key.
Enter the URL for your development site. For example, example.atlassian.net. View a list of your active sites at Atlassian administration.
Once the successful installation message appears, your app is installed and ready to use on the specified site. You can always delete your app from the site by running the command.
Running the command only installs your app onto the selected product. To install onto multiple products, repeat these steps again, selecting another product each time. Note that the Atlassian Marketplace does not support cross-product apps yet.
You must run before running in any of the Forge environments.
With your app installed, it’s time to see the app on a page.
Your hello world app is now installed into your development site. The app should display on the page like the image below.
While your app is deployed to either a development or staging environment, or will appear in your app title. This suffix is removed once you've deployed your app to production.
Once your app is installed, it will automatically pick up all minor app deployments so you don't need to run the command again. Minor deployments are changes that don't modify app permissions in the file. You can deploy the changes onto your developer site or Bitbucket workspace by using one of two methods:
Once your app is installed, changes in the manifest are picked up automatically after running . However, due to the eventually-consistent nature of our system, you may need to wait up to 5 minutes for changes in the manifest to be reflected in the product.
Tunneling runs your app code locally on your machine via the Forge CLI and ngrok. It allows you to speed up development by avoiding the need to redeploy each code change, and by seeing each invocation as it executes. The Forge tunnel works similarly to hot reloading, so any changes you make to your app code can be viewed on your Atlassian site or Bitbucket workspace without losing the current app state. You don’t need to run any other commands; you only need to refresh the page.
To use the command, Docker must be set up and running. To learn about Docker, visit the Docker getting started guides.
If you don't want to run Docker, you can redeploy your app after each code change with the command. You will also need to modify the file to specify a runtime for the app field:
app: id: <your app id> runtime: name: nodejs18.x
You should see output similar to:
Running your app locally with Docker. The tunnel displays your usage from everywhere the app in the development environment is installed. Press Ctrl+C to cancel. Checking Docker image... 100% Your Docker image is up to date. Listening for requests on local port 37363... Reloading code... App code reloaded.
You can now automatically deploy changes to your codebase and install packages, while tunneling. These changes appear on the Atlassian site or Bitbucket workspace where your app is installed.
The command only forwards traffic when the user (in Jira, Confluence, Jira Service Management or Bitbucket) matches the Forge CLI user. For security reasons, you can’t see the traffic of other users.
For important caveats on how works, see Tunneling.
In the next tutorial, you'll learn how to make API calls to Confluence using Forge. This tutorial uses the , so make sure you are familiar with using this command.
Rate this page: