History mode on Netlify with redirects causes some static files to not load

Support
, ,
#1

Edit: I fixed this by looking through the Godot exported javascript and finding out where the .pck and .wasm files were being called (actually ended up being simple, thought it was gonna be deeper than that). I then added /games/gamename/ before the filename being imported. This works for now, though I would like to know how this could be resolved with the _redirects file if anyone has any thoughts

Edit: To preface this post, I’ve just tried something that narrowed the problem down to the _redirects file. So I know that’s the issue, just not sure how to resolve it. What I did was remove history mode and leave the _redirects file, which was my actual suspicion that it was the problem and turns out I was right. It is not working with history mode off but the _redirects file still there. So maybe there’s some sort of line I can add to make that work. Reading up on it now

Hey guys! I’m having a small issue with a portfolio website that I’m building to show off games that I’ve developed in Godot. I’m having an issue with Vue’s History mode and Netlify redirects that is keeping the games files from loading. I only have 2 routes: / which showcases all the games, but they’re just videos with a link to play, and /games/:game which is where you play and read about the game. This route needs to load a GameName.pck and a GameName.wasm to work properly. The way I got this to work was by putting these two files in /public/games/GameName/ to match the route. This would avoid me having to dive too deep into the Godot exported code and change the file paths.

So this worked perfectly locally, but when I push my code to Netlify with history mode on and a _redirects file that looks like this: /* /index.html 200 , I get the loading symbol where the game should be and this error in the console:

CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found ef bb bf 3c @+0

This is the same error I was getting locally when I couldn’t figure out where to place the GameName.pck and GameName.wasm files so that they would be loaded in.

The two things I’ve tried so far are

  1. npm run build locally to make sure that it works fine that way and that the static files are being copied appropriately into /dist .
  2. Turning history mode off, removing the _redirects file and pushing my code. Then when I go to /#/games/gamename on the server, it does work fine. So I know that it has to do either with history mode itself or more likely with my _redirects file (admittedly I don’t understand 100% how either work).

Any ideas where I need to be placing my files or what to add to the _redirects file to make this work with history mode on?

#2

Hi @andrewjaco, welcome to the community!

I’m not familiar with how Godot works but if you could share the site you are seeing this issue on, we can take a look to see what redirect rule would work for you. Without knowing more, there’s not much I can suggest but glad you got things working for now, though.

#3

Hey Dennis! Thanks for the response. I didn’t want to overwhelm anyone with the code from the export, because it really is a lot. I’ll give a summary of how it works and then I’ll let you tell me the best way to share the code with you.

Essentially, when I export the game to a website from Godot, it creates 4 files, a Pong.html, Pong.js, Pong.pck, and Pong.wasm. What I’ve done is taken the HTML from the body of Pong.html into my component that shows the game. The same Pong.html also holds 1. a call to the external script Pong.js and 2. a script tag with inline JS. I’ve taken the code from both of those and added them to my own ‘pong.js’ stored in /public/assets/games/pong/pong.js and that is added into the component on mount. I then add the Pong.wasm and Pong.pck to /public/games/pong/. This works locally because my route for this component is games/pong, so it looks in this directory for those two files. However, when adding the _redirects and pushing to Netlify, I think that those files get ignored due to me redirecting all /* to /index.html.

The fix that I’ve implemented so far, is that I found in the exported javascript, where the Pong.wasm and Pong.pck were being called from and changed them to /games/pong/Pong.wasm and /games/pong/Pong.pck. This works, but I think the ideal situation would be that the less I have to edit the Godot exported code, the better, and I would like to understand the Netlify _redirects a little better.

Any ideas you have, I appreciate them

#4

Hi, @andrewjaco, Netlify serves the files in the locations that they are given to us in.

If you put example.html in the base of the publish directory public like so:

./public/example.html

then the file will be found at the path /example.html.

If you put the file here (still with the publish directory as public):

./public/path/to/subdirectory/example.html

then the file will be found as /path/to/subdirectory/example.html.

If you put Pong.html , Pong.js , Pong.pck , and Pong.wasm all in the same directory, then Pong.html can refer to Pong.js as /Pong.js. However, if Pong.js is in the subdirectory ./games/pong/ (relative to the directory where Pong.html is found), then Pong.html will need to refer to Pong.js there (as /games/pong/Pong.js). That is because that is where the file was stored under the publish directory.

If you want to use a redirect to change the apparent location of the file, it can be done using a redirect like so:

/pong.js    /games/pong/pong.js    200

Then the HTML can reference the file as just /pong.js but the content of /games/pong/pong.js will be sent.

Alternatively, just move all the files into ./public/ (instead of ./public/games/pong/) and no redirect will be needed.

If there are other questions or about this, please let us know.

#5

I think that gives me a better understand of how the redirects work. I appreciate you taking the time to explain that to me!

2 Likes