Admin configure page not loading

Forge Forge UI Kit and Custom UI
1

Hi all,

I’m trying to create a simple admin config page (TestConfig.jsx) for my Jira app, but when I try to access it through the side panel Manage Apps => Click “Configure”, it doesn’t show anything and keeps loading forever like this:

image
image1585×239 8.72 KB

The page title “Configure Google Sheet Id” seems to load from the manifest.yml, but not the components from TestConfig.jsx.

First, I just want to see some text in the config page. My TestConfig.jsx:

import React from 'react';
import { Text } from '@forge/react';

export const TestConfig = () => {
  return (
        <Text>Testing configuration page</Text>
  );
};

Part of my manifest.yml:

modules: 
  jira:globalPage:
    - key: google-users
      resource: users
      resolver:
        function: resolver
      render: native
      title: Google Users

  jira:adminPage:
    - key: google-worklogs
      resource: main
      resolver:
        function: resolver
      render: native
      title: Google Worklogs
    - key: config-screen
      resource: config
      resolver:
        function: resolver
      render: native
      title: Configure Google Sheet Id
      useAsConfig: true
  function:
    - key: resolver
      handler: index.handler
      providers:
        auth:
          - google


resources:
  - key: main
    path: src/frontend/index.jsx
  - key: users
    path: src/frontend/GoogleUsers.jsx
  - key: config
    path: src/frontend/TestConfig.jsx

How can I get it to work? Thanks!

1 Like
2

Hi Benjamin,
Do you have a package.json file in your project? If so, could you please share its contents?

3

I currently have issues to load any of my deployed forge modules and get the same loading animation. It’s working for me If I use “forge tunnel” instead of “forge deploy”

4

Sure Andrei, here you go:

{
  "name": "jira-admin-page-ui-kit-2",
  "version": "1.1.5-next.0",
  "main": "index.js",
  "license": "MIT",
  "private": true,
  "scripts": {
    "lint": "./node_modules/.bin/eslint src/**/*",
    "test": "jest"
  },
  "devDependencies": {
    "eslint": "^8.56.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "jest": "^29.7.0"
  },
  "dependencies": {
    "@forge/api": "^4.2.1-next.0",
    "@forge/bridge": "4.3.0",
    "@forge/react": "^10.10.3",
    "@forge/resolver": "^1.6.4",
    "@google-cloud/local-auth": "^2.1.0",
    "cloudflared": "^0.6.0",
    "forge": "^2.3.0",
    "google-spreadsheet": "^4.1.4",
    "googleapis": "^105.0.0",
    "http-server": "^14.1.1",
    "node-fetch": "^3.3.2",
    "react": "^18.3.1"
  }
}
5

I don’t see any obvious issues at first glance - we’ll need to review the full code to properly debug and identify the root cause.
If you’re open to using Custom UI, I recommend checking out this “Forge Starter” template:
:backhand_index_pointing_right: https://github.com/andrei-pisklenov/forge-starter

It’s a solid starting point for building panels, project pages, admin pages, or other front-end modules using Custom UI.