hello vite! my rocky transition to a module bundler!

hello world! it's deeana again.

as i say in the title, i finally made the jump from delivering my source code directly to neocities to using a module bundler! this is just so i can optimize the code as best as i can AND so i can stop relying on javascript DOM manipulation on a ton of my pages! this blog post is gonna talk a little bit through my process, some fun things that came from this, some major challenges i faced (and there were A LOT!!!) and a fun little plugin i made that may or may not be useful if you also use vanilla html css and javascript :3

so it started with my postcss script. as mentioned in that blog script, i learned node.js for the first time because i was tired of having to worry about browser compatibility. with that, i wondered what my site would look like if i could optimize the pages as best as i can. i spent WAY more time than im willing to admit trying to do manual optimizations on my js code, but i kept running into just more and more hurdles and time wasters and problems kept arising. so i decided to make the call and try and migrate my site to vite! how hard could it be? hahahaha

it was really hard

i was learning a completely new development process and NONE of it made sense to me. i did a ton of reading on module bundlers and static site generators, watched probably every single youtube tutorial under the sun about production in vite, and despite all of it, i kept running into more and more errors and issues. issues such as the following:

• my js imports were all breaking
• my localhost dev environment wasnt showing me any of my files
• ALL of my file paths and href paths were screwed up
• i tried implementing cleanURLS several times (and failed spectacularly)
• npm run build was only giving me one file
• my youtubeAPI scripts stopped working completely
• my stylesheets were overriding each other
• the vite plugins i wanted to use were old and deprecated :(
• the vite plugins that werent were ALL MADE FOR REACT I DONT WANT TO MAKE A REACT APP PLEASE I LIKE USING VANILLA HTML

needless to say, i was kind of losing my mind. luckily, i managed to slowly piece things together bit by bit. i started with this vite tutorial series on youtube. i already watched a REACT tutorial and got bored, so i skimmed through this series to only pick up skills i'd need if im using vanilla JS, such as import modules, reworking my folder structure, and figuring out the public directory (it took me shockingly long to understand what the hell was going on)

i would go back to that vite tutorial every now and then to double check things whenever i learned something new, but this series alone got my dev server totally working!!! (yippie!!!)

after going through the tutorial, i found this function from a reddit thread that would make it so i don't need to constantly update my build script and import every single html file into my vite.config.js!

function getHtmlEntryFiles(srcDir) {
  const entry = {};

  function traverseDir(currentDir) {
	const files = fs.readdirSync(currentDir);

	files.forEach((file) => {
	  const filePath = path.join(currentDir, file);
	  const isDirectory = fs.statSync(filePath).isDirectory();
    
        if (isDirectory) {
	  // If it's a directory, recursively traverse it
	  traverseDir(filePath);
        } else if (path.extname(file) === '.html') {
          // If it's an HTML file, add it to the entry object
          const name = path.relative(srcDir, filePath).replace(/\..*$/, '');
	  entry[name] = filePath;
        }
  });
}

	traverseDir(srcDir);

	return entry;
}

(note: dont ask how i got the colors in there, you will be disappointed.)

anyways, yay!!! now npm run build actually works and delivers my files!!! then i installed postcss, cssnano, and autoprefixer, converted most of my css and javascript to make full use of javascript modules (as per the tutorial mentioned above), and SHEBANG!!! i have a vite project!!!

now you may think that was the end of the story, but you would be so... so wrong...

wait, but how do i do... ?

with the full power of npm and node.js in my hand, i wondered... how could i optimize my website? i mean, it's mostly static, most of my javascript is for loading static assets... why not try and turn those into just... pure html? maybe using... a plugin?

so there i went on a search for vite plugins. stack overflow thread after stack overflow thread, i started LOSING MY MIND!!! every plugin i found was made SPECIFICALLY for certain frameworks like vue or REACT (i hate react!!!). i even looked at switching to astro to make my site totally static, but i was NOT about to convert all my code to Astro code. ive gotten incredibly used to creating html using vanilla js, so most of my code for, say, our system page, is built to return a document fragment with every profile recursively appended to it.

so astro was out of the picture, and plugins weren't helping. i kept finding more and more threads asking for the exact features that im looking for and NO responses, or even worse, a deprecated plugin (aaaa). the plugins i did install had AWFUL documentation and, when i figured out how to actually use it, i got errors telling me it was built for typescript or something. genuinely this was one of the most draining experiences of my life. however, this led to one of the most awesome and fun coding projects i've ever started.

fine, i'll do it myself!!!

SO THERE I WENT!!! digging deep into vite documentation, the plugin API, back to the vite tutorial again trying to make my own plugin. i learned that vite plugins are basically just a javascript function, so i decided to go for it.

after a lot of tutorials that really didn't help much, i decided to go straight into the vite plugin documentation (my worst nightmare).

shockingly, i found reading documentation to be pretty soothing. i had already read a lot of the FFMPEG and BASH documentation to figure out how to use terminal more efficiently, so it honestly came super naturally to me. my real problem came with actually applying it.

• how do i edit the html???
• okay i can edit the html but how do i treat it like a DOM???
• okay i just need to use JSDOM but why am i getting Error: 'document' is not defined
• ohh i see i just had to pass the 'document' object through the function...
• HOW DO I KNOW WHICH FILE IM WORKING WITH????
• i hate putting all my imports at the top of the file i wish i could just import them inline
• oh wait... i can!!! awesome!!! now i can input my files through my plugin options.
• WHY ARE NONE OF MY 'options' NOT WORKING???
• what do you MEAN you stopped building because you can't process module 'undefined' i LITERALLY made a fallback for if there wasn't an input module.

in hindsight, a lot of my issues probably could've been solved if i had just tested the code regularly and implemented my error handling from the beginning...

however, after SEVERAL DAYS of thread searching, doc reading, and antidepressants... i finally did it... my first fully self written and self researched functional code... functional code tailored for my exact needs because i designed it to solve a problem specific to me... genuinely one of my proudest moments.

conclusion: vite-vanilla-prerenderer.js

there really isn't anything quite like just creating. working on something for days and weeks on end and actually seeing it become a reality. im sure this is quite simple for people who are going to school for coding and whatnot, but i'm genuinely just proud of myself and impressed with myself that i was able to dive head first into a hobby like coding and create something that was fully me. made for me and by me.

i've always looked up to others in the system like cassie for her just love for art and making art for her, or ynai for just making youtube videos for the sake of making youtube videos. i feel like all of us create stuff FOR us. we make videos we wanna watch, we draw art that we wanna look at, we make music we wanna listen to. i feel like making my own program was my own personal version of that, in the same way cassie or ynai or sarah all have that for themselves.

this whole process of learning to code brought me back to when we would play minecraft back in middle school. we were always known as the redstoner or the command block person. we literally had a whole series back in the day about our crazy command block creations! our minecraft channel was gonna be a redstone / command block channel first and foremost. i feel like doing technical stuff like this is just super fulfilling because, just like back in the day, it's all ultimately just to have fun and make things that we think are neat!

did i have to make a whole plugin to optimize this one step of my web dev process? no, not technically. i just thought it would be a neat challenge and a fun experience! and despite all the headache, it absolutely was. a link to the source code for my vite-vanilla-prerenderer will be at the bottom of this page, for anyone else who is specifically looking to pre-render their static vanilla javascript files that generate DOM fragments to save half a second on page load.

that's all i have for you today! thanks for reading my blog post and i hope you have a beautiful and wonderful day! i'll see you all in the next coding blog post!

best,

deeana! :D