Netlify and Heroku deployment for Socket IO snake game

[@TraversyMedia]

Nice 😊

[@slavaefremov473]

Man, thank you so much for this video and for the websockets and snake tutorial. Thanks to you i was able to build a multiplayer blackjack app with websockets and deploy it on heroku. On the latter part i've spent a couple of days till i figured out that my server was building fine, heroku just didn't serve it from the right folder. It is really great how you give not only instructions but more of a developer mindset when you explain things, like in the snake game you talked about thinking ahead when you build the game state. Thank you for your work.

[@cheese3038]

Thank you so much for this video! Everything is expertly explained. Literally would pay good money for content like this!

[@andyhue5457]

Who knew I’d learn so much from mr.beans

[@kobebriansantos5558]

Thank you fricking so much, been trying to deploy my MERN app for the whole day now!!!!! You're a life saver

[@robotosailr2129]

This was what I needed. I have been looking for a tutorial that fully explains how to do this.

[@EchoVids2u]

Best deployment tutorial regarding this topic I've seen yet. Very clear explanation. thank you!

[@the_full_stack_junkie]

Great content man hope your channel booms after the Traversy Media upload💪🤓

[@Hungryturtledev]

One can only hope :) A great experience either way.

[@anujshrestha8670]

Seriously learned about canvas and socket.io in a single lesson. Thanks a lot for the meaningful video

[@Hungryturtledev]

You are welcome 🙂

[@chriscoyc]

what a amazing tutorial! Some time ago i was searching for a way to deploy from a sub dir and i didn't found a easy way, and you showed a really simple way, thanks for the content!

[@dominikd9834]

I was looking for this tutorial for ages. Thank you. Subbed, liked.

[@stevenaschoff]

Outstanding video! Very clear and all information was pertinent! Solved my issue with heroku magic with port injection ... wasn't showing up anywhere with my google fu but you clearly explained it and everything just started working for me. Thanks for publishing!

[@hamsterking9364]

I learned so much with your tutorials, and finally I was able to finish my game, tks so much I appreciate

[@kaaneii]

That was a mission, but I finally got it , thanks g, top man

[@aleb687]

from traversy too. Did not know you man, and you are really good! I liked those interactive explanatory visuals you put in the back while you explain something, and also this deployment video. I have been coding for about a year and learned everything on my own, but it is nice to have someone explain stuff the way you do. The buildpack for example I did not know.. in fact I am still wondering how I managed to deploy a few backendish apps in the past !!

[@Hungryturtledev]

Welcome aboard!

[@Andreas-hy7ob]

To anybody that gets a error on deployment: Make sure you add the flowing to your package.json "scripts": { "start": "node app.js" }, Ofc edit the node app part to the correct file name. Dident notice it in the video, and have been fighting this easy solve for quite awhile, so i thought id let future people know!

[@T12321]

This video has earned you a sub. Thanks!

[@undermaker4535]

Great tutorial! Just one question: why doesn't the red snake move on it's own when the game starts? I've tried to set vel of x to 1 of the red snake.

[@theemacsen1518]

Nice to see that you are back dude! Really missed you LOL

[@Hungryturtledev]

I'm glad to be back. Hopefully this time I will stick around for longer. Any videos you would like to see?

[@theemacsen1518]

@@Hungryturtledev Hmm.... maybe some Mern projects?

[@elnazalimardani]

You ARE the best! haha! Thank you for the calm explanations!

[@NewDay-gt7]

Thank you so much for this video, it was informative and interesting, I love your personality

[@Hungryturtledev]

Thank you!

[@57Javier747]

It works like a charm! Thanks for sharing Adrian

[@Hungryturtledev]

You're welcome!

[@bronstein007]

This is great! Two questions: 1. What is the reasoning behind not hosting everything on heroku? 2. If someone decides to host everything on heroku, is the buildpack and PROJECT_PATH env var necessary? Thanks so much! I've been wondering about how deployment w/ web sockets works.

[@sohamtalele]

exactly what I was looking for!

[@ishanvarshney9054]

your content is awesome buddy!

[@Hungryturtledev]

I'm very glad you like it! I will be producing a lot more content! I'm excited

[@andreas63383]

great tutorial! as a beginner to javascript, this snake game really helped me learn sock.io and online JavaScript. question tho, and it may seem stupid but how would i add in images for the snake, food and background instead of having them as coloured squares?

[@claralautre4238]

Thank you this saved me !! 👌

[@swoorp]

No dislikes yet!! Love the info you provided in this video

[@MaxwellMcKinnon]

I'm experiencing latency when I play the game with a friend. Is there anything inherent to the game code that would be causing the latency? We seem to be able to play other AAA multiplayer titles for example, so I don't think it's our computers or internet connections. Awesome tutorial, thanks a lot

[@shashankagarwal9301]

Heya, I've been experiencing latency too, were you able to fix yours?

[@Amandeepsinghjaura10]

Great video, but can't we upload both frontend and backend on heroku ?

[@Hungryturtledev]

We definitely can. I just prefer netlify for frontend. That plus using both exposes people to more options. But if you want to put it all on heroku 100% do it, it's a great solution

[@katiepatton8932]

Yeah I also wanted to double check that I could deploy it all on heroku. I'm picturing a project like this: repl.it/@templates/Socketio-Chat-Template#index.js where you use express from the server to expose the static content. Would this work with a heroku deployment?

[@Slokingseba]

I have a problem "heroku features:enable http-session-affinity" requires another arguemnt, either -a and I have to specify a app or -r and a i have to specify a remote distination, what should i put here?

[@Slokingseba]

Aha, you have to connect to your github repository and write this commands in git bash! If someone is confused how to do that, follow this kzbin.info/www/bejne/iHiym2ivfZyYrM0

[@FlavioZanoni]

Very helpfull, thanks !!!

[@rsk2002]

Thank you ❤❤

[@herbertk9266]

Thank you

[@yadday5153]

How did you handle CORS? Did you need to?

[@arcticnerd5994]

Whats the advantage of using both Netlify and Heroku? I've just been deploying on heroku.

[@310-q1c]

I get the PROJECT_PATH is undefined error when trying to deply. HELP

[@ronaldc8634]

Is it possible to do it cleanly with a shared directory?

[@Ranyyz]

No matter what I do CORS errors are always happening. How do I update it to make it work?

[@abdelkaderbennaoum3882]

On server.js, do const io = socket(server, { cors: { origin: "*" }, });

[@Ranyyz]

@@abdelkaderbennaoum3882 Didnt work :(

[@MaxwellMcKinnon]

What's the advantage of splitting the deployment between Heroku and Netlify, rather than just using one or the other?

[@HardcorePanda]

netlify doesnt support backend deployment like running a nodes server etc. i would use heroku for both frontend and backend deployment instead of seperating.

[@max_mlr]

Hello, It’s not working for me I get a 404 error

[@abinjacob36]

Bro I get 429 status error code ,how can I fix it

[@muadlala]

I really liked the video, I used socket.io V3, and now I get a CORS error, so... Please help ??

[@venomo12]

I have the same issue, Have You found he solution?

[@undermaker4535]

I'm no longer getting a game code Can someone please help me please, I tried a lot of stuff and I'm getting desperate. Here's what happened: After successfuly running the game via npx-live server (old video method) several times, it's not working anymore and I can't figure out why. It will load the html page but it will not display the room key anymore. It just says "Your game code is:" and then it's just blank. I tried get a new copy of the source code which worked few times then again I'm getting the same error. And now even if I get a fresh copy I will instantly get the error where it shows no game code

[@lohithnh3496]

Even I'm getting same thing, please tell me if you find the solution

[@TomTheCat]

I keep getting CORS error, even though I did everything exactly as it was shown in the video(s) - so I have socket.io version 2.x. This error drives me crazy, since I’ve been trying to solve it for days now, but still cannot figure out the solution by myself. What sould I do, can anybody help me, please? 😩

[@zonfr]

Have you tried to add this code in your server.js ? : const io = require("socket.io")({ cors: { origin: "*", } });

[@TomTheCat]

@@zonfr Thanks for your reply. I modified the code as you suggested above, then installed the newest cors (v2.8.5), but unfortunately, this did not solve the problem either.

[@rask1978]

@@zonfr I LOVE U OMGL.MEZE

[@richardalex1130]

@@TomTheCat same problem, cors error

[@Purpleshirts]

I got this working by setting the cors origin to true. i.e. cors: { origin: true, methods: ["GET", "POST"], credentials: true }

[@ianmubangizi6721]

Hey Adrian can you please show us your dev setup - terminal, os, and vim config?? if possible

[@Hungryturtledev]

I definitely want to do a video to clear it all up because I do get a lot of questions about it. Super quick rundown though - I use Arch linux, xfce terminal and I usually use tmux but I tend to avoid that in videos because it could get confusing. My vimrc and other dotfiles can be found here: github.com/adiman9/dotfiles

[@CameronAudet]

@@Hungryturtledev Your skills in VIM are out of this world. I would love a video on not only how you have it set up but how you are using it so fluently!. Thanks for the great video. (Show keystrokes in the video? :shrug: :)

[@Hungryturtledev]

@@CameronAudet I would love to do a series on how I use vim. It's taken me a long time to get to where I am and there are a lot of things I wish I knew when I started. There does seem to be a lot of interest so maybe I'll do it sooner rather than later

[@CameronAudet]

@@Hungryturtledev I can't wait, your Vim skills are majestic.

[@BrainWavesVillain]

I don't understand. Why not host backend and frontend on the same platform?

[@Hungryturtledev]

Netlify doesn't support stateful backends as far as i'm aware (it's just functions) which is required for this project and static hosting on Heroku isn't as nice. With that said I figured it was also a good opportunity to introduce different platforms to an audience who want to learn.

[@MaxwellMcKinnon]

@@Hungryturtledev Ah thanks for the explanation!

[@fhilipknows6000]

im getting this error when i try 5:05 » Error: Missing required flag: » -a, --app APP app to run command against » See more help with --help

[@Andreas-hy7ob]

Same, have you found a solution yet?

[@57Javier747]

Type in the folder you create the app heroku apps It will show all heroku apps you got. then you applied changes on app you want. heroku features:enable http-session-affinity -a quiet-sea-74691 which quiet-sea74691 is my app i want to change the feature

[@Andreas-hy7ob]

I had multiple issues, so i messed alot around. Dont rember how exactly i solved that issue, but i did solve another by adding the flowing to your package.json "scripts": { "start": "node app.js" },

[@57Javier747]

​@@Andreas-hy7ob the only problem i had it was this heroku cli missing flag, and now its working , I'm in Ubuntu 20.04. Which OS are you working?

[@ferrugemjavascript9269]

To anybody that wants a more simple version to deploy I made this fork with express github.com/alexsad/multiplayer-snake

[@eugeniogonzato]

Dear @ Hungry Turtle Code I like so much your video and I your way. I like to share my experience with your tutorial, first time I try in my local server I ran in to a 'cors' problem, so looking for around in the web I find this solution that works for me ``` const server = require('http').createServer() const cors = require('cors') const io = require('socket.io')(server, { cors: { origin: 'localhost:8080', methods: ['GET', 'POST'] } }) io.on('connection', client => { console.log('connesso') client.emit('init', { data: 'hello world' }) }) server.listen(3000) ``` I share with you only for information. Thanks

[@hansomekim1219]

It didn't work exactly as described in this video. Mine gave me the below heroku build log error on deployment. I fixed it by deleting my yarn.lock file, and committing those changes and redeploying from there. Just trying to help out anyone else who might run across the same issue! -----> Building on the Heroku-20 stack -----> Subdir buildpack app detected -----> Subdir buildpack in server creating cache: /tmp/codon/tmp/cache created tmp dir: /tmp/codon/tmp/cache/subdir0v6KJ moving working dir: server to /tmp/codon/tmp/cache/subdir0v6KJ cleaning build dir /tmp/build_3abdf7cb_ recreating /tmp/build_3abdf7cb_ copying preserved work dir from cache /tmp/codon/tmp/cache/subdir0v6KJ to build dir /tmp/build_3abdf7cb_ cleaning tmp dir /tmp/codon/tmp/cache/subdir0v6KJ -----> Node.js app detected -----> Build failed ! Two different lockfiles found: package-lock.json and yarn.lock Both npm and yarn have created lockfiles for this application, but only one can be used to install dependencies. Installing dependencies using the wrong package manager can result in missing packages or subtle bugs in production. - To use npm to install your application's dependencies please delete the yarn.lock file. $ git rm yarn.lock - To use yarn to install your application's dependences please delete the package-lock.json file. $ git rm package-lock.json help.heroku.com/0KU2EM53 ! Push rejected, failed to compile Node.js app. ! Push failed

[@calcio437]

I use vercel, the easiest way in the world!

[@calcio437]

but netlify is super interesting if you have a organisation! is free when vercel isn't for organisations