Let's Build: HTML5 Development Server & Build Tool With Webpack - Installing UI Plugins

Welcome everyone to the fifth part of this tutorial series. Last week, we were able to display images, inline in HTML and using CSS background, within our website by with the help of using file-loader.

Today, I will be sharing to you how to create a new page and how to install and integrate open source UI plugins with Swiper.

Updating Webpack Configuration

As we start from where we left off last time, the first thing that we’ll be doing today is to modify our Webpack configuration file so that we can create a new page where we will put all of the new features that we will apply today.

1. Using your text editor, open webpack.config.js from the root of your project directory and add this new entry point.

  ...
  mode: 'development',
	entry: {
		index: './src/pages/index/index.js',
+		carousel: './src/pages/carousel/carousel.js'
  },
  ...

2. Still within webpack.config.js, add the following lines of code inside module.rules of our webpack configuration.

    ...
      filename: 'index.html',
      template: 'src/pages/index/index.html',
    }),
+    new HtmlWebpackPlugin({
+      chunks: ['carousel'],
+      inject: false,
+      filename: 'carousel.html',
+      template: 'src/pages/carousel/carousel.html',
+    }),
  ],

With these lines of code that we added so far inside our webpack.config.js, we are adding a new page called carousel. In case you are wondering why we have a a new entry of HtmlWebpackPlugin inside module.rules, it is really the only way to go as far as I know so far in terms of maximizing available webpack plugins in terms of generating html pages for each of the entry points we defined. What you can expect here moving forward is for you to create multiple instances of HtmlWebpackPlugin as you add more pages (through entry) into your webpack configuration.

Extracting code for reusability

After updating our Webpack configuration file, we’ll be doing a little bit of a side trip. Before we proceed to creating the files that we referenced with our webpack configuration, I will take you through some code extraction work to make some parts of our code globally reusable.

1. Using your terminal, remove these lines from your index.css inside ./src/pages/index.

-@tailwind base;
-@tailwind components;
-@tailwind utilities;

-body {
-  background: #fff url('Assets/images/bg.png') 0 0 repeat;
-}

2. Open global.css add the CSS that we removed from index.css:

/* Add these at the topmost */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

/* ... */

/* Add these at the bottom */

body {
  background: #fff url('Assets/images/bg.png') 0 0 repeat;
}

3. Using your terminal, go to ./src/assets and create a directory called js and create WebsiteGlobal.js inside it.

cd ./src/assets
mkdir js
touch ./js/WebsiteGlobal.js

3. Using your text editor, open WebsiteGlobal.js and add these lines of code:

import 'Assets/css/global.css'

const WebsiteGlobal = (function() {
  let instance

  function init() {
    console.log('Global script initiated...')
  }

  return {
    getInstance: function() {
      if(!instance) {
        instance = init()
      }

      return instance
    }
  }
})()


export default WebsiteGlobal

What I did with this WebsiteGlobal.js is I imported the global.css file here instead of adding global.css and other future global CSS files in the entry points of all pages. This is also why we extracted earlier some code from index.css and transferred it to global.css.

You will also see that on this page, we have a WebsiteGlobal singleton that I set up in case I need to add global scripts in the future.

4. Next, let’s make some changes in our home page entry point index.js inside ./src/pages/index/.

+import WebsiteGlobal from 'Assets/js/WebsiteGlobal'
import './index.css'

+document.addEventListener('DOMContentLoaded', function onDOMLoad() {
+  const websiteGlobal = WebsiteGlobal.getInstance()
+})

With these changes to the index entry point, we are integrating all the global dependencies that will be declared inside WebsiteGlobal.js into the homepage.

Creating new Javascript, HTML and CSS files

After extracted some of code that is specific to the home page into WebsiteGlobal.js to make some parts globally accessible, let us now continue by creating the files we referenced from the changes we did earlier with our Webpack configuration.

1. Open your terminal and go to the root of your project directory and run these to create the files.

cd /path/to/your/project_root
mkdir -p ./src/pages/carousel
touch ./src/pages/carousel/carousel.js
touch ./src/pages/carousel/carousel.html
touch ./src/pages/carousel/carousel.css

Please take note that you may also do this with your text editor.

Integrating Swiper Carousel

For the main part of today’s tutorial, we’ll be adding a Javascript UI plugin called Swiper. The reason why I chose this plugin to demonstrate to you how to add UI plugins is because it is a very good example of a Vanilla JS library that can be imported into our project using the ES6 import syntax.

1. Using your terminal, go to the root of your project directory and install Swiper.

npm install swiper

2. Using your text editor, open carousel.html inside ./src/pages/carousel and add these lines of code to add the markup for our new page.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Carousel | HTML5 Development Server & Build Tool With Webpack</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- This is where the CSS tags go from the output of the chunks defined in "new HTMLWebpackPlugin" -->
    <%= htmlWebpackPlugin.tags.headTags %>
  </head>
  <body class="carousel">
    <header class="max-w-lg mx-auto">
      <div class="w-24 mx-auto">
        <img src="<%= require('Assets/images/icon.png').default %>">
      </div>
    </header>

    <!-- Carousel page markup -->

    <h1 class="page-title">Carousel Demo</h1>

    <!-- Swiper markup -->
    <div class="demo-carousel">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="carousel-demo-slide">
            <img data-src="<%= require('Assets/images/furball-0.jpg').default %>" class="swiper-lazy" class="image">
            <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="carousel-demo-slide">
            <img data-src="<%= require('Assets/images/furball-1.jpg').default %>" class="swiper-lazy" class="image">
            <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="carousel-demo-slide">
            <img data-src="<%= require('Assets/images/furball-2.jpg').default %>" class="swiper-lazy" class="image">
            <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
          </div>
        </div>
      </div>
      <div class="swiper-pagination swiper-pagination-white"></div>
    </div>
    <!-- End of swiper markup -->

    <!-- End of carousel markup -->


    <!-- This is where the JS tags go from the output of the chunks defined in "new HTMLWebpackPlugin" -->
    <%= htmlWebpackPlugin.tags.bodyTags %>
  </body>
</html> 

In this new HTML file, you can see that we almost copied what’s from the index.html file. The only main difference is for this page is we added the page title and the markup that is aligned to the requirements by Swiper. For more information, please see Swiper’s docs.

In case you might be wondering where I got the images that I required in the markup named furball-*.jpg, I downloaded some images from Unsplash for this demo. If you want to copy the exact images that I used for this demo, you may download them here and add these images inside ./src/assets/images.

3. Using your text editor, open carousel.js inside ./src/pages/carousel/ and add the following lines of code to initiate our carousel and require WebsiteGlobal.

import Swiper, { Navigation, Pagination, Lazy, Autoplay } from 'swiper';
import WebsiteGlobal from 'Assets/js/WebsiteGlobal'
import 'swiper/swiper-bundle.css'
import './carousel.css'


const CarouselPage = (function() {
  let instance

  function initDemoCarousel() {
    Swiper.use([Navigation, Pagination, Lazy, Autoplay])

    const demoCarousel = new Swiper('.demo-carousel', {
      spaceBetween: 20,
      lazy: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      autoplay: {
        delay: 5000
      },
      loop: true
    })
  }

  function init() {
    console.log('Carousel script initiated...')
    initDemoCarousel()
  }

  return {
    getInstance: function() {
      if(!instance) {
        instance = init()
      }

      return instance
    }
  }
})()

document.addEventListener('DOMContentLoaded', function onDOMLoad() {
  const websiteGlobal = WebsiteGlobal.getInstance()
  const carouselPage = CarouselPage.getInstance()
}) 

4. Open package.json from the root of your project directory using your text editor add the following lines of code:

  "browserslist": [
    "last 2 versions",
    "> 1%",
    "iOS >= 8",
    "Safari >= 8"
  ],
+  "sideEffects": [
+    "*.css"
+  ]
}

This change that we just make is a workaround that allows us to import the core CSS files from Swiper using the import syntax. For your reference this is the link where I got this workaround from.

5. Using your text editor, open carousel.css inside ./src/pages/carousel/ and add the following lines of code to add styles to our carousel.

.page-title {
  @apply text-3xl;
  @mixin set-font-family;
  color: $colorPrimary;
  text-align: center;
}

.demo-carousel {
  width: 500px;
  background: $colorPrimary;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.carousel-demo-slide {
  position: relative;
  min-height: 500px;
} 

6. Go back to your terminal and on your project root directory, run npm-start, and visit http://localhost:3000/carousel.html on your web browser.

Your browser must show something similar to this:

If that’s what you see, then congratulations, you have successfully created a new page and installed a Javascript UI plugin. 🎉

Conclusion

That wraps up this part 5 of this series. With what we’ve accomplished today, our development server is pretty much complete in terms of accommodating all the essential features that a front-end developer needs when building a static website. I would like to add that you learning how to install Swiper earlier, you may also use the same technique to install other Javascript packages from NPM like lodash and moment to name a few. I hope that you start building something cool with what we have right now with our development server. In case you are experiencing any issues by following the instructions in this tutorial please visit this github linkfor the complete source code of this tutorial.

Next week, we’ll be wrapping up this series where I will share to you how to build your code for production.

Have a blessed week to you!

Hi! If you have any questions, suggestions, corrections, or constructive feedback about this post, please let me know. I will greatly appreciate it!💯