Getting Aurelia working in CodePen


#1

I’ve got this pen:

but it doesn’t seem to work, otherwise it’d look like this:

My pen is based on the following pen which does work:

What have I missed?


Rapid Prototype Advice
#2

A similar issue: Rapid Prototype Advice

Let me see if I can learn something from there…


#3

Perhaps I can help a little.
I think you need the following in CodePen\Settings\HTML (for Infamous):

 <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
 <script src="https://unpkg.com/promise-polyfill@7.0.0/dist/polyfill.min.js"></script>
 <script src="https://unpkg.com/@webcomponents/webcomponentsjs@1.0.22/webcomponents-sd-ce.js"></script>
 <script src="https://unpkg.com/tween.js@16.6.0/src/Tween.js"></script>

With this at least the script runs. Unfortunately I can’t go any further because I am not familiar with Slim.
I’m looking forward to the solution.


#4

@trusktr

I dont know anything about code pen
But what about using gist.run ?


#5

It’s not so much about where to run it, it’s about how to run it. Whether it’s on Codepen or gist.run doesn’t really make a difference.


#6

Codepen is not suitable for running Aurelia I believe. It lacks module loading. A whole new module loader would need to be configured right before you could use with Codepen. Codepen-project could work but it’s not easily shareable.

A better alternative would be codesandbox (base: https://codesandbox.io/s/215vp3v1xj (I didn’t make it))


#7

I created a simple Pen starting from the Aurelia quick start tutorial. It uses Babel and SystemJS setup via CDNs.


#8

@rodu Superb! Thank you very much. I’ll do my best to spread the word. This is really helpful, specially for newcomers to Aurelia (like me). Thanks for your work.


#9

Nice job :smile: @rodu


#10

How about getting aurelia working on stackblitz

Here is a empty typescript skeleton Ive found where import of css works (angular skeleton does not work like this)

Love how stackblitz works.