# Getting Aurelia working in CodePen

**URL:** <https://discourse.aurelia.io/t/getting-aurelia-working-in-codepen/667>\
**Category:** Uncategorized\
**Created:** [January 19, 2018, 2:11am UTC](https://discourse.aurelia.io/t/getting-aurelia-working-in-codepen/667 "2018-01-19T02:11:24Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![trusktr](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/trusktr/32/482_2.png) [@trusktr](https://discourse.aurelia.io/u/trusktr)\
**Post date:** [January 19, 2018, 2:11am UTC](https://discourse.aurelia.io/t/getting-aurelia-working-in-codepen/667/1 "2018-01-19T02:11:24Z")

</div>

I’ve got this pen:

https://codepen.io/trusktr/embed/preview/RxEaGb?height=300&slug-hash=RxEaGb&default-tabs=js,result&host=https://codepen.io

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

https://codepen.io/trusktr/embed/preview/BJGgXv?height=300&slug-hash=BJGgXv&default-tabs=html,result&host=https://codepen.io

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

https://codepen.io/LetsZiggy/embed/preview/JMBNrR?height=300&slug-hash=JMBNrR&default-tabs=css,result&host=https://codepen.io

What have I missed?

---

<div class="post-metadata">

**Author:** ![trusktr](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/trusktr/32/482_2.png) [@trusktr](https://discourse.aurelia.io/u/trusktr)\
**Post date:** [January 19, 2018, 2:12am UTC](https://discourse.aurelia.io/t/getting-aurelia-working-in-codepen/667/2 "2018-01-19T02:12:50Z")

</div>

A similar issue: [Rapid Prototype Advice](https://discourse.aurelia.io/t/rapid-prototype-advice/78)

Let me see if I can learn something from there…

---

<div class="post-metadata">

**Author:** ![frankmonroe](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/frankmonroe/32/425_2.png) [@frankmonroe](https://discourse.aurelia.io/u/frankmonroe)\
**Post date:** [January 19, 2018, 3:26pm UTC](https://discourse.aurelia.io/t/getting-aurelia-working-in-codepen/667/3 "2018-01-19T15:26:35Z")

</div>

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

```auto
 <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.

---

<div class="post-metadata">

**Author:** ![vegarringdal](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/vegarringdal/32/248_2.png) [@vegarringdal](https://discourse.aurelia.io/u/vegarringdal)\
**Post date:** [January 19, 2018, 5:36pm UTC](https://discourse.aurelia.io/t/getting-aurelia-working-in-codepen/667/4 "2018-01-19T17:36:11Z")

</div>

@trusktr

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

---

<div class="post-metadata">

**Author:** ![trusktr](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/trusktr/32/482_2.png) [@trusktr](https://discourse.aurelia.io/u/trusktr)\
**Post date:** [January 25, 2018, 3:41am UTC](https://discourse.aurelia.io/t/getting-aurelia-working-in-codepen/667/5 "2018-01-25T03:41:51Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [January 25, 2018, 4:22am UTC](https://discourse.aurelia.io/t/getting-aurelia-working-in-codepen/667/6 "2018-01-25T04:22:08Z")

</div>

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](https://codesandbox.io/s/215vp3v1xj) (I didn’t make it))

---

<div class="post-metadata">

**Author:** ![rodu](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rodu/32/722_2.png) [@rodu](https://discourse.aurelia.io/u/rodu)\
**Post date:** [January 30, 2018, 11:22am UTC](https://discourse.aurelia.io/t/getting-aurelia-working-in-codepen/667/7 "2018-01-30T11:22:26Z")

</div>

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

> **[Aurelia Pen](https://codepen.io/rodu/project/editor/XojJaV)**
>
> A boilerplate pen to create an Aurelia project example....

---

<div class="post-metadata">

**Author:** ![frankmonroe](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/frankmonroe/32/425_2.png) [@frankmonroe](https://discourse.aurelia.io/u/frankmonroe)\
**Post date:** [January 30, 2018, 6:47pm UTC](https://discourse.aurelia.io/t/getting-aurelia-working-in-codepen/667/8 "2018-01-30T18:47:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [January 30, 2018, 10:37pm UTC](https://discourse.aurelia.io/t/getting-aurelia-working-in-codepen/667/9 "2018-01-30T22:37:28Z")

</div>

Nice job 😄 @rodu

---

<div class="post-metadata">

**Author:** ![vegarringdal](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/vegarringdal/32/248_2.png) [@vegarringdal](https://discourse.aurelia.io/u/vegarringdal)\
**Post date:** [January 31, 2018, 9:18pm UTC](https://discourse.aurelia.io/t/getting-aurelia-working-in-codepen/667/10 "2018-01-31T21:18:11Z")

</div>

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

Love how stackblitz works.