Migrate from Vitreum to Webpack AND/OR other services

[5e-Cleric]

Issue

Vitreum has not been maintained for the last 4 years. Since then we have been running using a fork by @calculuschild, but this might prove like an inefficient idea in the long run.

Conversation has started talking about moving from Vitreum to Webpack or another bundling system, this issue is here to log that project's ideas and conversation.

It uses common tools: React, Browserify, and LiveReload. so we might need to install other tools as well.

[5e-Cleric]

#3479 might be related to Vitreum

[calculuschild]

Vitreum is mostly a wrapper for Browserify, which is the bundler, with some default settings baked in. It also includes Babel (tranform new JS into backwards-compatible JS), and includes watchify, livereload, and nodemon which are the "auto-restart/rebuild" tools. Then it adds a string to the top of the bundle that launches the React app on the client. That's basically it.

• Browserify is not getting updated much anymore (occasionally hiccups on newer JS), but we could update it to Webpack.
• Babel should be kept. We have overwritten most of the Vitreum defaults in our buildHomebrewery.js script anyway.
• Watchify tells Browserify to rebuild when a change is detected. Don't think it works with other bundlers but Webpack should have a similar tool
• Nodemon should be kept. Lets us auto-restart the server when rebuild happens, for development
• Livereload no longer works with newer browsers (like Nodemon but for restarting the browser page)

[Gazook89]

Thanks for clarity on this. Livereload I can live without, but it seems some frameworks still have something similar.

[5e-Cleric]

Can confirm Webpack has a similar thing, but i think i used a diferent command for it in Axe, not sure.

[G-Ambatte]

I have done some initial work on migrating Homebrewery to Browserify et al directly, in order to eliminate the technical debt that is Vitreum.

My working theory is that once we can plainly see how Browserify et al are actually being used by Homebrewery, then we can start to investigate and learn how to migrate from them to other tools, using the guides and articles on the internet at large that we would struggle to find if we were still trapped behind the obfuscation layer that is Vitreum.

---

To be clear, this is VERY much a learning experience for me, I'm figuring it out as I go and hopefully not unintentionally breaking anything. So if you know why something is the way that it is, or you know of a better way to achieve the goal, please don't hesitate to speak up.

[G-Ambatte]

Breaking it down, to the best of my knowledge, Vitreum has been providing the following functions to Homebrewery:

• headTags.js - provides the Meta React component. Not sure if there's a reason that this should live in the bundler rather than the codebase directly.
• transforms/asset.js - a wrapper for an async file copy function
• transforms/less.js - a wrapper for less.render
• transforms/pack.js - a wrapper for browserify

At this point in time, I have commented out watchFile and liveReload as Dev only tools.

[G-Ambatte]

I had not previously realized that we now have two systems for injecting Meta tags. So there exists the opportunity to standardize to a single Meta tag system. The Vitreum Meta tag is used on the Share and Edit pages to add <Meta name='robots' content='noindex, nofollow' />, and on the Home page to add <Meta name='google-site-verification' content='[content_redacted]' />.

In theory, at least, the ogMeta tag system used in app.js could be extended to incorporate these additional tags; alternatively, the ogMeta tags could be shifted to use the existing <Meta> React components.