What is Plop.js

Let’s imagine your’re playing with lego blocks 🧱 and you have a set of pieces that when are added in the right place a castle 🏰 is created . Now each time you want to build that castle to show off to your friends you to have again find those specific pices and put them together in the same way . It takes time right ? 🥲

Now imagine you have a magic wand 🪄 , You say the spell to it “Build my castle” you magic wand already knows which pieces to be used and how to put them together to build that castle for you . So , it builds that instantly ! That’s what my friend Plop.js does! 😗

In a world of coding , instead of building castles we build pieces of code like web pages or parts of a website . These pieces are often build in the same way. So in the coding world Plop.js is our magic wand 🪄 We tell it what piece of code we want to build and it puts it together for us. Isn’t that cool ?

Now let’s look at and example . Let’s say we want to build a piece of code that’s like a little castle , but in coding terms we call it a ‘component’ . Here is how we can do it using Plop.js :

// This file is our magic wand , or in coding terms a "plopfile.js"

module.exports = function(plop) {
// we will tell the magic wand how to build our little castle or 'component'
  plop.setGenerator('component',{
  description : 'Create a new component',
  // The magic will ask us some questions before it starts building 

  prompts : [{
      type: 'input',
      name: 'name',
      message : 'What is your component name ?',
  }],
  // The the magic will start building our component based on our answers
  actions: [{
         tyep:'add',
         path: 'src/components/{{name}}/index.js'
         templateFile: '.src/component/**',
        }]
  });
};

In the above case our magic(Plop.js) will ask us for the name of our component ( our little castle).Then it will create a new file with that name in right place src/component/{{name}}/index.js

And think of the templateFile is like the blueprint of our little castle, it tells the magic wand how to put the pieces together.

Isn’t that fun ? Just like playing lego blocks, but in the coding world ✌️.

Plop.js Demystified