Trouble in Publishing to GitHub Page

Phaser 3
#1

Hello, there.

I’m having a hard time figuring out how to publish my game to my GitHub Page. My game runs smoothly in my own localserver, but it seems like I’m missing something very basic when I’m about to publish it to my repo.

The error says:
Chrome:

Refused to load the image ‘https://blokymose.github.io/favicon.ico’ because it violates the following Content Security Policy directive: “img-src data:”.

Firefox:

Content Security Policy: The page’s settings blocked the loading of a resource at https://blokymose.github.io/favicon.ico (“img-src”).

Here’s the link for the repo:

Here’s the link for the site:
https://blokymose.github.io/InTheFallenStation-7-13/

Any ideas how to solve this problem?
Thanks!

#2

are you deploying the ‘dist’ folder to github pages or the main master branch?

the error that I’m seeing seems to suggest that it doesn’t know how to deal with the import statement because it is not loading the main.js file as a module but your dist looks like it is a version that works without module support.

I usually deploy to Github Pages with a specific gh-pages branch but I do believe you can pick a folder on the master branch as well although it may have to be called docs?

1 Like
#3

I’ve been done a few things that make some “progress”:

  • Deleting all folders in “dist” except for assets folder
  • Adding type=module to script tag in index.html
  • specifying the file path by adding (.js) when importing

But, I still don’t know how to import this “matter” file. I found this “matter” file under node_modules - phaser - types - matter.d.ts, but there’s still an error even though I have specified the filepath.

Loading module from “https://blokymose.github.io/node_modules/phaser/types/matter.d.ts” was blocked because of a disallowed MIME type (“text/html”).

Loading module from “https://blokymose.github.io/InTheFallenStation-7-13/src/lib/phaser.js” was blocked because of a disallowed MIME type (“text/html”).

It seems like the browser can’t recognize the file. How can I solver this?

#4

I put my demos on github page, and they work fine.
The secret is using webpack/esbuild tool to pack all ts/js files into single boudle js file.

1 Like
#5

Thanks for the suggestion, but I really don’t know how to start with this webpack thing. I tried to read its guide, and I still can’t figure out how to install it or even use it. I think they’re using a very high level English.

If you don’t mind, can you help me with this webpack? What’s the general concept of it and what are the steps to bundle my js files?

#6

Here is a project template of ES6/typescript.

1 Like
#7

Just to clear things up in case there’s someone out there who’s having the same trouble:

I ended up using the template Rex Rainbow is suggesting, which is this template made by Yannick.

I was having a hard time grasping the concept of webpack, but in the end, after you copy-pasted the entire folders of your game into ‘src’ folder, just type npm run build into the terminal.

Following that, /dist folder will be compiled by the webpack, and the only folder you want to publish to your GitHub Page is that /dist folder only.

And that’s it! Your game is now online.
If a 404 page shows up, try disabling cache in your browser, that might help.

Huge thanks to superTommy, RexRaimbow, and Yannick who are willing to help me. :smile:

3 Likes