Make Javascript module creation easier with Vite and automated GitHub Pages and npm publishing

Mak­ing a ​“share” but­ton on a web­page is some­thing that I repeat­ed­ly do. I recent­ly decid­ed to pack­age up this code into an eas­i­ly re-usable Javascript mod­ule. You can check out the Pro­gres­sive Share But­ton on npm if you’re inter­est­ed in the end result.

The process of cre­at­ing that mod­ule made me real­ize I didn’t have a good work­flow to cre­ate a Javascript mod­ule. As I built the Pro­gres­sive Share But­ton, I built a sec­ond project to turn my work­flow into a tem­plate that I could reuse. Allow me to intro­duce the poor­ly named Vite Mod­ule Builder with GitHub Pages & npm pub­lish­ing tem­plate. (Maybe Chat­G­PT could have come up with a list of bet­ter names for me.)

The GitHub repo has an exten­sive REAME​.md file that describes the work­flow. I’ll sum­ma­rize it in a few bul­let points.

What the work­flow tem­plate does: #

• Pro­vides a devel­op­ment envi­ron­ment using Vite
• It uses Type­script for the devel­op­ment of your mod­ule
• The build process cre­ates both ECMAScript and Com­mon­JS ver­sions of your final mod­ule
• The build process also cre­ates a type def­i­n­i­tion file for your mod­ule 
• The demo HTML page used dur­ing devel­op­ment can be pub­lished to GitHub pages with built-in GitHub Actions
• The tem­plate includes a sec­ond GitHub Action that will pub­lish your mod­ule to NPM when you change the ver­sion num­ber in the package.json file and push your changes to GitHub
• There is a Node script includ­ed in the mod­ule that will cus­tomize the tem­plate files when a new repo is cre­at­ed.

A video walk-thru of the work­flow #

The workflow’s doc­u­men­ta­tion goes into detail about each item. If you’re a visu­al learn­er, I’ve also made a video walk­ing through the process of set­ting up a brand-new mod­ule repo. I hope you find this use­ful. Feed­back is wel­come.