Last updatedMar 27, 2020

Rate this page:

Part 3: Change the front end with Forge UI

This step describes how to speed up your development with tunneling and use the Forge UI to change your app’s front end. Tunneling connects your local code with the app running in an environment. This enables you to see your local changes immediately without needing to deploy the app. Forge UI is the library for building dynamic and interactive app interfaces with UI Components.

This is part 3 of 3 in this tutorial. Complete Part 2: Call a Confluence API before working on this page.

Set up tunneling

Tunneling speeds up your development by avoiding the need to deploy your app to see changes. The tunnel command builds the code and watches for changes. The app logs are also shown while tunneling.

  1. 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.

Refresh the Confluence page that contains your app each time you want to see a change. Your tunnel will automatically close when you stop the command by pressing Ctrl+C.

Modify the Forge UI

The hello world app contains a single Text component that displays Hello world! In Forge UI, this is represented by <Text>Hello world!</Text>. You’ll update this to also display the number of comments on the page.

When you use multiple Forge UI components, you must wrap them in a Fragment block because a function can only return one top-level component. In the example below Fragment acts as a wrapper for the other UI components.

  1. Navigate to the src directory and open the index.jsx file.
  2. After the Text component, inside the Fragment section, add the following to display the number of comments:

    1
    2
    3
    <Text>
        Number of comments on this page: {comments.length}
    </Text>
  3. Refresh the Confluence page that contains your app.

Your index.jsx file should look like the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import api from "@forge/api";
import ForgeUI, { render, Fragment, Text, Macro, useProductContext, useState } from '@forge/ui';

const fetchCommentsForContent = async (contentId) => {
  const res = await api
    .asApp()
    .requestConfluence(`/wiki/rest/api/content/${contentId}/child/comment`);

  const data = await res.json();
  return data.results;
};

const App = () => {
  const context = useProductContext();
  const [comments] = useState(async () => await fetchCommentsForContent(context.contentId));

  console.log(`Number of comments on this page: ${comments.length}`);

  return (
    <Fragment>
      <Text>Hello world!</Text>
      <Text>
        Number of comments on this page: {comments.length}
      </Text>
    </Fragment>
  );
};

export const run = render(
  <Macro
    app={<App />}
  />
);

Your app should display the number of comments on the page. You can add more top-level comments to the page and refresh the page to see your app update. Ours looks like the following:

The final app displays on a Confluence page

Close the tunnel and deploy the app

Now that your app works using the local code, deploy the changes so the app continues to work when the tunnel is closed.

  1. Close your tunnel by pressing Ctrl+C.
  2. Deploy your app by running:

    1
    forge deploy

Next steps

You now know enough to develop your own Forge apps. Continue to one of our tutorials or look through the reference pages to learn more.

Rate this page: