React + Atlassian Connect Express

Thanks for the confirmation (and @edave’s thanks for the suggestion, I forgot to say that!)

At the beginning of this, there’s a pretty large swathe of new things to try to put in place right as the foundation, so any hints how to get started with that suggestion will be appreciated :slight_smile:

Hi there any news on how to combine react and ace to get it both running? If I put react code (with < and > ) and import it in app.js I would still get the error “SyntaxError: Invalid or unexpected token
at Object.Module._extensions…js (internal/modules/cjs/loader.js:1277:10)”
I would have expected to be able to use atlaskit (and react) out of the box… Very disappointing that almost 3 years later nothing new here.
Unfortunately the link to the repo https://bitbucket.org/NRN_MartinGregory/race of @martin.gregory is offline. I would have liked to take a peek.

Hi StefanKoch,

Could you share your current implementation? If you want to import those react components in the server-side code, most likely you will need to transpile the code (not sure with esm will work out of the box) to a version that node.js supports.
However, you can achieve this in a cleaner way. I’ve created this repository on GitHub that you can take a look - it’s really an early stage but I will add more features in the next weeks.

There are:

2 Likes

@paulo.alves @StefanKoch the starter kit above is by me.

It’s a Next.js implementation of ACE which lets you use React out of the box. It’s what I use when I create new Atlassian Addons.

I’m continually working to improve it so if you have any feedback on how it could be better just let me know.

1 Like

Thanks Paulo, however your link gives me 404. Is there another one I could try? Or it might be still private?

Thanks @RhysDiab, thanks @marc, I will give that one a try, looks very promising! :smiley:

Hello everyone, is there some solution of this topic? Can someone share an implementation of combining ACE with REACT?

@Ivana1 There is react.js support built into the default ACE boilerplate now. If you create a new ACE app you have the option to have your frontend in react.

Thank you for the response, can you help me about which parts of the default configuration (handlebars) should be changed?

I was having the same problem but then I found this interesting blog post that essentially uses a create-react-app in conjunction with the boilerplate created by the ACE framework.
All you really have to do is create a working react application, build it and export it to public folder of your ACE application.
Hope this helps!