Build Better JavaScript Apps with Webpack and Poi

Build Better JavaScript Apps with Webpack and Poi

Webpack is a build tool that puts all of your JavaScript files, images, fonts, and CSS , in a dependency graph. This lets you use require() in your source code to point to local files and decide how they can be processed in your final JavaScript bundle.

Poi is a zero-config bundler that is built on top of Webpack. Zero-config does not indicate that there’s no configuration at all, just that a lot of things are already configured by Poi for us!

In this post, I will show you how to set up your JavaScript app, bundle it using Webpack, and configure it using Poi!

Launching a simple JavaScript File using Poi

It is very simple to deploy a single JavaScript file using Poi. Poi can launch a dev-server and automatically render any changes made to your file.

To begin, install Poi on your system.

$ npm i -g poi

Then, create a new project directory.

$ mkdir js-app
$ cd js-app

Inside this directory, create an index.js file with the following code:

Here, the document.getElementById grabs the div with an id called “app” that will be created by Poi. Inside this div , I have written a simple string of “Hello World”.

To launch this file on your browser, open your terminal and run the poi command. Poi will handle all the webpack related stuff and launch the file on localhost:4000 .

If you have placed the file inside another folder like src , you will have to run poi src/index.js to launch it on the dev-server.

Customize The HTML Template With Poi

Even though Poi already gives us a ready-made HTML template for our apps, we can also customize it as we like. Let’s see how we can customize the head of our HTML page using Poi.

Create a new file inside your project directory called index.ejs and write this code inside it.

Run the poi command again, and you will get a new page with a customized title. If you inspect the page in your browser’s dev tools, you will see that the head is also customized and the webpack is still injecting all the scripts needed.

Configuring Poi with poi.config.js

The above method of customizing the HTML template is fine for simple JavaScript pages, but you will soon feel the need for a better method for customization that gives more options. This is where the poi.config.js file comes in.

Let’s create a poi.config.js file in our project directory. This file will have a module.exports object that we will be using in our app.

title and description are common options that we can use to define the title and the description of the page. The template option is used to tell Poi where to export the customization options.

I am going to use the index.ejs file that I had created in the previous section. Let’s keep a single div element in this file for now.

<div id="app"></div>

I am going to render the text and author options in the body of the page. Inside index.ejs file, write the following above the

<% const {text, author} = htmlWebpackPlugin.options %>
<h1>
  <%= text%>
</h1>
<ul>
  <% _.forEach(author, a => { %>
    <li>
      <%- a %>
    </li>
  <% })%>
</ul>

Here, I am using the template’s syntax for Underscore and Lodash to access the text and author options.

We have changed some configurations here, so we need to re-run the poi command to see the changes on our page.

Note that this should only be used to configure your project. Things like data should be left for JavaScript to handle.

Build Vue Apps using Poi

A big advantage of using Poi is that we can use it to build Vue apps without actually having to install Vue as a dependency.

This is because the developer of Poi, who also happens to be a major contributor to Vue, has configured the defaults in Poi to work with Vue.

Let’s delete all the files in the project directory. Create a new index.js file and import the Vue package here.

import Vue from 'vue';
import App from './App.vue';

new Vue ({
  el: "#app",
  render: h => h(App),
});

In the above code snippet, I am first importing the App component from the App.vue file, then I creating a new instance of Vue where the element ( el ) is set to a div with an id of app . The render will then render this code from the App.vue file.

<template>
  <h1>{{message}}</h1>
</template>
<script>
  export default {
    data() {
      return {
        message: 'Running Vue App with Poi!!',
      };
    },
  };
</script>

Re-run the poi command and you will now in all senses have a Vue app running!

Note: If you receive an error saying "Module not found" , then install the Vue package in your project.

Building React Apps with Poi

Developing React apps is also very easy in Poi. All we need to do is install the react and react-dom packages and configure Babel to expect React packages.

First, install react and react-dom in your project.

$ yarn add react react-dom

Prior to configuring Babel, we need to install a couple of developer dependencies.

$ yarn add babel-preset-react-app babel-plugin-react-require -D

Next, create a new file called .babelrc and write the following in it:

{
  "presets": ["react-app"],
  "plugins": ["react-require"]
}

With that you are now ready to write React apps!

Compiling Styles in Poi

Importing CSS styles in a React App built using Poi is simple. Create a .css file in your project directory and write an import statement in your  .js file.

But if you are creating your styles in a .scss file, you will have to install a couple of dependencies.

Open your terminal and install node-sass and sass-loader using NPM/Yarn:

$ yarn add node-sass sass-loader
// or
$ npm i node-sass sass-loader

Once it is installed, re-run the poi command, and you will now see the styles loaded into your React app!

Adding Webpack Loaders Manually

Poi is really great. It lets you ship a lot of webpack loaders without the need for any customizations or configurations.

But Poi cannot do this for all the webpack loaders out there. Let’s see how we can handle this issue by adding react-markdown-loader to Poi in order to load Markdown files as React components.

Create a new file named page.md in your project directory. Inside this file, write whatever content you want using the usual markdown format.

In order to enable Poi to work with the Markdown file, we need to add the appropriate loader.

In the poi.config.js file’s module.exports object, write the webpack property as shown below:

module.exports = {
  webpack(config){
    config.module.rules.push({
      test: /\.md$/,
      loaders: [
        "babel-loader",        
        "react-markdown-loader"
      ] 
    })  
    return config
  }
}

Also, make sure that you have installed the react-markdown-loader in your project.

With that taken care of, import the Markdown page in your index.js file and call it as a React component in your render method.

import {render} from 'react-dom'
import Page from './page.md'

render(<Page />, document.getElementById("app"));

Re-run the poi command, and you will now see the Markdown file load on in the browser page.

Building JavaScript Bundles with Poi

To build your JavaScript project with Poi, just run the command poi build in your terminal and you will instantly get a dist folder in your project directory.

You can then launch this dist folder with the command http-server dist . This command will then launch the project on localhost:8080 .

To analyze your project, first install a developer dependency called webpack-bundle-analyzer .

yarn add webpack-bundle-analyzer -D

Then you need to add it to your poi.config.js file, as shown below:

The options parameter allows us to hide the analyze function behind the options.analyze flag. So, only if we run the poi build --analyze command, Poi will run the BundleAnalyzer plugin and launch it.

Skipping Configurations with Poi Presets

As mentioned before, Poi comes with a built-in Vue preset. But Poi also gives us some other presets that we can use to install popular libraries like Elm , React, Storybook , TypeScript and many more.

To install a poi-preset in your project, run the following command from your terminal.

$ yarn add @poi/plugin-<libary-name> --dev

So if you want to install Elm in your project, you will type yarn add @poi/plugin-elm — dev

You can then install elm in your project as well. But you can skip this if you have installed it globally on your system.

To use this plugin, go to poi.config.js and write the following code:

module.exports = {
  plugins: [
    require('@poi/plugin-elm')(options)
  ]
}

To know how to use other poi-presets , check out:

Conclusion

Webpack will be extremely helpful if you are building an app that has a lot of non-code static assets.

Other build tools like Grunt and Gulp , on the other hand, have no concept of dependency graphs.

There are many pros why Webpack can be a good fit for your project. Webpack has been so helpful that it is widely used in the React community.

And the fact that Poi provides us a “configuration-free” way of launching JavaScript projects makes things even more awesome for us!

Learn more

• 11 Javascript utility libraries you should know in 2018
• How to write better code in React
• 5 Tools for faster development in React

Check out Bit

Bit’s platform turns the components and modules of your apps into building blocks which can be discovered, used and even developed from any project! Feel free to jump in and check it out.