Atlaskit and ACE

Atlassian Developer Tools
,
1

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.

1 Like
2

up :slight_smile: :slight_smile:

3

i really need help here :disappointed_relieved:

4

Hi Alexander,

I’ve created an issue for this [ACJS-842] - Ecosystem Jira, I’ll try and get something published this sprint :).

Regards,

Mike

4 Likes
5

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

6

OK, so I got something up and running.

I took GitHub - kriasoft/react-starter-kit: The web's most popular Jamstack front-end template (boilerplate) for building web applications with React 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.

Regards,

Mike

:slight_smile:

7

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

8

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: Bitbucket

Thank you.

1 Like
9

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!

10

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

11

Hi Florian,

I’ve granted you access to that repository.

Regards,

Mike

12

Hi Mike, can you also grant me access to this repo, it would be helpful. Thank you!

13

Hi Mike, I would also need access to the repo. Thank you!

14

Sorry for the delay everybody, the repository should now be public again.

Happy New Year

Mike

15

Hi! I’ve just merged support for AtlasKit with SSR to the starter template for Jira and Confluence. Here’s the PR.

It seems to me that getting create-react-app or react-starter-kit to play nicely with ACE will be an uphill battle because they are both opinionated kitchen sink scaffolds with different opinions.

To avoid too much config overhead, I opted for parcel, and wrote the logic for SSR and putting the script on the page as a custom express template engine, so you can render a jsx page essentially the same way as a handlebars page. Parcel was easy to set up to accept multiple entry points (you just supply them as command line arguments). I also configured it to use React via a cdn so that it can be cached for use by any of your pages.

Interested to hear what you think!

Cheers,
James

5 Likes
16

Hi James,
I will take a look into it next week, as we had issues to connect the way ACE works with React/Atlaskit and still are not satisfied with our current solution. (Code Splitting, working with the Asset Hashes and init react components on a route)

17

Hey @jhazelwood ,

so I used ACE and installed the react packages. Then, as noted in the index.js file, I used “npm run watch-jsx” and changed the res.render argument to the .jsx extension. Plus, I uncommented “browerOnly: true” so that it is active.

Now the example app is up and running but instead of showing the content of the hello-world.jsx file, it just shows a blank page in my JIRA instance. Any ideas why? Did I miss a step or two?

18

Hi @SebastianStemmer,

Thanks for bringing this to our attention!

I’ve found the issue: the {{/if}} is in the wrong place in views/react-layout.hbs, sorry. If you swap line 22 and 23 in that file it should start working. I’ll raise a PR with a fix.

Cheers

2 Likes
19

PR: Bitbucket

1 Like
20

Oh @jhazelwood , and one more thing. In the server-side-rendering.js:

const ssrOptions = {

    body: '',

    syleTags: ''

  };

That is supposed to be “styleTags”, isnt it?