Getting Aurelia working in CodePen

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?

A similar issue: Rapid Prototype Advice

Let me see if I can learn something from there…

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.

1 Like

@trusktr

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

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.

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))

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

6 Likes

@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.

Nice job :smile: @rodu

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)
https://stackblitz.com/edit/typescript-irgu3y

Love how stackblitz works.

2 Likes