---
title: Make Javascript module creation easier with Vite and automated GitHub Pages and npm publishing
date: 2023-03-08T07:31:00-05:00
author: John Morton
canonical_url: "https://supergeekery.com/blog/make-javascript-module-creation-easier-with-vite-and-automated-github-pages-and-npm-publishing"
section: Blog
---
# Make Javascript module creation easier with Vite and automated GitHub Pages and npm publishing

*March 8, 2023* by John Morton

![Vite builder screenshot 2](https://static.supergeekery.com/site-assets/vite-builder-screenshot-2.png)

Making a “share” button on a webpage is something that I repeatedly do. I recently decided to package up this code into an easily re-usable Javascript module. You can check out the [Progressive Share Button on npm](https://www.npmjs.com/package/progressive-share-button) if you’re interested in the end result.

The process of creating that module made me realize I didn't have a good workflow to create a Javascript module. As I built the Progressive Share Button, I built a second project to turn my workflow into a template that I could reuse. Allow me to introduce the poorly named [Vite Module Builder with GitHub Pages & npm publishing template](https://github.com/johnfmorton/vite-module-builder-w-ghpages-npm-template). (Maybe ChatGPT could have come up with a list of better names for me.)

The GitHub repo has an extensive [REAME.md](https://github.com/johnfmorton/vite-module-builder-w-ghpages-npm-template#readme) file that describes the workflow. I’ll summarize it in a few bullet points.

## What the workflow template does:

* Provides a development environment using Vite
* It uses Typescript for the development of your module
* The build process creates both ECMAScript and CommonJS versions of your final module
* The build process also creates a type definition file for your module 
* The demo HTML page used during development can be published to GitHub pages with built-in GitHub Actions
* The template includes a second GitHub Action that will publish your module to NPM when you change the version number in the package.json file and push your changes to GitHub
* There is a Node script included in the module that will customize the template files when a new repo is created.

## A video walk-thru of the workflow

The [workflow’s documentation](https://github.com/johnfmorton/vite-module-builder-w-ghpages-npm-template#readme) goes into detail about each item. If you’re a visual learner, I’ve also made a video walking through the process of setting up a brand-new module repo. I hope you find this useful. Feedback is welcome.
[YouTube Video](https://www.youtube.com/watch?v=fqL4Td5hYY0)

---

**Tags:** vite, ecmascript, common, module, npm, github-actions, github