How to use two different pages for different modules in jira custom UI app?

Hai all,
I am in the development of creating third party integration app in jira. After lot of discussions, i go with forge UI custom app. But now i stuck in a place to show the app in two different modules. I like to show my application in both adminpage and issuepanel modules.
In adminpage module, i like to show my app configuration page and in issuepanel module, i like to show the third party data after configuration details given by the admin in adminpage. So both the modules have different functions.
After jira user installed my app from atlassian marketplace, the user needs to configure the app by using adminpage module and after configuration only the user can able to access the app in issuepanel module.
How can i do that? Shall i create another one react app inside jira forge custom UI app? Jira provide an app inside static/hello-world. Can i create another one app to complete my requirements?
Any suggestions?

Thanks in advance…

1 Like

We are doing some tests with Forge and I got hit with the same scenario where I need two resources entry points (one for a Panel and one for Admin page).

An easy solution is indeed to create two different react apps, and re-use your common code between the two apps. I don’t like having to manage two sets of dependencies ( package.json ), so I looked for alternatives.

What I came up with is to use my own Webpack configuration to generate two builds. Forge creates a create-react-app app in the static folder. Those apps use a pre-configured Webpack to easily generate the build files for you, but if you want to configure it yourself you need to use the eject script ( npm run eject ) and it will move all the configuration files in your project directly. Once this is done you go in the /config and /scripts folders it generated and you have fun making the changes you want so it builds the way you want.

(I made changes so the build script builds specific files given as argument. e.g. npm run build my-file.js. With that I could build two different resource entry points)

I haven’t tinkered with Webpack a bunch myself so maybe someone else knows a better way.

hai @linklefebvre Thanks for your reply. I used the method mentioned in the below link to complete my requirements.

But Now i am facing some other problem. I invoke a method from app.js and wrote resolver function for that function in src/index.js. I need to render components based on the return value from resolver function.
But resolver function took too much of time(5 to 6 sec) to return the value. In between that time all the code inside app.js is executed. So based on the return value from the resolver function, i can’t render the pages correctly. is there any way to do it efficiently?

Hi SuryaA,

Thanks for linking the other solution, it is indeed another possibility to mix all the concerns in one entry point, if you are able to know which context you are being rendered from.

I am sorry I don’t really understand your problem properly. What I can tell you is you should wait until you receive the results from your resolver before rendering the value. The solution with the context does that exactly, it waits until the isDetectingContext becomes false in order to render the components.

Hai @linklefebvre That’s not my problem. I invoke another one function using @forge/bridge in app.js inside same useEffect() function. But the resolver delayed for sometimes to give the response back. within that time other block of code running in background. Hope you understand. If you don’t understand my problem, i will send my code for reference.

You should probably link code because I don’t know what you expect to happen.

When you use invoke it returns a promise and is being run in the background. Your code continues to run normally. If you wish to wait the promise to fulfill you need to put the rest of your code in the then function:

invoke("myResolver").then((result) => {
    // Do the code you want to do after the result is returned

Hai @linklefebvre I will try in the way that you told.