Vite preview not serving all files.

[past holly]

When I run npm run dev (vite), I can access http://localhost:1024/ in my browser and access my page.
However, when I run npm run bp (vite build && vite preview), going to http://localhost:4173/dist/ doesn't show the page. In the devtools network tab, it says that requesting index-BUZ0kpNC.js returns 404, despite it existing in the dist folder. I want to publish my site to github pages as a final result.
Used libraries:
rapier2d
pixi
My code is available here:
https://github.com/Charlieee1/beartooth

[scarlet ruin]

I believe vite preview takes care of serving from dist already, so you should just use http://localhost:4173

[past holly]

I tried that too, it doesn't work

[scarlet ruin]

Hi. I just got back from debugging your code

The reason it doesn't work is NOT because of wrong url

It's because of Pixi.js and Rapier not integrating too well with Vite

Here are a 2-step fix:

Step 1: Change treeshake option to false in vite.config.js file

Reference: https://github.com/dimforge/rapier.js/issues/278. Honestly I'm not sure why. Maybe Vite doesn't really work too well with module that imports WASM like Rapier. According to the Github issue, it's either turning off treeshaking, or use @dimforge/rapier2d-compat instead. I opted to try turning off tree-shaking and that worked

Step 2: Wrap the main script inside an async function. I don't know why this is the case either, but I noticed that the Pixi.js doc recommends that you initialize the Pixi app inside an async function. So I made an async function, and copied-pasted all the code into inside it, and somehow that worked magically

Like this

import * as PIXI from "pixi.js";
import RAPIER from "@dimforge/rapier2d";
import { EntityFactory } from "./entityFactory";
import { World } from "./world.js";
import { Player } from "./player.js";

window.app = {};

const Papp = new PIXI.Application();
app.renderedWorld = Papp;

// Create an async main function
async function main() {
  // PUT EVERYTHING INSIDE THIS FUNCTIOn
  await Papp.init({
    width: window.innerWidth,
    height: window.innerHeight,
    backgroundColor: 0x1099bb,
    resolution: window.devicePixelRatio || 1,
  });


  // Create a world
  let world = new World(RAPIER, new RAPIER.World({ x: 0.0, y: -50 }));
  console.log("world", world);
  app.world = world;

  let entityFactory = new EntityFactory(RAPIER);

  window.ptom = 40; // pixels to metres scale
  window.physicsTop = window.innerHeight / ptom;
  window.physicsRight = window.innerWidth / ptom;

  // Set up non-player rigid-bodies
  for (let y = 2; y <= physicsTop - 2; y++) {
    for (let x = 1 + (y % 2) / 2; x <= physicsRight / 2 - 2; x++) {
      let ball = world.addObject(
        entityFactory.createDynamicCircle(
          { x: x, y: y },
          0.5,
          Math.round(Math.random() * 0xffffff),
        ),
      );
      ball.collider.setDensity(0.05);
    }
  }

  ...
  
  document.body.appendChild(Papp.canvas);

  // Resize function
  function resize() {
    Papp.renderer.resize(window.innerWidth, window.innerHeight);
    world.updateAll();
  }

  window.addEventListener("resize", resize);
}

// Invoke `main` function at the end
main();

[past holly]

Thank you so much

That seems like magic lol

I'll try it out today

[past holly]

after implementing your fixes, http://localhost:4173/ works but http://localhost:4173/dist/ doesn't. the good thing is that it works!

thank you again