Deploy Your Phaser3 Application to Heroku (in a few easy steps)
What is Heroku?
Heroku is a cloud platform that lets companies/developers build, deliver, monitor and scale applications. Developers can deploy their code written in Node, Ruby, Java, PHP, Python, Go, Scala, or Clojure to a build system which produces an app that’s ready for execution. The system and language stacks are monitored, patched, and upgraded, so it’s always ready and up-to-date. The runtime keeps apps running without any manual intervention.
How does the free version work?
Dynos: the heart of the Heroku platform
Instead of hardware management, you deploy an app to Heroku, which packages the app’s code and dependencies into containers — lightweight, isolated environments that provide memory, an OS, and an ephemeral filesystem. Containers are usually run on a shared host, yet are completely isolated from each other.
The containers used are called “dynos.” These dynos are isolated, virtualized Linux containers that are designed to execute code based on a user-specified command. Your application can scale to any specified number of dynos based on its resource demands.
Check out the 6 Dyno Types Below
If you’re a new developer like me or you just want to deploy a small application, you’re probably going to sign up for the free dyno type or the hobby dyno type. However, the point of this article is to deploy to heroku the “easy way” as long you have a relatively smaller application.
To deploy an application, Heroku will need three things from you: some source code, a list of dependencies, and a “Procfile” (a text file that indicates which command should be used to start the code running). The build system takes the application, its dependencies, and the language runtime and produces a “slug.” A slug contains everything needed to run the app, except for the operating system. Follow these simple steps to deploy your react/phaser application to heroku.
Assuming you have already initialized your repo, set up your package.json and server side code, you can just skip to the next section below (don’t forget to npm install). If you have not completed the actions above, check out my starter code here for setting up a phaser 3 application using webpack.
Let’s take a look at your heroku dashboard for a minute. Here you can see the default “web: npm start”
Heroku looks for a Procfile specifying your process types.
If no Procfile is present in the root directory of your application during the build process, your web process will be started by running npm start, a script you can specify in package.json. Generally, the start script would like something like this
However, if no Procfile is present, just add webpack in your start script.
If you are using my starter code, run “npm run start-dev” in the terminal and head over to localhost:3000 in your browser. You should see a black screen set up with Phaser3. Follow the steps below to deploy to Heroku using your terminal (assuming you already have a heroku account set up).
- heroku create your-app-name (creates a new empty application on Heroku, along with an associated empty Git repository)
- git remote -v (confirm that a remote named
herokuhas been set for your application). Click the heroku link in the terminal and you should see a default homepage.
3. git push heroku main OR git push heroku master
4. Check the link and confirm deployment
Conclusion
Although this is an easy way to deploy your phaser application, it is not suitable for larger applications.
Not using Phaser? The steps listed above could also work for other libraries; you can make changes in the package.json file to add the libraries necessary for your own application to run.
Lastly, thank you for reading this article. As a new software engineer, I find it vital to document hurdles I’ve overcome in hopes to reference my own work in the future and potentially help new engineers in the process.
Check me out at linkedIn.
Want to test your Big-O notation skills? Play the first game I helped create using Phaser3. https://one-big-ocean.herokuapp.com/