How do you do rapid local JS development?

Jira Development
, ,
1

Hello good people of Atlassian community. We are building a jira app both for cloud and server. Before I joined the project, the flow was that after each change, the devs would have to compile a package and deploy it to JIRA cloud or bundle with JIRA server app in java in order to see what they have developed.

This is not really feasible workflow as they were basically blind-developing and only seeing possible issues when they deployed/published the new package, which was excruciatingly slow.

I managed to write mocks for the AJS object in JIRA Server and some APIs to allow rapid local development with HMR (hot module replacement) for javascript, but I struggle to make something similar work with JIRA Cloud (AP object).

So anyway, I am either looking for a way to make it work in JIRA Cloud in particular or for a general way how other teams do rapid local development, without having to build their apps and publishing them to see the results.

Cheers! :clinking_glasses:

2

We are using ACE with React and implemented a proxy to the DevServer to serve the javascript files.

import { createProxyMiddleware } from 'http-proxy-middleware';

....
....

if (devEnv) {
	const publicDir = path.join(__dirname, '..', '/public');
	app.use(addon.config.urlSubUrl() + '/public', express.static(publicDir));

	if (process.env.USE_STATIC_PATH) {
		const buildDir = path.join(__dirname, '..', '/build/static');
		app.use('/static', express.static(buildDir));
		app.use(
			helmet.contentSecurityPolicy({
				directives: cspDirectives,
			}),
		);
	} else {
		app.use(
			'/static',
			createProxyMiddleware({
				target: 'http://localhost:3000',
				changeOrigin: true,
			}),
		);
	}
} else {
.......

I’m not sure anymore if there was anything else we needed to implement to get HMR working.
For Server it’s possible to implement a watch by using atlassian-webresource-webpack-plugin, but I think HMR is no longer working with Webpack 5. We needed some time to get it working in the server environment

3

I should stress that just running it locally without having to bundle it within JIRA app was what I was looking for. Enabling HMR is a side quest after it starts working in development mode. I will investigate your answer, thanks!

Anyway, is this documented somewhere, is there some official development guide, or do teams have to come up with this themselves?

4

Hi @ackvf, for the Server/DC products, you can check the webpack plugin: atlassian-webresource-webpack-plugin - npm

You can use this plugin to create JS assets for the P2 plugin’s production version and use it with devServer to develop the plugin within the product runtime.

5

Thanks, I haven’t seen this before, I don’t even know what P2 is :sweat_smile:, but with our current setup, we didn’t even need that on the server. I shall keep this in mind when we get time for refactoring though, our current setup is not ideal.
Anyway, now the problem is development for the cloud platform. I can’t make the AP object work with local development.

I get that the AP.history object is undefined, which prevents our app from launching.

The all.js file is only intended for use in an iframe inside an Atlassian product and does not work for standalone web pages.
About the JavaScript API

6

If you want to make it work without the cloud platform, you could implement a wrapper for the access to the AP methods. Within these wrapper methods you could call either the real AP method or return mocked / static data.
For us the solution with the proxy was much faster to implement, than a wrapper where we would need to define the mocked result, but that can be different for you.

1 Like
7

No worries, I assume you are not developing the plugins for the Server or DC products, so no need to use this WRM webpack plugin :slight_smile: