Hello
I've just started learning JavaScript and trying to create a multiplayer webgame using Node.js. I decided to use Amazon's web services to store the website and run the servers, but I can't figure out what exactly to do in order to load the website when a user goes to the url. I'm using Amazon's Elastic Beanstalk service to host the game, which includes storage for my html and js files, and compute servers for running a server when there are players. As far as I have been able to find out, when I connect to the site, one of my js files are run (either app.js or server.js). In order to load the website I need to send the user the html.
Unfortunately, I can't manage to properly send the html file without errors, because the html file links some scripts which are then not found because they haven't been sent.
I've never worked with servers before so I won't be surprised if the answer is embarrassingly obvious. There are 3 different areas in which I could use the help right now:
- Properly serving an html file to a user along with the necessary scripts
- Properly using Amazon's Elastic Beanstalk for hosting a website/webgame
- More appropriate suggestions for hosting than Elastic Beanstalk
Currently this is how I am trying to send the html file to the user (called index.js)
var express = require('express');
var app = express();
app.get('/', function(req, res){
res.sendFile(__dirname + '/Views/index.html');
});
var server = app.listen(3000, function () {
var host = server.address().address;
var port = server.address().port;
console.log('Example app listening at http://%s:%s', host, port);
})
And this is the html file containing the website and the entry point of the game
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Phaser - Tutorial</title>
<script type="text/javascript" src="../Scripts/phaser.min.js"></script>
<script type="text/javascript" src="../Scripts/States/Boot.js"></script>
<script type="text/javascript" src="../Scripts/States/Preloader.js"></script>
<script type="text/javascript" src="../Scripts/States/MainMenu.js"></script>
<script type="text/javascript" src="../Scripts/States/Game.js"></script>
<script type="text/javascript" src="../Scripts/States/Options.js"></script>
<script type="text/javascript" src="../Scripts/States/HighScore.js"></script>
<script type="text/javascript" src="../Scripts/States/Login.js"></script>
<script type="text/javascript" src="../Scripts/States/LoginSuccessful.js"></script>
<script type="text/javascript" src="../Scripts/States/LoginUnsuccessful.js"></script>
<script type="text/javascript" src="../Scripts/States/LevelComplete.js"></script>
<script type="text/javascript" src="../Scripts/States/GameOver.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
(function() {
// initialize the framework
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'game');
// add game states
game.state.add('Boot', Demo.Boot);
game.state.add('Preloader', Demo.Preloader);
game.state.add('MainMenu', Demo.MainMenu);
game.state.add('Game', Demo.Game);
game.state.add('Options', Demo.Options);
game.state.add('HighScore', Demo.HighScore);
game.state.add('Login', Demo.Login);
game.state.add('LoginSuccessful', Demo.LoginSuccessful);
game.state.add('LoginUnsuccessful', Demo.LoginUnsuccessful);
game.state.add('LevelComplete', Demo.LevelComplete);
game.state.add('GameOver', Demo.GameOver);
// start the Boot state
game.state.start('Boot');
})();
</script>
</body>
</html>
And currently my project file structure is as follows:
- root
- index.js
- Views
- index.html
- Scripts
- States
- ...
- phaser.min.js
- States
Any help on any at all would be greatly appreciated.
Thanks!
