Autoplay

    Use Poi to Build an Index.js with Modern JavaScript Features

    John LindquistJohn Lindquist

    Poi can easily launch an index.js file simply by running the poi command. This will launch a dev-server and automatically reload whenever you make changes. You can also npm install any package you need and import it right away.

    webpackwebpack
    javascriptJavaScript
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:04 Install Poi globally, so NPM install global poi. Then we can go into our project, create a new file. We'll call it index.js, and inside of this file, we'll just create a document, getElementByID. Poi creates a div that has an ID of app, so we can grab that, write out to the inner HTML, just a string of H1, "hello world."

    00:24 Then, in my terminal, run Poi. It copies this to the clipboard, so I can go ahead and paste that there, hit enter, and you see "hello world." Because Poi handles all of the webpack stuff for me, I can install things like RxJs, and then, right away, just import from RxJs.

    00:44 I'll import observable, and say observable interval every one second, then subscribe. We'll write out this count that will go up, move this into here, and show the count. We'll hit save, and it automatically starts counting up.

    01:05 If I want to, I can create a folder called something like Source, move that in here. It'll fail to compile now because I need to stop it and say Poi now needs to compile source index. Now we're fine. It'll rerun and start up again.

    01:26 Or, if I want to open it on a different part, I can do the same, --port, and, say, 4001, and that'll compile. Copy this to the clipboard, paste it in here, and you see we're still running.

    Discuss

    Discuss