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

John Lindquist
InstructorJohn Lindquist

Share this video with your friends

Send Tweet
Published 4 years ago
Updated 3 years ago

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.

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.

Oleg
Oleg
~ 4 years ago

awesome!

Hussein Morsy
Hussein Morsy
~ 4 years ago

Great Course . Thank you.

what do you think about the new alternative Parcel (https://parceljs.org) ?

Ingo Fahrentholz
Ingo Fahrentholz
~ 4 years ago

Could u please let me know what theme you're using ? :S

adesso
adesso
~ 4 years ago

What theme do you use for VSCode?

Platon
Platon
~ 4 years ago

Yet another super useful course. Thanks, John!

Abdullah Al Mashmoum
Abdullah Al Mashmoum
~ 4 years ago

What theme do you use for VSCode?

Check Panda theme

Frontend Wenance
Frontend Wenance
~ 2 years ago

poi --serve , Observable.interval == interval