Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Configure Poi for Advanced Template Control

    John LindquistJohn Lindquist

    Poi uses the ejs templating language for the main template. When you create a poi.config.js, you can customize how to render the main template using configuration settings.

    webpackwebpack
    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:01 For more customization options for your template, create a poi.config.js. This has the usual module.exports. There's an HTML property on here that we can use.

    00:13 First, we'll just try title and call it My amazing app, then start up Poi again. You can see it will grab My amazing app and drop it in the title. Other common options like description, My description, these options are also available. You'll see the description show up in here.

    00:33 For more customization options, we'll need to tell it exactly what our template is. We're just going to use the template we're already using. Then we can start passing in custom properties into the template. I'll call this one Course. The course can be Poi lessons. When I hop into my template, I can create an

    .

    00:54 Using the template's syntax for Underscore and Lodash, I can access the htmlWebpackPlugin.options.course. Course is coming from right here. We changed some configurations, so we need to reboot Poi. You can see Poi lessons shows up here coming from the configuration.

    01:20 Another example could be something like contributors, where we have Mindy and John. Then we could access these in here. Let's simplify this a little bit by destructuring the options. We'll say Course, and grab the course and contributors off of htmlWebpackPlugin.options. That way, we can just have Course here.

    01:50 Then we can create an unordered list with some list elements. We'll wrap this with the template syntax for using Underscore or Lodash, say, for each contributors. We'll call each contributor a c with an arrow function and an open curly here. Then we'll close this on this line with a closed curly and a closed paren.

    02:15 Inside of my list element, I can get the local variable syntax and say render out the c. I'll hit save. You can see that Mindy and John are coming into the template from the config Mindy and John.

    02:31 You shouldn't use this for anything more than configuration or global configuration for your project. Leave any dynamic data or data of your application in your JavaScript instead of your HTML template.

    Discuss

    Discuss