So I am working on a vite React project for a bit and I’m new to it. I have a root index.html and the index.html in dist folder. I put some includes in the root index and some in dist folder. The includes have have filenames like index-xxxx.js where the x’s are a series of random numbers and letters. Some sort of hash. I was wondering how I can use this file and thought maybe I should just make copies of the generated files with a name without hashes. I have a function where I load all the files in src and I use the index-xxxx files to make the function not load the files in the dist folder.

I have an App.js file and a bunch of source files but no src/index.html. I am trying to make an embeddable widget in react. From what I can tell I have to do it in the root index.html but maybe I’m supposed to do so in a different file? I’m not sure but I think the generated files are supposed to help with clearing the cache right?

In short, what can and can’t I do with the index-xxxx generated files and do I even need a function to make sure the files in dist folder don’t get loaded. Also any resources to help me learn more about vite production files and what can be done with them would be appreciated.

small snippet from root index.html

//the two lines that break the build 

<script type="module" crossorigin src="/feed/dist/assets/index-2b2832fe.js"></script> 
<link rel="stylesheet" href="/feed/dist/assets/index-9c4d15f8.css"> 


/*********************************************************************

this function is where i try to work around these generated files to load all the rest
*******************************************************************/
function loadFilesIfNotInDist(jsFile, cssFile) {
  // Get the current path
  var currentPath = window.location.pathname;

  // Check if the path does not contain "/dist/"
  if (!currentPath.includes('/dist/')) {
    // Function to load a script file
    function loadScript(file) {
      var script = document.createElement('script');
      script.src = file;
      script.type = 'module';
      script.crossOrigin = 'anonymous';
      document.head.appendChild(script);
    }

    // Function to load a CSS file
    function loadCSS(file) {
      var link = document.createElement('link');
      link.href = file;
      link.rel = 'stylesheet';
      document.head.appendChild(link);
    }

    // Load the JS and CSS files
    loadScript(jsFile);
    loadCSS(cssFile);
  } else {
    console.log('Current path contains /dist/, files will not be loaded.');
  }
}

//has to be update after every build
loadFilesIfNotInDist('dist/assets/index-2b2832fe.js', 'dist/assets/index-9c4d15f8.css');

snippet from dist/index.html

<script type="module" crossorigin src="/feed/dist/assets/index-2b2832fe.js"></script> 
<link rel="stylesheet" href="/feed/dist/assets/index-9c4d15f8.css">