Make Javascript module creation easier with Vite and automated GitHub Pages and npm publishing
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 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. (Maybe ChatGPT could have come up with a list of better names for me.)
The GitHub repo has an extensive REAME.md 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 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.
