Last updatedNov 18, 2019

Step 4: 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 a declarative markup language for creating your front end.

Complete Step 3: Call a product 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
    Starting tunneling for the development environment. Your local app will receive requests from everywhere the app in the development environment is installed.
    Press Ctrl+C to cancel.
    
    Listening for requests on local port 62764...
    Bundling succeeded.
    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

Forge UI is a declarative language for describing the front end of your app. The app contains two Text components. The first displays Hello world! In Forge UI, this is represented by <Text content="Hello world!" />. You’ll now update these components to display the number of comments on the page.

  1. Navigate to the src directory and open the index.jsx file.
  2. Replace the Text components with the following to display the number of comments:

    1
    <Text content={`Number of comments on this page: ${comments.length}`} />

    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
    import api from "@forge/api";
    import ForgeUI, { render, Fragment, Text, useProductContext, useAction } 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] = useAction(value => value, async () => await fetchCommentsForContent(context.contentId));
        console.log(`Number of comments on this page: ${comments.length}`);
        return (
            <Fragment>
                <Text content={`Number of comments on this page: ${comments.length}`}/>
            </Fragment>
        );
    };
    
    export const run = render(<App/>);
  3. Refresh the Confluence page that contains your 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.