Open 5e-Cleric opened 4 months ago
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.
buildHomebrewery.js
script anyway.Thanks for clarity on this. Livereload I can live without, but it seems some frameworks still have something similar.
Can confirm Webpack has a similar thing, but i think i used a diferent command for it in Axe, not sure.
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.
Breaking it down, to the best of my knowledge, Vitreum has been providing the following functions to Homebrewery:
Meta
React component. Not sure if there's a reason that this should live in the bundler rather than the codebase directly.less.render
browserify
At this point in time, I have commented out watchFile
and liveReload
as Dev only tools.
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.
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.