How to egghead

Using Plunker to Share Code

Plunker allows us to embed even fairly complex apps as runnable examples, perfect for our learners to run with. There are two ways to use it:

  • You’ll typically use Plunker’s public UI and set up your code example there. For standalone lessons, feel free to just do this. It works great.
  • Plunker also supports loading your code directly into the embed via Github. This is an amazing feature that allows us to version control the examples presented to the user. egghead can then handle maintenance on your examples and keep them updated and supported for a much longer time. :muscle:

Much as we love Plunker, there are cases where it just won’t work. In those cases, simply link to a GitHub repository.

Linking a GitHub repository to Plunker is fairly simple and involves configuring the Plunker embed url. We start with https://embed.plnkr.co/ , which is the base embed url. To link to Github we configure the url by adding:

`https://embed.plnkr.co/github/{profile-name}/{repository}/{branch}``

{branch} can be replaced with {tag|sha1} depending on how your repo is set up. If your repo is set up with an example in individual folders, you can add that /path to the embed url.

Here’s an example Github repo, which is divided into one folder per lesson.

Additional Plunker embed config

URL parameters can be added to affect how the embed presents itself. The most-used feature is showing specific files (the default being the index and preview). Add ?show= to the end of the url with the various filenames separated by commas.

https://embed.plnkr.co/github/eggheadio-projects/egghead-wikipedia-demo/angular-2-building

You’ll see a complex example of this here.

If you want to go wild, this gist documents quite a few additional parameters you can use.

Build complex apps in Plunker

Before you go any further, stop! You don’t need to build apps in Plunker. egghead will do this for you. Just hit up @zac in Slack and we’ll get to it.

...but if you’re the DIY type, this is actually pretty cool.

Plunker itself doesn’t support the node file system—import and export statements in Plunker will not work. But it is possible to create an in-browser Typescript compiler. This is usually required for Angular lesson examples. Doing this takes a bit of set up, so hang in there!

Here’s what you do.

1) Install jspm on your local machine if it isn’t already. It’s an auto-configure systemjs tool: $ npm i -g jspm@beta

2) Run in whatever dir pleases you: $ jspm init

3) Select all the defaults given to you. Then run: $ jspm i npm:{package_you_want_to_install} For instance: jspm i npm:data.task This will give a verbose working example of the config file needed to achieve in-browser compiling.

4) After init is done, this is the barebones .html page you will need:

5) You then need to create an app.js file in the src directory src/app.js . This file will contain the code you want to run. Any packages that are installed using jspm i npm:{package_you_want_to_install} will create a jspm_packages/npm/{package_you_want_to_install}@1.2.3.json file.

6) ⚡️ Copy those contents. ⚡️ The content will be placed in your SystemJS.config under the packages property as the package you installed. For instance:

7) Jspm will also give you a jspm.config.js file: Copy this file, with some slight modifications.

Note that the "baseURL": property was changed from / to a .

Also note that "systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js line was added under the map property (nested in the devConfig property).

8) For Plunker apps, just add this script tag (in index.html ): <scriptsrc="https://unpkg.com/systemjs@0.19.41/dist/system.src.js"></script>

9) Then the two SystemJS.config objects can be added in their own script. Now you’re good to go!

Here’s one last example of a Plunker embed to send you on your way.