Using phaser through git, can't access phaser file

[drumnerd64]

Hi, I downloaded the repositories for phaser using Git and I am trying to access the phaser file in my game by having it find the file in the repo directory that the phaser javascript file is in. For some reason, even though the source is pointing to the right file, I get an error claiming that it cannot find the phaser.js file. Is there a reason for this? Could it be because I am trying to access the file in the phaser repository instead of making a copy to put in my game folder? Thank you in advance to anyone that answers my question.

[mattstyles]

Nah, the builds from the repo are just that, builds, if you serve them they will work.

Your issue is that you aren't serving it right, kind of impossible to diagnose from here, but, check all your paths, make sure you're serving the file/s properly (you should be able to access the JS file url when you're serving it), also, this is unlikely, but you might also want to check perms if you have git setup with some odd perms maybe whatever you are using the serve it is having a fit (this would be true of every project though, so, unlikely).

[drumnerd64]

Okay, because all i did was use the "git clone 'repo'" command to download the phaser repo. That I know of, the way I am trying to access the files from the phaser folder should be correct and pointing to the right directory. May I ask, what do you mean by "you aren't serving it right"? I am not sure what you mean by serving, unless you mean how I am calling the phaser JS file from my HTML file. I got it work work before, but that was when the phaser JS file was in the same folder as my game. As soon as I back it up one directory and point it to the phaser folder and to where the phaser JS file is, I get an error saying that it cannot get that file. I will post a picture later of my issue as well.

[mattstyles]

Are you serving from file? Or have you set up a web server (locally) to serve your project? I'm not sure if Phaser works correctly without being served (i.e. if the url is file:// then I dont think it'll work right, could be wrong though).

Given a directory structure like this:

- projects
  - phaser
    - build
      - phaser.js
  - game
    - src
      - index.html
      - index.js

If you included the phaser file like this in the html:

<script src="../../phaser/build/phaser.js"></script>
<script src="./index.js"></script>

And you are using a web server to serve the game directory as root, then the server knows nothing about the phaser directory and it wont recurse outside of its root (which is the game directory) I think due to safety so you'd have to serve the directory below that, or serve phaser some other way (cdnjs.com for example works great, the builds inside the repo should all be released builds so unless you explicitly need to build from source then cdn's will have the latest).

Note that I have used relative urls, this means they are relative the html page currently in the browser, if you were serving the game folder then there is no absolute path to the phaser folder, hence why the server can not serve it.

If, however, you were serving up the projects directory (in the example structure above), you could use relative or absolute paths, for example

<script src="phaser/build/phaser.js"></script>
<script src="game/src/index.js"></script>

And that should work just fine.

 

[drumnerd64]

The server I am using for the html file is a local server that I created using a Javascript file and Node.js. I have tried both methods that you listed above when it comes to the path for the html file, but both did not work. I have gotten it to work before but that is when I have the phaser file within the same folder as the html file and the game file.

 

 

[mattstyles]

That 404 just means that your server isn't serving the file, likely because it can't access it from fs.

Whats your directory structure look like at whats the working directory you're serving from?

Just looks like /phaser/build isn't above the server root. Most likely your server root is inside your project and so the server won't serve from outside its root.

[drumnerd64]

Since I made a server using Javascript with Express and Node.js, what is the best way to get the server to either serve outside of its root or get it to be able to access the phaser file?

[drumnerd64]

It is either I find a way to access it easily outside of the root folder for the server or clone the repo inside my project folder, which I would prefer not to do since I was looking at how to do it and it seems like it can be a bit troubling to deal with since I would have to make them submodules of my main project/repo folder.

[mattstyles]

I don't think you can make any server serve outside its root (its not a JS thing), its certainly not a good idea if there is a hack to do that.

Given that you aren't building from source, its just a static asset so what's the problem with either copying the file into a vendor or assets folder in your project (same as grabbing a download) or symlinking it in?

[drumnerd64]

Well is it possible to change the root folder that the server is accessing?

Because phaser is updated pretty often, I just wanted to eliminate having to copy the file over every time the framework is updated. That way, when I update it, the game always uses the newest version of phaser.

I am not building from the source because I am just creating a game that I made for one of my college courses using Phaser instead of Unity to get a better understanding of javascript. This is for my own personal experience.

I looked into possibly cloning the git folder within my project, which is also a git folder, but it seemed like it could get quite confusing having a git folder within a git folder.

[mattstyles]

Yes git submodules can get awkward, I've seen a few attempts with very large projects to get this working nicely and it doesn't quite live up to the dream, I've also seen many of those attempts ditch submodules in favour of other approaches.

On 7/25/2016 at 1:53 AM, drumnerd64 said:

Well is it possible to change the root folder that the server is accessing?

Yes, if you adopt a folder structure similar to the one I posted then you serve from the projects folder, that means both your game folder is accessible and your Phaser folder is also accessible, the server will have no problems serving anything from those folders (aside from permission issues, but you'd get a 403 rather than a 404 ordinarily—I don't know how you have coded up your server but if you're using an express static serve module then it'll 403 from a perm issue and 404 for not found out of the box).

I did a smoke test using the structure from the post above before commenting, but, to reiterate, these steps work just fine (I'm assuming you're using a bash shell even on  Windows, I'm imagine you're comfortable with bash, the commands used are pretty obvious, the only one not so is `vi` which will open up an editor and, in this case, create the files, but get the content into files however you like, indeed, all these steps can be performed using other methods if you're not comfortable with the command line).

$ npm i -g serve
$ mkdir -p projects/game
$ cd projects
$ git clone [email protected]:photonstorm/phaser.git
$ vi game/index.html

```html
<script src="/phaser/build/phaser.js"></script>
<script src="/game/index.js"></script>
```

$ vi game/index.js

```js
console.log('Hello Phaser')
```

$ serve ./

By default the serve module will use port 3000, so navigate to that in your browser. It'll display a folder/file navigation system when there is no index.html to load, so navigate to game and it'll pick up the index.html and you can confirm in the network tab that everything is loaded up just fine, that'll be at url `localhost:3000/game/`.

If you don't like the /game/ url then either whack your index.html at root (inside the projects directory) or you'd have to set up a server that'll serve game/index.html when you hit root, fairly straight forward to do but outside the scope of this answer or question.