3.5 Web Application Deployment (Glitch and Heroku) - Working with Data and APIs in JavaScript

💻github.com/CodingTrain/Intro-...
Let's figure out how to deploy your project to a server so that people can access it and use it. We will check out two hosting options: Heroku and Glitch.
🔗 Glitch: glitch.com/
🔗 codingtrain-the-weather-here....
🔗 Heroku: www.heroku.com/
🔗 the-weather-here.herokuapp.com/
🎥 PREVIOUS LESSON: • 3.4 Hiding API Keys wi...
🎥 FULL COURSE: • Working with Data and ...
🚂 Website: thecodingtrain.com/
💖 Patreon: / codingtrain
🛒 Store: www.designbyhumans.com/shop/c...
📚 Books: www.amazon.com/shop/thecoding...
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 p5.js: p5js.org
🔗 Processing: processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-o...

[@sivach8667]

One of the most beginner-friendly channel I've seen... From "zoom-in, zoom-out" to show the code, to explaining the big-picture of what we're doing... It's great.

[@GlitchDotCom]

Thanks for using Glitch! We love your videos

[@TheCodingTrain]

Thanks for making such a great platform!

[@v0oi]

Glitch I Have A Question How To I Use PHP In Glitch> index.php puts me in the file select

[@chanukhumanthem2242]

Ll0l0l) pmme select tyypupopoo{Ooooooooooooooooooop

[@hanseldsilva2393]

@@chanukhumanthem2242 your keyboard's broken

[@Anto-mi5pn]

How to make the website's name the same as my repo name? It's randomly generating a name for my site?

[@AtinSinghal]

The enthusiasm is surreal. I was kinda sleepy when I discovered your channel and opened your first video and now I’m like energised completely, have watched 3 of your videos & going back to my work desk instead of going for a nap.

[@thecoffeegod]

I really enjoyed watching this whole course! Good job with the presentation Dan :)

[@XiagraBalls]

Daniel, that was an excellent series. Woke up at 3am this morning (damn coffee! ☕️😀) and binge watched all 3 sections. Great job! 👍🏻

[@marvinlemos]

I've just finished this course!!! Thank you so much Dan, for inspiring people to do great things.

[@MarkSatin1]

I really like your energy and excitement about coding, and I appreciate that you're always the first to admit you probably made a mistake somewhere/forgot some piece of code. It's so honest.

[@thales2008]

Watched the whole series and I can say that this is probably the best course on this subject that I've ever had. Never really understood the server side of Javascript quite well, but now it seems so much easier! Splendorous teacher. It would be also amazing if someday you could continue the series using a frontend javasciprt framework, like React haha

[@grainfrizz]

Daniel, you're saving the world one coding video at a time. We don't deserve you. But thank you for existing. Love from the Philippines.

[@kirammanenjoyer]

I learn so much fron this cours ( I've done my first ever multiplayer game I was so happy). Thanks Dan!

[@AdityaSingh-kt9uy]

Can you please guide me I am unable to do so after so many tries

[@jonbikaku6133]

Dont have to remind you how beautiful your videos are. I have been telling my highschool students who are learning Java and processing to keep an eye on your videos and they're already making awesome stuff like pong and space invaders. Keep motivating people dude!

[@ahmadkassem7883]

I really enjoy to watch you explain things so smoothly and clearly, I am learned a lot from you

[@DamienzTheBand]

Fantastic tutorial! Love the energy. Glitch seems like a great place to make a dev project with a team or a group in learning.

[@bhatnagarcapital]

I am amazed .Earlier I did not think much of this channel .But I am blown away by this lecture .Wow and Amazed .In love with you man .Thanks .Completed deploying a project just because of this piece of art .❤️

[@godetarnaud1005]

Yes ! Finally finished this awesome course, I learnt a lot while doing it and I'm really thanks full to you for making such great and interesting tutorials :D Now it's time for me to start another one of your tutorials ^^

[@davidklap7517]

I have learnt so much in the past 2 hours or so, you have a talent for teaching and presenting information, thank you 🙂

[@viruspk]

I watched the whole course and it is great, keep up the good work 🌈🚂

[@rinkumonani961]

Its 2 a.m. right now and I don't need coffee to stay awake! What is this enthusiasm of yours?! Great Videos! Great Series!

[@bluedragonn1]

Course finished, I feel so satisfied with this course-tutorial. I am studying telecommunications and i feel so inspired to do more stuff.

[@liamnightingale4088]

You are such a treasure! Exactly what I needed to get into coding. ♥

[@medicaldevices832]

Hello Daniel, the series was fantastic and awesome. I'm new in programming and your videos really helps and also encourages me to continue to this long journey. Hope to get more help and counselings from you. THANK YOU VERY MUCH...

[@codyw9296]

Great job with the presentation and explaining complicated procedures in a simple way. Keep these tutorials coming!

[@patrickc.6183]

THANK YOU! I had my .env variables missing from my Heroku deployment, which needed to be configured (as you showed) to work properly! You rock! :)

[@stephenmaro7219]

THANK YOU FOR THIS AMAZING PLAYLIST, I had a similar project and this was the most helpful thing, the way you deliver the information keeps us motivated, continue the good work.

[@davidblake8612]

Just watched this course plus a few other videos. Really good content. And really well taught. Thanks so much.

[@Thehighschoolscientistforever]

dude just keep making videos like these -- any video you make will be amazing to watch and will have a boat load of knowledge so just keep posting

[@c810549]

This series of video is truly amazing. There were a lot of enlightening moment while watching your video. A lot of concept used be fussy for me, now I feel I’m truly understood after watch your videos. Your are such great teacher. Thank you for million times.

[@Danielt240397]

your enthusiasm while explaining is amazing! keep going dude...I'm sure you deserve more subscriptors

[@jonaszangetzu]

Thanks!!! It was an awesome!!! I saw all the modules and learn a lot, I will see more playlist from your page, keep the good work :)

[@techmarinar]

thanx man , I found this channel by Accident by its was full of stuff I was looking for for long time , thank you very much

[@michaelcapone8913]

You really are my favorite youtuber for coding. Thank you very much. I am a university student in CS and I watch your video. They help me a lot.

[@jrichalot]

Watched the whole course and it was fantastic. So many ideas to implement! Thank you so much. My oh so modest contribution... you're doing so many console.log('something'), you could use a neat VSC extension called Turbo Console. Once installed you select a var/let/const and press CTrl+Alt+L (or whatever the MAC OS equivalent is) and it inserts a controle.log(that_variable) on the next line even referencing in a string the function the variable belongs to. It saves a bit of time and a few typos.

[@mostafamohammed4853]

The second course to watch from you... you are an amazing man all love ❤

[@KamilKaszubski]

Thanks for this series - it was really easy to follow and explanatory!

[@ericbeard7007]

Yes, I added a laptop to my toolbox. Because this playlist was so awesome, I did not throw my laptop across the room. Im stuck with Google ads api trying to get search volume back from seedKeyword but uses oauth and dev token. This has been so helpful, thank you! Was not sure how tom hide the credentials in folder but use variable so other cant see. Thanks again you really earned my subscribe and praises!

[@yujiyamamoto6551]

Nice scenario, nice video editing skills, nice teaching structure you have there!

[@chrismorris5241]

I wish I had Daniel's tutorials years ago when I started using Heroku.

[@sby15tv]

I've learned a looooot! Easy to follow and understand. I went ahead and use that knowledge to build my own app. Thank you much!!!

[@kongzilla2897]

I really enjoyed the whole course. Thank you so much :)

[@gideonaswani2449]

Awesome video series! Thanks, Dan for sharing your knowledge. I've learned quite a bit

[@sheenad1324]

I really enjoyed watching this series! Want to learn more about password authorization,, token etc

[@thaylapedroso3489]

Thank you very much for this course, I've learned a lot!!! I loved it!!!

[@anuraghazra4772]

thank you for doing this playlist... i was totally frustrated by yesterdays live stream going nuts.

[@TheCodingTrain]

Thanks for sticking with me!

[@ankitjaiswal5453]

It was a really good series. Thanks for making this. I learned a ton from it.

[@yulinglin8508]

Easy to follow! Thank you so much, I have learnt a lot from your tutorials!

[@rolandnelson4694]

You are a fantastic, fun, fervent, faithful teacher. Thank you for all the effort put into this and for making this so so so easy and fun. I've been infected with your energy

[@alfredbenefoboahene4]

Coding Train :) , I love the name and I had a wonderful "Training" :D

[@geoffwagner4935]

finally got my first website loaded on another device, firewall setting found a great video. that was exciting i tried this a few times before. set a "new inbound rule" with "allow edge traversal" under advanced.

[@smugane]

There are instructors out there then there is Dan💪. What a super lad, appreciate the course. Where can your students showcase their project remixes?

[@cptmaca]

Thanks for the excellent series! Great teaching, very fun and really helpful!

[@TheCodingTrain]

Thank you for the support and the kind feedback! ❤️

[@wakengames2318]

Thanks for this series. It really helped!

[@saramamsarang6586]

Hey man, thanks you surely deserve my subscription , you’re awesome and a wonderful teacher!

[@abeechr]

Fantastic, as usual Daniel. Quick request: How about a Docker tutorial?

[@Samji3877]

Thank you 'The Coding Train' really helpful video

[@janicuri8258]

Actually the best channel to learn programming.

[@satyamohlan1270]

This course was amazing! by the way there is also firebase hosting I think you should cover that too

[@ronir.kpradhan1785]

This man is amazing............So much of knowledge for free. Thanks Dan loved it

[@VelizFrancia2012]

Thanks you so much. I really enjoy the whole series¡¡

[@gnkarn00]

thank you for the whole series , i learned a lot from you . i m thinking on gathering data from different sources, add them to a node hosted DB , then be able to serve that data to the Home automation system via the REST sensor API .

[@chanmyaemaung]

This tutorial is really awesome and very valuable for me. If possible can you make a one tutorial which is how to make i18n nodejs and express run multilingual language on our website? Like kind of tutorials up above what I said and requested to you, there is no one who never trying to explain making the projects with i18n nodejs on KZbin properly. I never skip ads on your channel when I learning along with you. I appreciate you. :) I will looking for you coming the next tutorial what I requested.

[@nimittsingh7094]

Great video man respect ur efforts

[@jacobjones8099]

I adore you as a person and educator. I am currently applying to fullstack jobs, I can say that if I land one you would be a large contributor to that success. Thank you so much and please keep up the amazing work. Also if you are open to any suggestions, I would love a course on data structures and to see your take on some code challenges(codewars for example).

[@MrDiavolo212]

so, what happened? did you get a job as a fullstack?

[@geoffwagner4935]

"set up a rasberry pi in the wood or something" this i absolutely crazy how versatile this is. im actually getting reasonable with express servers. really changed my entire idea on website building . may hav to get a pi now xD lol most amazing thing ever

[@gme0ver24]

Great content as usually, learned a lot once again.

[@ahmadali-yf6mb]

I love your energy man !

[@akashthoriya]

You are a great tutor. Thank you from the bottom of my heart. Please make tutorials on - fetch data and post text and images on Facebook, WhatsApp business API. There is zero perfect tutorial for these things. It's hard to understand and I know it'll we easier with you.

[@irvinghenriquez8231]

wow you saved me SO much time lol thank you!

[@ygvanz]

I loved this course a lot. Hopefully we get another similar course to this, but with a database with MongoDB.

[@PanosGosfp7]

Great course! It's important to mention that heroku's filesystem is "ephemeral" and only the actual files in the repo persist. Therefore, with every new redeployment, the db files will be gone!!!

[@hm970826]

Love this tutorial!!! and I love ur shirt too where did you get it lol

[@Just_An_Idea_For_Consideration]

Excellent Course! thx

[@IsfhanAhmed]

Best Heroku tutorial in the world

[@subhamshaw1726]

I had put the database key in .env file and locally my app worked but not in Heroku server. So thanks, it was specifically what I was looking for.

[@bulverismo]

thanks, i watched everything, you are amazing!

[@jginvincible1998]

This was so helpful! Thank you!

[@xybarra3702]

Love this series, I've been trying to move to server side work for a long time and watching through this whole thing has been great. My only question is why this playlist is unlisted

[@TheCodingTrain]

I'm still working on preparing some of the thumbnails and descriptions so rolling out the videos to public slowly over time.

[@RajanKarmakarRaj]

Hi Daniel, I am very happy with your video series. I want you to make video for deploying server side code for node. And as well as how to work with real database, google firebase, mongodb atlas and aws with serverless database service. I know I am asking too much. And it will take time. But it will be helpful for us like me who wants to learn programming with javascript. I learnt a lot from your channel. And As I am a entry level programmer these videos are beginner friendly. Thanks a lot to you. Looking forward to see more learning videos into your channel.

[@raha5184]

thank youu. you're the best! 🚂✨

[@arttledsoulfindspeace]

I literally learn about this in class yesterday 😂 we used fire base instead

[@tuminzee]

Thank you for making this video!

[@user-or7ji5hv8y]

This was really clear.

[@josephjoy8390]

thanks man helped me alot

[@healthandhappiness9550]

I could not watch it all, I watched it here and there. I hope to spend more time where I could try to understand.

[@TheLshallo]

This is a really nice series and it really inspired me getting away from php and using a node server.

[@bigvlogger2940]

How are you doing with node

[@learningacademixca8143]

This was great. Thank you!

[@arslanahmed1311]

Best explanation ever.

[@KevinMadalossoVeiga]

great video!!!

[@ykli1441]

1. As of 26 Dec 2019, for those who have trouble cloning Git project to Glitch, credit to craigsdennis, read the post below support.glitch.com/t/unable-to-clone-repo-from-github/16418/14 2. When encoutering "Check /app/package.json command not found" error, please refer to glitch.com/help/failstart/ Thanks Coding Train! Keep up the great work!

[@shayanmz]

Hey, once again great vid! Quick question though, where did you get your whiteboard and what are the dimensions of it - I've been looking for a huge whiteboard i could get for my house!

[@Milchreiz]

Very nice tutorial. Great Job Daniel. But one important fact is missing. Heroku dynos removes the local filesystem after lifetime. To store the database you should use a database as a service approach. For example mlab. It would be a nice theme for the next episode. Here from the heroku docu: During the dyno’s lifetime its running processes can use the filesystem as a temporary scratchpad, but no files that are written are visible to processes in any other dyno and any files written will be discarded the moment the dyno is stopped or restarted.

[@TheCodingTrain]

Yes, this is such an important and good point!

[@IsaacAsante17]

Exactly what I need.

[@kevinfredericks2335]

I really wish I had watched this before I went on the heroku rabbit hole. Everything works but heroku has its own ideas about how to do things. It's a good step toward Google Cloud/AWS where the configuration is nearly limitless.

[@FiveElementNinja]

Great tutorial! It should be mentioned though that Heroku uses an ephemeral filesystem and Heroku dynos are cycled every 24 hours. Since NeDB uses the filesystem for the database, you will lose data every 24 hours. You'd have to switch to MongoDB or something similar. I ran into this problem on my first Heroku project. Hope that helps.

[@TheCodingTrain]

Ahhh, this is such a good point. Thank you for the comment.

[@FiveElementNinja]

@@TheCodingTrain Sure thing! Glad to help!

[@bobsmithy3103]

could sqlite be used instead or would we have to use something like mysql and postgresql?

[@fictitiousforce9048]

@@bobsmithy3103 SQLite has the same issue I believe, it would also get wiped every 24 hours

[@ManjunathManja1227]

Thanks a ton, Dan!

[@morphman86]

A note on Git commits: Never, ever commit to a main branch! Your main branches will be Master and possibly Dev, if you have a dev server (perhaps a RasPi in your own home, to test if it works deployed) and maybe, if your customer is big enough, Staging/Test (a third server, sortof like Dev, but your customer can access it, to see changes before they go live). You never want to commit directly to these branches, because that makes it harder to see what changes has been made and when. It also makes it harder to roll back certain changes. Let's say, for example, that your server gets two new features, a brand new REST API handler and a controller to take care of routing. 5 months down the line, you've applied numerous patches since those two features went live, and you notice the routing does not forward to the correct error page, when an error occurs. Instead of 301, you get a generic 500. You update it, push the commit, pull on the server and that's that. 5 more months down the line, you've applied numerous patches and now you notice that the routing was working correctly from the start, but the new version has a potential security risk in it. You want to remove just the Routing update, but keep everything else. How do you do this, when you've committed to Master this whole time? If you instead create a separate local branch for every feature or hotfix, and keep everything to do with that feature or hotfix in that branch. When something like this happens, you merely roll back the branch Feature/Routing one step, reset Master to the commit before you updated Routing, then merge in the now rolled back Feature/Routing and all branches made after. You don't need to push the branches, if you're alone at developing the application. If you're working in a team, it's a good idea to push all branches, so anyone on the team can make these selective rollbacks. But if all commits are directly to Master, you will either need to go back and reference file history, rewrite RoutingController to mirror the earlier version, or branch off from the current Master, roll Master back, then Cherrypick Commit from the new branch and select everything except the Routing update, which could be hours of checking merge conflicts and could potentially involve thousands of files.

[@MikeSamways]

Top series!!

[@madebylewis]

Netlify seems the go-to for new projects nowadays

[@TheCodingTrain]

I'll look into it!

[@patrikcarlsson3687]

Awesome content! But you should add more of a disclaimer with keys etc.

[@patrikcarlsson3687]

Never add key as is!

[@amrantomer8005]

I'v just finished watching (and coding) throw the whole series. I think I'v learned allot. Just a quick question: Where can I learn more deeply about how internet works? I mean, the whole HTTP, GET and POST isn't really clear to me. I feel like the fetch() API makes things too easy.. Keep up the great content.

[@choonghuh]

thank you sensei