I would like to integrate aurelia with phoenix, right now aurelia has webpack plugin and I have checked the skeleton apps, I’m having trouble to start and make it work.
1 Like
Hmm, unable to find a brunch plugin for it, not a very big API yet I am guessing?
But four options at this point:
- If it is an NPM package and it runs in-client then brunch will still work fine, just import it as any other normal javascript and use in browser.
- If it is a server-side thing, yee you may have issues as javascript is compiled down to distribution stuff for Release, might be able to fake it somehow though but I’ve not tried.
- Make a brunch plugin, which is actually really easy. I can give examples if you tell me ‘how’ aurelia is used as I was not able to find a quick tutorial that was not node.js corrupted. >.>
- You can convert Phoenix to webpack, easy to do (although webpack is a lot slower than brunch but if you want to deal with that) and a few tutorials around.
1 Like
A little further looking because I was curious. Yeah, Aurelia is a purely client-side framework kind of like angular (I do not recommend these styles myself, easy to start getting into hairy and conflicting setups), so it would work fine with brunch. It is in NPM so just add to to the client ‘dependencies’ section, add to whitelist in brunch (if you use the whitelist, if not then ignore it and everything is included), then load it up in your app.js. It is a fairly standard client javascript library from the looks of it.
EDIT: For note, no jspm or System.import or client-transpiling or anything else like that needed, brunch already does all that with babel according to the ES6/7 specs. It is very easy.
Maybe your best bet and sanest approach would be to try with Aurelia’s concatenated script-tags https://github.com/aurelia/aurelia .
Although there is a webpack integration, it works best when the client is isolated.
Aurelia uses some unique loaders under the hood (which I “heard” from somewhere), and it is an extra factor in integration.
Another factor is The Aurelia experience or it’s convention of using .js(.ts), .html pairs eg. app.js and app.html which makes development a marvel.
And that makes it more complicated to integrate since all other frameworks and libraries I saw rely mostly on just javascript files like React, Cycle.js, Elm (which compiles to pure javascript) and etc.
Yes, one can use inline templating as Angular 2 does it, but not sure if it is the recommended way.
Aurelia is a superb piece of technology but the nodejs tooling that it relies on, hmm, I will sustain from further comments. Since most of my experience is from 1.0.0, maybe the situation is “better” in the js land 
3 Likes
Well it’s very easy to install and generate aurelia projects with aurelia-cli, I will add CORSPlug and work with that.
Have any of you guys had any luck integrating Phoenix and Aurelia? I’m trying to do the same and am running into issues. It would be helpful if someone can share a working skeleton of this integration.
Is there a reason why you can’t just keep the front and backend in separate projects/repositories? Make Phoenix only spit out JSON responses and Aurelia takes care of everything else.
Deploying one app instead of two is a huge win. You also get things like live-reload for free (not hot-reload). With two different applications you also need to involve additional CORS plug to the endpoints which isn’t a big deal but it does add up to the chores and performance.
Good points. I’ve just never known many people who tried to embed a client-side JS framework inside a Rails or Phoenix app without tearing some hairs out. Of course, I know nothing about Aurelia.
Could you list some of the pain points that one should watch out for?
I think of server-side rendering being one of them but nothing else come to my mind.
One reason to have both aurelia and phoenix on the same project is that you can use the power of Aurelia (front end framework) to do some very dynamic stuff in some views but you could actually use the routing using phoenix, I have done SPA is the past and tried both React and Angular and routing is messy, in phoenix everything is much cleaner and there are many parts of an app that is simple CRUD stuff that is way easier to work with phoenix than with javascript.
1 Like
I use Elm with phoenix with little issue, in fact they all compile together quite easily. 
I used Caliburn in the past quite a bit (Eisenberg’s MVVM framework with C#), and I couldn’t help chime in that the aurelia.io description on google’s search results is awesome!
Aurelia is the most powerful, flexible and forward-looking JavaScript client framework in the world.
(that’s the entire quote)…
And so this post isn’t entirely useless, have y’all gotten a phoenix app up and going first with just webpack, as there is indeed documentation and examples for that alone (though I haven’t done it yet…but this is a good excuse to try). Once that is setup, what kind of problems do you have?
1 Like
I tried webpack once, bit more painful to set up over brunch (though that might just be because I know brunch well now), but it was a LOT slower in compilation for me compared to brunch, so I did not see the point. It was a simple and likely poorly made test though.
1 Like
Rather than convert Phoenix to use webpack and accommodate Aurelia, I was wondering if we could change Aurelia to use brunch. I also had a bad experience with webpack being extremely slow compared to brunch.
Has anyone tried this?
