Ready Player React: How to Build a Video Game With JavaScript — Part 4
In this last installment of “Ready Player React,” all of our hard work has paid off and we’re ready to release our games to the world! We’ve journeyed from concept to the final steps of deployment, following through from planning in Part 1, refining and testing in Part 2, to enhancing performance and finalizing features in Part 3.
This chapter will guide you through picking a domain name, choosing a hosting platform, creating a deployment pipeline, and post-launch feedback.
So get ready to hit “continue” as we jump into the final phase in this series — Deployment!
Launch Checklist
Deploying your game involves a final check to ensure everything’s set for launch. Your pre-deployment checklist should include:
- Code Optimization: Check your code for efficiency, ensuring it’s DRY, well-documented, and free of console errors (and warnings) that will cause your deployment to fail.
- Meta Data & SEO: Change the default information in the head of your index.html file. Enhance your title tags, descriptions, and keywords to reflect your game’s content accurately, making it easier for search engines to index and users to find your game.
- Security Checks: Ensure that user data is stored securely such as salting and hashing passwords, and properly resetting cookies and tokens when the game session has ended.
- Domain Name: Your game needs a place to live where it can be easily found online. Hosting services will give you a generic name for free, but you can also add your own custom URL.
Pro Tip: Consider purchasing a custom domain name for your game. I got vibecheck.today from namecheap.com for only a few dollars!
Hosting
It’s time to choose a forever home for your game. The good news is you have tons of great hosting options, however, that can lead to confusion with picking the right one.
Developers have a wide range of hosting options to choose from depending on your project requirements:
- Self-Hosting on a Dedicated Server: Offers full control over the hosting environment, allowing for custom configurations and optimizations.
- Platform as a Service (PaaS): Providers like Heroku automate infrastructure management, simplifying deployment and scaling.
Cloud Services: AWS, Google Cloud, and Azure provide scalable and flexible hosting solutions for large player bases. - Static Site Hosts: Netlify and GitHub Pages are ideal for static sites, offering easy deployment and maintenance using a Git pipeline.
Each platform has its unique pros and cons and it’s important to take time to research your options. Keep in mind that PaaS providers offer convenience over cost savings, and may be too expensive for hosting a project of this size. Self-hosting options are cost-effective and offer greater control; however, they require a deep understanding of backend networking and security.
GitHub Pages and Netlify are the recommended choices for hosting a self-contained, static app of this size. Netlify was chosen as the best option for ‘Vibe Check’ for its simplicity and integration with Github.
Getting Started
Netlify stands out for its simplicity and efficiency, offering continuous deployment (with instant rollbacks ) from Git across all of its plans, including a free tier!
It’s easy to get started with creating an account and I recommend using your GitHub credentials: https://app.netlify.com/signup
Next, install the Netlify CLI tool using this guide from the docs:
Deploy your Create React App project with Netlify CLI
You can deploy your project from the command line using Netlify CLI.
- To ensure you have the latest version of Netlify CLI installed, run this command from any directory in your terminal:
npm install netlify-cli -g2. In the directory for your project, run the following command to create a new Netlify site:
netlify init3. Follow the prompts to create your site, select a team if necessary, and optionally create a site name. If you already initialized a Git repository, you can authorize your Git provider and set your build command and directory.
Here’s a quick start guide for linking up your Github account to Netlify:
You did it! Congratulations on deploying your very own video game using React! This fully optimized and playtested game is ready to share with the world and start collecting feedback.
Feedback
Now that your game is live, you can start collecting feedback from actual users. This transition from development to production offers a unique opportunity to find those pesky edge cases. This fresh perspective can be used to guide future improvements and bug fixes by revealing key aspects of user engagement.
“This game’s got such an intriguing premise — coming up with words before the beat hits. It really makes you laugh at how many words you actually know. Clever, challenging, and a whole lot of fun!” — React Jam Judges
Hearing this feedback from the hackathon committee was incredibly validating. Having gone from concept to deployment with minimal React skills and even less game design knowledge was a huge milestone! Receiving such positive feedback from the judges was icing on the cake underscoring this challenging and rewarding experience.
Getting Help
This process would have been nearly impossible without support from the official Reddit and Discord communities. These platforms allowed me to engage with other developers, playtest their games, ask questions, and get invaluable insights when I was feeling lost.
These interactions not only gave me a sneak peek at game development but also highlighted the importance of collaboration in the dev community, offering lessons that extend far beyond the boundaries of this hackathon.
Acknowledgments
You can play all ~30 of the finished games on the React Jam website:
All games: https://reactjam.com/winners
You can play the official React Jam-hosted version of ‘Vibe Check’ here: https://vibe-check.winter-2023.reactjam.com/
Learn more about React Jam and how you can join the next challenge: https://reactjam.com/#faq
Conclusion
Throughout the “Ready Player React” series, we’ve journeyed from concept to deployment. Along the way, we’ve learned the importance of careful project planning, testing and playtesting, optimization, and hosting.
We were met with several challenges along the way such as using the HTML audio element for gameplay and the overly-ambitious use of technologies like Storybook. These experiences highlight the importance of finding a good balance of both innovation and grounded expectations when creating a video game.
Reflecting on the overall experience, the process of game development feels very similar to the traditional approach of web development with some major differences in UX/UI and deployment. This series not only chronicles the technical steps to build your very own game from scratch but also celebrates the collaborative spirit of the React dev community.
This journey was equal parts exciting and exhausting! The rush of beating the deadline and having a game accepted was thrilling — doing it solo was hard! This experience gave me a deep understanding of project management, advanced debugging, and a deep appreciation for the creativity and passion required to bring a video game to life with React.
If you’ve enjoyed this series follow me on Medium and connect with me on social media to get more of my articles on coding, mindfulness, and project management.
Sources
Resources
https://www.reddit.com/r/reactjam/
