Part 1: Build a Confluence hello world app

This tutorial walks through creating a Forge app to display content on a Confluence page.

Before you begin

Complete Getting started before working through this page.

Note, Forge apps can't be viewed by anonymous users. To use a Forge app, you must be logged in to Confluence.

Create your app

Create an app based on the Confluence macro template.

Note, Forge provides multiple environments where you deploy the app. This tutorial uses the CLI default, the development environment. Learn more about staging and production environments.

1. Navigate to the directory where you want to create the app. A new subdirectory with the app’s name will be created there.

2. Create your app by running:

   1

   forge create

   1. Enter a name for your app (up to 50 characters). For example, hello-world-app.
   2. Select the UI kit category.
   3. Select the confluence-macro template.

3. Change to the app subdirectory to see the app files:

   1

   cd hello-world-app

confluence-macro template

The confluence-macro template uses Node.js and has the following structure:

1
2
3
4
5
6
7

hello-world-app
|-- src
|   `-- index.jsx
|-- manifest.yml
|-- package.json
|-- package-lock.json
`-- README.md

Let’s have a look at what these files are:

• index.jsx: Where you write the behavior of the app.
• manifest.yml: Describes your app. The manifest.yml file contains the name and ID of the app, the app permissions, and the modules the app uses. This app displays a macro on a Confluence page and has a function that provides the contents of the macro.
• package.json: The app’s Node.js metadata. See the Node documentation for more information.
• package-lock.json: Records the version of the app’s dependencies.
• README.md: Information about the app. We recommend updating this as you change the behavior of the app.

Change the macro title

This app displays content within a Confluence page using a macro. 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.

1. In the app’s top-level directory, open the manifest.yml file.
2. Find the title entry under the macro module.
3. Change the value of title to Forge app for <your name>. For example, Forge app for Mia.

Your manifest.yml file should look like the following, with your values for the title and app ID:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

permissions:
  scopes:
   - 'read:confluence-content.summary'
modules:
  macro:
    - key: hello-world-app-hello-world
      function: main
      title: Forge app for Mia
      description: Inserts hello world!
  function:
    - key: main
      handler: index.run
app:
  id: '<your app id>'
  name: hello-world-app

Install your app

To use your app, it must be installed onto an Atlassian site. The forge deploy command builds, compiles, and deploys your code, and reports any compilation errors. The forge install command then installs the deployed app onto an Atlassian site with the required API access.

Note, you must run the forge deploy command before forge install because an installation links your deployed app to an Atlassian site.

1. Navigate to the app's top-level directory and deploy your app by running:

   1

   forge deploy

2. Install your app by running:

   1

   forge install

   1. Select your Atlassian product using the arrow keys and press the enter key.

      Note: Running the forge install command only installs your app onto the selected product. To install onto multiple products, repeat these steps again, selecting another product each time.

   2. 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 forge uninstall command.

View your app

With your app installed, it’s time to see the app on a page.

1. Edit a Confluence page in your development site.
2. Open the quick insert menu by typing /your macro title on the page. Once you start typing the title /Forge app for, the macro with your name will appear in the quick insert menu.
3. Select your macro from the menu to add it to the page.
4. Publish the page.

Your hello world app is now installed into your development site. The app should display on the page like the image below.

Note, while your app is deployed to either a development or staging environment, (DEVELOPMENT) or (STAGING) will appear in your app title. This suffix is removed once you've deployed your app to production.

Deploy app changes

Once your app is installed, it will automatically pick up all minor app deployments so you don't need to run the forge install command again. Minor deployments are changes that don't modify app permissions in the manifest.yml file. You can deploy the changes onto your developer site by using one of two methods:

• Manually, by running the forge deploy command.
• Automatically, by running the forge tunnel command.

Tunneling 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 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 forge tunnel 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 forge deploy command.

1. Once Docker is set up, you can start tunneling by running:

   1

   forge tunnel

   You should see output similar to:

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10

   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 where your app is installed.

2. When you are ready to close the tunnel, press Control + C.

Note, the forge tunnel command only forwards traffic when the user in Jira or Confluence matches the Forge CLI user. For security reasons, you can’t see the traffic of other users.

Next step

In the next tutorial, you'll learn how to make API calls to Confluence using Forge. This tutorial uses the forge tunnel, so make sure you are familiar with using this command.