Atlaskit and ACE



Hey guys, at this point i’m so tired of trying to find good way of making cloud app with ACE and AtlasKit that i don’t see any options, but ask you for help :smiley:

What’s the problem anyway?

The problem is that i don’t know how to configure my project to be productive and efficient.

That's a long text of my problem, what i've tried and how, and u can just skip it if you have any ideas already and what i think Atlassian might do to make cloud development better with their official libraries

How i think things works.

ACE creates skeleton project with good old way of creating apps with multiple pages served by server, injecting some good variables with hbs templates, for example JWT token needed to authenticate requests to ACE.

I want to develop with React and atlasKit. Tool that is most popular in react community is react-create-app (RCA). It provided a very good setup to work with React, but it’s very good if your client and server are separated and client makes CORS requests that server allows to be accepted. With ACE it’s not the case, right, so i can’t use RCA out of the box, i need builded assets to exist in server public folder to serve them. Ok, one solution is to make build script of RCA to be executed and src folder watched to trigger rebuild, but that’s production build, which slows down a loooot and doesn’t provide source maps for development ofc it’s harder to develop with that approach, mainly because of build speed. There is no way to get those files.
Pretty much ACE forces me to use custom webpack setup (or other bundler or pipeline whatever) to use React, maybe it would be best if ACE (and atlassian-spring-boot for Java guys, since both are official) had setup for using AtlasKit since both AtlasKit and ACE are meant for development of one thing - cloud add-on.

Maybe that’s possible by just using atlassian-connect to make my own implementation of authentication with instances that want my add-on to be installed pretty much everything that ACE implements (or atlassian-spring-boot), but make it so that i could separate my client from server if it’s even possible.

What i’ve tried to do

  1. Tried to tie CRA and ACE with various ideas from configuring proxy options of CRA which doesn’t work because i don’t have access to assets and can’t even make requests because i don’t have token (doesn’t succeed)
  2. Asked help here, doesn’t got viable option :C
  3. Tried to create my own project setup with webpack (doesn’t succeed) - i’m not that experienced and it felt rly not good.

I’m sure everyone who’s developing for cloud faced this problem some way or another.
Does anyone has template project for creating cloud add-ons with React and preferably ACE or at least Node? Would appreciate it a lot. Or any ideas, advices.


up :slight_smile: :slight_smile:


i really need help here :disappointed_relieved:


Hi Alexander,

I’ve created an issue for this, I’ll try and get something published this sprint :).




Thank YOU, sir! :smiley: :+1::+1::+1:


OK, so I got something up and running.

I took including the redux, and react-intl features, and added atlassian-connect-express, and @atlaskit to it:

I based the work off the atlassian-connect-express-template repo that atlas-connect uses.

I removed their JWT and Passport config as ACE has it’s own authentication middleware, If you see my comments around that; that was one of the trickier things to integrate.

There’s probably quite a bit of other stuff you can remove but I don’t want to stray too far from master – so that it’s easier to keep up-to-date.

Please review my branch and give it a go.

Have a nice weekend.





Wow, Mike, great work! Though it’s not quite working for me, i added just credentials.json file to auto install app into Jira instance and after loading page i get 2 errors in console:

hello-world.chunk.js:1 Uncaught ReferenceError: webpackJsonp is not defined
    at hello-world.chunk.js:1
(anonymous) @ hello-world.chunk.js:1

client.js:1 Uncaught ReferenceError: webpackJsonp is not defined
    at client.js:1

And of course button doesn’t work.

Also i’m not very familiar with SSR, so it’s quite hard for me to see what’s happening and how.

It’s sad that create-react-app misses just a few features that would make possible easy integration with ACE: one is making builds to the disk when developing, simple webpack: watch, multiple entry points, since we don’t want to load one giant app bundle in each app module, like there is no need to load big app with some checks for what page we in when we load web section in issue, so we need different html pages with mini app bundles, and last (which is really extend of first) is the ability to put dist folder outside of project workspace. Or just add ability to add entry point and add htmlWebpackPlugin with own customization.
So then we could just scaffold ACE app, include inside that workspace client folder with CRA, pass option for build path to public folder of our express app, our html would go to views, and even better .hbs would go to views, so that we can put jwt token to be used in client code.
That’s what i tried to do, but failed :smiley: Though i haven’t tried to make my own fork of CRA and just make all those things available. I just saw code and was overwhelmed and scared of it :smiley:

Though it’s quite cool to use SSR as you did, because then there is no need to create banch of html files for different app modules, like web section in issue, or main page of an app, that’s cool, though it adds more complexity i think.

I just wonder how other people use atlas kit, are they using it without official connect libraries, so that they have more flexible ways to use react with atlaskit components.
Or maybe i should just forget about that idea and follow old proved way of multi page app with express and template engine and do best i can to make app look with compliance with ADG3


Hi @alexter_pr,

Here at AppWeek in Miami I’ve found out from other add-on vendor (@vasiliy.krokha) that this problem can be easily solved by not using atlaskit-starter or basically create-react-app, but more lower level babel compiler to generate compiled javascripts in server directory, so that ACE serves it all, with no proxy to the webpack server.

Please see git repo for details:

Thank you.


Thanks :slight_smile:
Pretty much i did that before i even asked the question, the point is that with CRA we don’t need to think about configuring webpack (minifying, working with css/less/postcss and more), but that’s for sure more flexible. Thanks anyway!


hi mike,
sounds great! unfortunately it states Access denied - can you please grant access to the repo?