Atlaskit and ACE

up :slight_smile: :slight_smile:

i really need help here :disappointed_relieved:

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

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

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:

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

Thank you.

1 Like

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?
florian

Hi Florian,

I’ve granted you access to that repository.

Regards,

Mike

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

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

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

Happy New Year

Mike

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

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)

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?

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

PR: Bitbucket

1 Like

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

const ssrOptions = {

    body: '',

    syleTags: ''

  };

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

Thanks, added a correction for that to the PR.