I’ve had a hard time figuring out how to get a Game deployed on Heroku. This is why I’m going to show you how to create a brand new node.js project, integrate it with Webpack and Phaser 3 game engine using Express as a Webserver, and deploy it to , so we can see it live. Phaser 3 Heroku Requirements In order to follow this tutorial you will need these tools already installed on your local environment: Node Npm Git Heroku CLI ( ) https://devcenter.heroku.com/articles/heroku-cli (or the code editor of your choice) VSCode For this article, we assume that you have previous experience working with Git and Github. Steps Start a new project Create a repository and clone it into your local environment. GitHub Open a new terminal window in your project’s root path and initiate a new npm project using the following command. Use the default configuration (Press enter when asked) $ npm init After a successful installation, you will now have the file added to your project’s root. package.json Install core dependencies Now, we’ll need to install and modules using npm commands. Webpack, Phaser 3, Express $ npm install webpack webpack-cli --save-dev $ npm install phaser@ $ npm install express 3.23 .0 Express is needed because Phaser 3 needs a Web Server to run on. Before we move one, we need to create 2 important folders for our app, the folder, where all of our application code will reside, and the . Create them in your project’s root directory. Until now, your project directory should look like this: /src /dist Webpack configuration Create a file inside your project’s root directory and add the following code: webpack.config.js path = ( ); .exports = { : , : { : , : path.resolve(__dirname, ), }, : { : [ ], }, }; const require 'path' module entry './src/index.js' output filename 'main.js' path 'dist' module rules This configuration will tell Webpack to read what is on the file and output it to the . Therefore, we will need to You will create and import all the logic for your game inside the . /src/index.js /dist/main.js add an index.js file to the /src folder. index.js Express server configuration Create a file inside your project’s root directory and add the following code (Which is a default implementation of an Express server): server.js path = ( ); express = ( ); app = express(); DIST_DIR = path.join(__dirname, ); HTML_FILE = path.join(DIST_DIR, ); app.use(express.static(DIST_DIR)); app.get( , (req, res) => { res.sendFile(HTML_FILE); }); PORT = process.env.PORT || ; app.listen(PORT, () => { }); const require 'path' const require 'express' const const '/dist' const 'index.html' '*' const 8080 The above code will tell express to boot and listen to port 8080 by default if no environment variable was supplied. The express server will serve the file on . Now we can start a new terminal window in our project’s root directory and type the following command to start our server: PORT /dist/index.html localhost:8080 $ node server.js Yes, we are missing an index.html inside our folder, so we create it and add a script link to the file (which will be automatically generated when we run the Webpack build command) inside the tags of the index.html file. /dist /dist/main.js <body> </body> Phaser 3 Game <!DOCTYPE html> < = > html lang "en" < > head < = > meta charset "UTF-8" < = = > meta name "viewport" content "width=device-width, initial-scale=1.0" < = = > meta http-equiv "X-UA-Compatible" content "ie=edge" < > title </ > title </ > head < = > body style "margin: 0; padding: 0;" < = > script src "main.js" </ > script </ > body </ > html Phaser 3 game configuration I won’t go too deep into this topic because there is a lot of information and good tutorials from out there. However, what you need to know is that all of the phaser game configurations should reside inside your file. Phaser /src/index.js This is an example of the game configuration for my game (I know). The Witcher If you like it don’t forget to star the repository. Phaser ; MainScene ; MainMenuScene ; GameOverScene ; LeaderboardScene ; InstructionsScene ; config = { : Phaser.AUTO, : .innerWidth, : .innerHeight - , : , : { : , }, : { : , : { : { : }, : , }, }, : [ MainMenuScene, MainScene, InstructionsScene, GameOverScene, LeaderboardScene, ], }; game = Phaser.Game(config); import from 'phaser' import from './scenes/mainScene' import from './scenes/mainMenuScene' import from './scenes/gameOverScene' import from './scenes/leaderboardScene' import from './scenes/instructionsScene' const type width window height window 5 parent 'divId' dom createContainer true physics default 'arcade' arcade gravity y 300 debug false scene const new Heroku deployment Assuming that you already have installed the Heroku CLI, now you need to create an important file that will tell Heroku how to run your app and start the server using node, this file is called and we’ll create it in the project’s root directory and inside it, add : Procfile web: .js node server That’s it, you are ready to deploy your app to Heroku and go live. So first of all, we’ll commit all our work to our git repository. Later, we need to create a new Heroku app from the terminal using the Heroku CLI. For this, just go to your project’s root directory in a new terminal and type: $ heroku create This will link your actual local repository to a brand new Heroku app. Finally, push your project to Heroku using: If you were working on git’s master branch: $ git push heroku master If you were working on any other branch : $ git push heroku <your-branch>:master Once it finishes compiling, go ahead a type in order to see your game live heroku open $ heroku open Happy coding! As previously mentioned I have a public repo on GitHub for a game I developed using Phaser 3 — Webpack — Express, . this is the live version Previously published at https://medium.com/@diegoreyes1212/how-to-deploy-phaser-3-node-js-express-webpack-game-to-heroku-tutorial-8a813f31502c
