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

description
💻https://github.com/CodingTrain/Intro-to-Data-APIs-JS 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: https://glitch.com/ 🔗 https://codingtrain-the-weather-here.glitch.me/ 🔗 Heroku: https://www.heroku.com/ 🔗 https://the-weather-here.herokuapp.com/ 🎥 PREVIOUS LESSON: https://youtu.be/17UVejOw3zA 🎥 FULL COURSE: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6YxDKpFzf_2D84p0cyk4T7X 🚂 Website: http://thecodingtrain.com/ 💖 Patreon: https://patreon.com/codingtrain 🛒 Store: https://www.designbyhumans.com/shop/codingtrain/ 📚 Books: https://www.amazon.com/shop/thecodingtrain 🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA 🔗 p5.js: https://p5js.org 🔗 Processing: https://processing.org 📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

detail
{'title': '3.5 Web Application Deployment (Glitch and Heroku) - Working with Data and APIs in JavaScript', 'heatmap': [{'end': 282.302, 'start': 263.548, 'weight': 0.718}, {'end': 391.446, 'start': 379.193, 'weight': 0.739}, {'end': 468.678, 'start': 424.031, 'weight': 0.83}, {'end': 693.281, 'start': 549.349, 'weight': 0.806}, {'end': 738.514, 'start': 724.186, 'weight': 0.728}], 'summary': 'Covers deploying projects to a server, deploying and configuring node code on hosting services like glitch and heroku, using glitch for instant code updates and automatic server reruns, and deploying web apps with a focus on database management and server-side programming for network communication.', 'chapters': [{'end': 52.428, 'segs': [{'end': 52.428, 'src': 'embed', 'start': 16.581, 'weight': 0, 'content': [{'end': 23.447, 'text': 'And so I look forward to hearing all about in the comments and hopefully returning and making more videos that continue these projects and this discussion.', 'start': 16.581, 'duration': 6.866}, {'end': 30.572, 'text': "But before I go, at least in this first round of what I'm making right now, I want to show you one thing, how to deploy your project to a server.", 'start': 23.587, 'duration': 6.985}, {'end': 33.194, 'text': 'Put it out in the world so that people could access and use it.', 'start': 30.772, 'duration': 2.422}, {'end': 37.377, 'text': "There's an inherent problem with me even making this video because there's no one way to do this.", 'start': 33.394, 'duration': 3.983}, {'end': 44.743, 'text': 'I mean you could build your own server, get your own internet connection, get an IP address, create your own web server on a Raspberry Pi,', 'start': 37.438, 'duration': 7.305}, {'end': 47.325, 'text': 'even put it somewhere out in the forest wirelessly.', 'start': 44.743, 'duration': 2.582}, {'end': 49.227, 'text': 'Who knows? Attach it to a space station.', 'start': 47.365, 'duration': 1.862}, {'end': 52.428, 'text': 'But what I want to look for here at least.', 'start': 50.027, 'duration': 2.401}], 'summary': 'Discussion on deploying projects to a server with various options and possibilities.', 'duration': 35.847, 'max_score': 16.581, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rz886HkV1j4/pics/Rz886HkV1j416581.jpg'}], 'start': 1.209, 'title': 'Deploying projects to a server', 'summary': 'Explains the process of deploying a project to a server, acknowledging the diverse methods including setting up a personal server, obtaining an ip address, and creating a web server on a raspberry pi.', 'chapters': [{'end': 52.428, 'start': 1.209, 'title': 'Deploying projects to a server', 'summary': 'Explains the process of deploying a project to a server, acknowledging the diverse methods which include setting up a personal server, obtaining an ip address, and creating a web server on a raspberry pi.', 'duration': 51.219, 'highlights': ['Acknowledges the diverse methods of deploying a project, including setting up a personal server, obtaining an IP address, and creating a web server on a Raspberry Pi.', 'Emphasizes the lack of a single method for deploying a project, highlighting the multitude of potential approaches to this process.']}], 'duration': 51.219, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rz886HkV1j4/pics/Rz886HkV1j41209.jpg', 'highlights': ['Acknowledges the diverse methods of deploying a project, including setting up a personal server, obtaining an IP address, and creating a web server on a Raspberry Pi.', 'Emphasizes the lack of a single method for deploying a project, highlighting the multitude of potential approaches to this process.']}, {'end': 489.673, 'segs': [{'end': 85.368, 'src': 'embed', 'start': 52.428, 'weight': 0, 'content': [{'end': 63.592, 'text': 'I want to look at least two scenarios of using a commercial hosting service that allows you to deploy your node code and have it run somewhere and will give you a URL so that you can actually see it in the browser.', 'start': 52.428, 'duration': 11.164}, {'end': 67.174, 'text': 'And the two services I want to show you are Glitch and Heroku.', 'start': 63.933, 'duration': 3.241}, {'end': 71.997, 'text': "Glitch, as it says on their website, is the friendly community where you'll find the app of your dreams.", 'start': 67.614, 'duration': 4.383}, {'end': 72.918, 'text': 'I love Glitch.', 'start': 72.098, 'duration': 0.82}, {'end': 79.063, 'text': "It's an amazing code editor in the browser that you can write node code, client JavaScript.", 'start': 73.258, 'duration': 5.805}, {'end': 80.424, 'text': 'You can build all sorts of apps.', 'start': 79.083, 'duration': 1.341}, {'end': 81.104, 'text': 'You can share them.', 'start': 80.444, 'duration': 0.66}, {'end': 81.965, 'text': 'You can remix them.', 'start': 81.124, 'duration': 0.841}, {'end': 82.746, 'text': "It's colorful.", 'start': 82.225, 'duration': 0.521}, {'end': 83.166, 'text': "It's friendly.", 'start': 82.786, 'duration': 0.38}, {'end': 83.887, 'text': 'You can ask for help.', 'start': 83.186, 'duration': 0.701}, {'end': 85.368, 'text': "There's so much there in Glitch.", 'start': 84.087, 'duration': 1.281}], 'summary': 'Comparison of glitch and heroku for deploying node code, glitch offers friendly community and browser-based code editor.', 'duration': 32.94, 'max_score': 52.428, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rz886HkV1j4/pics/Rz886HkV1j452428.jpg'}, {'end': 148.617, 'src': 'embed', 'start': 120.514, 'weight': 2, 'content': [{'end': 124.597, 'text': 'Or leave in the comments what type of cloud server you like to deploy your applications on.', 'start': 120.514, 'duration': 4.083}, {'end': 126.699, 'text': "There's also this thing called serverless programming.", 'start': 124.797, 'duration': 1.902}, {'end': 128.78, 'text': "We'll come back to that another time.", 'start': 127.319, 'duration': 1.461}, {'end': 130.161, 'text': "Let's start off here with Glitch.", 'start': 129.121, 'duration': 1.04}, {'end': 132.483, 'text': 'So here I am logged into my Glitch account.', 'start': 130.301, 'duration': 2.182}, {'end': 137.407, 'text': "My Glitch account is actually linked to my GitHub account, although you don't need a GitHub account to sign up and start working with Glitch.", 'start': 132.563, 'duration': 4.844}, {'end': 141.03, 'text': 'I could make a new project, and I could actually make a blank project.', 'start': 137.728, 'duration': 3.302}, {'end': 141.991, 'text': 'Hello, Express.', 'start': 141.151, 'duration': 0.84}, {'end': 144.714, 'text': 'This would have been a good place for me to start when I was back in the day.', 'start': 142.191, 'duration': 2.523}, {'end': 145.714, 'text': "I didn't have anything yet.", 'start': 144.754, 'duration': 0.96}, {'end': 148.617, 'text': 'I could just make a new simple Express app and build on top of that.', 'start': 145.774, 'duration': 2.843}], 'summary': 'Introduction to glitch for app deployment, linked to github account, with capability to create new projects and utilize express framework.', 'duration': 28.103, 'max_score': 120.514, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rz886HkV1j4/pics/Rz886HkV1j4120514.jpg'}, {'end': 195.982, 'src': 'embed', 'start': 163.978, 'weight': 3, 'content': [{'end': 166.061, 'text': "There's something that I missed that's rather important.", 'start': 163.978, 'duration': 2.083}, {'end': 171.831, 'text': 'So in my code, I have hard coded in here the port 3000.', 'start': 166.929, 'duration': 4.902}, {'end': 177.933, 'text': "That's the port that I'm arbitrarily choosing to run and test the stuff locally on this computer.", 'start': 171.831, 'duration': 6.102}, {'end': 183.335, 'text': 'But any type of web hosting platform is probably going to generate a port automatically.', 'start': 178.253, 'duration': 5.082}, {'end': 187.497, 'text': 'And there are some standard ports for hosting up a website.', 'start': 183.795, 'duration': 3.702}, {'end': 190.499, 'text': 'So I actually want to pull that from the environment variable.', 'start': 187.797, 'duration': 2.702}, {'end': 195.982, 'text': "And this will be maybe an environment variable that I don't actually set, but that already comes with the platform.", 'start': 190.559, 'duration': 5.423}], 'summary': 'Code currently hardcodes port 3000, but should pull from environment variable for flexibility.', 'duration': 32.004, 'max_score': 163.978, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rz886HkV1j4/pics/Rz886HkV1j4163978.jpg'}, {'end': 291.246, 'src': 'heatmap', 'start': 263.548, 'weight': 0.718, 'content': [{'end': 267.792, 'text': "So now, if I run the server again, it's starting at 3000.", 'start': 263.548, 'duration': 4.244}, {'end': 273.258, 'text': 'I can go back and look at the project running locally at port 3000.', 'start': 267.792, 'duration': 5.466}, {'end': 274.619, 'text': '3,000, and here it is.', 'start': 273.258, 'duration': 1.361}, {'end': 282.302, 'text': "OK, but that's not, I needed to do this because I now want Glitch to take care of the port for me.", 'start': 274.899, 'duration': 7.403}, {'end': 283.523, 'text': "I don't want to be in charge with that.", 'start': 282.482, 'duration': 1.041}, {'end': 287.404, 'text': "Now, since I'm going to be getting the code from GitHub onto Glitch,", 'start': 283.763, 'duration': 3.641}, {'end': 291.246, 'text': 'I need to make sure I take that change that I just made locally and push it onto GitHub.', 'start': 287.404, 'duration': 3.842}], 'summary': 'Server running at port 3000, transitioning to use glitch and pushing changes to github.', 'duration': 27.698, 'max_score': 263.548, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rz886HkV1j4/pics/Rz886HkV1j4263548.jpg'}, {'end': 331.112, 'src': 'embed', 'start': 301.442, 'weight': 4, 'content': [{'end': 306.445, 'text': "And then I'm going to say git push origin master, which sends it up to GitHub itself.", 'start': 301.442, 'duration': 5.003}, {'end': 310.668, 'text': "This is getting a little bit confusing, so let's make a quick diagram just to understand the pieces.", 'start': 307.306, 'duration': 3.362}, {'end': 312.068, 'text': "So I've got my laptop here.", 'start': 310.788, 'duration': 1.28}, {'end': 316.351, 'text': "And so I've been writing all the code here, the server and the client.", 'start': 313.449, 'duration': 2.902}, {'end': 323.195, 'text': "Now what I've done is I have now taken all that code and I have put it onto GitHub.", 'start': 316.691, 'duration': 6.504}, {'end': 324.516, 'text': 'And these are now linked.', 'start': 323.315, 'duration': 1.201}, {'end': 325.877, 'text': 'I can always push.', 'start': 324.816, 'duration': 1.061}, {'end': 331.112, 'text': 'which is sending code this way, or I can pull, which is sending code this way.', 'start': 327.028, 'duration': 4.084}], 'summary': 'The speaker explains pushing and pulling code to/from github with a diagram.', 'duration': 29.67, 'max_score': 301.442, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rz886HkV1j4/pics/Rz886HkV1j4301442.jpg'}, {'end': 409.698, 'src': 'heatmap', 'start': 379.193, 'weight': 0.739, 'content': [{'end': 380.514, 'text': "I'm going to copy the URL.", 'start': 379.193, 'duration': 1.321}, {'end': 382.877, 'text': "And I'm going to press that button again.", 'start': 380.794, 'duration': 2.083}, {'end': 384.639, 'text': "And I'm going to go over here and paste it in.", 'start': 382.897, 'duration': 1.742}, {'end': 390.205, 'text': 'So I am grabbing all the code from Coding Train slash the weather here.', 'start': 385.019, 'duration': 5.186}, {'end': 391.446, 'text': "And I'm going to hit OK.", 'start': 390.525, 'duration': 0.921}, {'end': 393.048, 'text': "And I'm going to wait for a little bit.", 'start': 391.987, 'duration': 1.061}, {'end': 399.791, 'text': 'Look at this.', 'start': 399.311, 'duration': 0.48}, {'end': 401.652, 'text': 'Everything is there.', 'start': 400.672, 'duration': 0.98}, {'end': 407.196, 'text': 'Public check-ins, public logs, public index, public sketch, public style, git ignore index.', 'start': 402.033, 'duration': 5.163}, {'end': 409.698, 'text': 'Ooh, environment sample.', 'start': 407.797, 'duration': 1.901}], 'summary': 'Copying and pasting code to access public files and logs from a url.', 'duration': 30.505, 'max_score': 379.193, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rz886HkV1j4/pics/Rz886HkV1j4379193.jpg'}, {'end': 471.201, 'src': 'heatmap', 'start': 410.039, 'weight': 5, 'content': [{'end': 412.701, 'text': 'Aha So remember, I need my API key.', 'start': 410.039, 'duration': 2.662}, {'end': 416.924, 'text': "So before I even try to run this, what I'm going to do now is I'm going to hit Rename.", 'start': 412.761, 'duration': 4.163}, {'end': 420.668, 'text': "And I'm going to change this to just .env.", 'start': 418.746, 'duration': 1.922}, {'end': 422.87, 'text': "So now you can see it's got a key there.", 'start': 420.968, 'duration': 1.902}, {'end': 423.97, 'text': 'Glitch knows.', 'start': 423.11, 'duration': 0.86}, {'end': 427.473, 'text': 'Glitch really knows that .env files are secret files.', 'start': 424.031, 'duration': 3.442}, {'end': 433.539, 'text': "So if someone chooses to remix this project or based on it, if I'm sharing this, no one will be able to see the API key in there.", 'start': 427.714, 'duration': 5.825}, {'end': 434.54, 'text': "I'm going to go.", 'start': 433.959, 'duration': 0.581}, {'end': 438.404, 'text': "And I'm going to go back to my code where I have my env file.", 'start': 435.22, 'duration': 3.184}, {'end': 445.091, 'text': "grab this API key, paste it in here, hit Save and then I'm going to click on this Show button.", 'start': 438.404, 'duration': 6.687}, {'end': 448.054, 'text': 'And so now I can choose to show in a new window or right next to the code.', 'start': 445.291, 'duration': 2.763}, {'end': 449.355, 'text': "Let's just look at it right next to the code.", 'start': 448.074, 'duration': 1.281}, {'end': 450.917, 'text': 'There it is.', 'start': 450.516, 'duration': 0.401}, {'end': 451.938, 'text': "There's my project.", 'start': 451.117, 'duration': 0.821}, {'end': 455.542, 'text': "Now let's click on Show and go in a new window.", 'start': 453.419, 'duration': 2.123}, {'end': 456.402, 'text': 'And look at this.', 'start': 455.562, 'duration': 0.84}, {'end': 462.953, 'text': 'If you go to coding-the-weather-here.glitch.me, you have the project.', 'start': 457.307, 'duration': 5.646}, {'end': 468.678, 'text': "And I can go back here and I can start saying like, hey, let's go to Berlin and check in.", 'start': 463.273, 'duration': 5.405}, {'end': 471.201, 'text': "And let's go to London and check in.", 'start': 469.039, 'duration': 2.162}], 'summary': 'Securing api key in .env file to protect from unauthorized access.', 'duration': 61.162, 'max_score': 410.039, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rz886HkV1j4/pics/Rz886HkV1j4410039.jpg'}], 'start': 52.428, 'title': 'Deploying and configuring node code', 'summary': 'Explores deploying node code on hosting services like glitch and heroku, and discusses configuring port for web hosting, emphasizing the significance of environment variables and .env files, and calling for feedback on preferred cloud servers and serverless programming.', 'chapters': [{'end': 163.838, 'start': 52.428, 'title': 'Deploying node code on glitch and heroku', 'summary': 'Explores deploying node code on hosting services such as glitch and heroku, highlighting the features and ease of use of each service, with a brief mention of other potential cloud server options and a call for feedback on preferred cloud servers and serverless programming.', 'duration': 111.41, 'highlights': ['Glitch is a friendly community where you can write and deploy node code, client JavaScript, and build and share apps, with the option to import existing projects and run them. Glitch provides a user-friendly environment for writing and deploying node code and client JavaScript, allowing for app sharing and remixing. It offers features such as colorful interface, community support, and easy project import, enhancing the development experience.', 'Heroku is a cloud platform with a reasonable free tier for deploying web applications, and the chapter also mentions other services like Amazon Web Services and DigitalOcean. Heroku offers a cost-effective free tier for deploying web applications, making it an accessible option for developers. The chapter briefly acknowledges other services like Amazon Web Services and DigitalOcean, showcasing a range of potential hosting solutions.', 'The chapter briefly mentions serverless programming and invites feedback on preferred cloud servers, indicating a potential future exploration of serverless programming and a willingness to engage with audience preferences. The chapter briefly touches on serverless programming and seeks input on preferred cloud servers, hinting at potential future content on serverless programming and a commitment to addressing audience interests and needs.']}, {'end': 489.673, 'start': 163.978, 'title': 'Configuring port for web hosting', 'summary': 'Discusses the importance of using environment variables to dynamically assign the port for a web server, demonstrates the process of pushing code changes to github, and explains the significance of .env files for securing api keys when working with glitch.', 'duration': 325.695, 'highlights': ['Using environment variables to dynamically assign the port for a web server The speaker emphasizes the significance of pulling the port number from the environment variable instead of hard coding it, highlighting the flexibility and adaptability it provides when running the code on different web hosting platforms.', 'Pushing code changes to GitHub and version control The speaker demonstrates the process of adding, committing, and pushing code changes to the GitHub repository, showcasing the importance of version control and collaborative development.', "Securing API keys with .env files in Glitch The speaker explains the significance of .env files in Glitch for securing API keys, highlighting the platform's capability to recognize .env files as secret files and ensure the confidentiality of sensitive information when sharing projects."]}], 'duration': 437.245, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rz886HkV1j4/pics/Rz886HkV1j452428.jpg', 'highlights': ['Glitch provides a user-friendly environment for writing and deploying node code and client JavaScript, allowing for app sharing and remixing.', 'Heroku offers a cost-effective free tier for deploying web applications, making it an accessible option for developers.', 'The chapter briefly touches on serverless programming and seeks input on preferred cloud servers, hinting at potential future content on serverless programming and a commitment to addressing audience interests and needs.', 'Using environment variables to dynamically assign the port for a web server, highlighting the flexibility and adaptability it provides when running the code on different web hosting platforms.', 'The speaker demonstrates the process of adding, committing, and pushing code changes to the GitHub repository, showcasing the importance of version control and collaborative development.', "The speaker explains the significance of .env files in Glitch for securing API keys, highlighting the platform's capability to recognize .env files as secret files and ensure the confidentiality of sensitive information when sharing projects."]}, {'end': 748.903, 'segs': [{'end': 542.847, 'src': 'embed', 'start': 509.646, 'weight': 0, 'content': [{'end': 510.807, 'text': 'I could change that.', 'start': 509.646, 'duration': 1.161}, {'end': 512.508, 'text': 'And stuff would change.', 'start': 511.548, 'duration': 0.96}, {'end': 514.61, 'text': 'The server would rerun itself automatically.', 'start': 513.049, 'duration': 1.561}, {'end': 518.494, 'text': 'So again, I would love to come back and revisit more videos about how Glitch works itself.', 'start': 514.669, 'duration': 3.825}, {'end': 525.619, 'text': "Now that this project is there, I would encourage you to go to the URL, it'll be in the video's description, and click Remix Project.", 'start': 518.933, 'duration': 6.686}, {'end': 529.461, 'text': "You don't even have to do any of this stuff, because once I have it deployed on Glitch,", 'start': 525.799, 'duration': 3.662}, {'end': 532.162, 'text': 'other people can get the code and make their own version of it.', 'start': 529.461, 'duration': 2.701}, {'end': 537.065, 'text': "So I'll include this as an example that you can start with, and I probably shouldn't mention that.", 'start': 532.202, 'duration': 4.863}, {'end': 538.366, 'text': 'I should have mentioned that earlier.', 'start': 537.085, 'duration': 1.281}, {'end': 538.906, 'text': 'Oh well.', 'start': 538.386, 'duration': 0.52}, {'end': 542.847, 'text': "Let's try one more deployment just so we can see how another system works.", 'start': 539.326, 'duration': 3.521}], 'summary': 'Demonstrates automatic server rerun on glitch with project remixing feature, encouraging others to create their own versions.', 'duration': 33.201, 'max_score': 509.646, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rz886HkV1j4/pics/Rz886HkV1j4509646.jpg'}, {'end': 693.281, 'src': 'heatmap', 'start': 549.349, 'weight': 0.806, 'content': [{'end': 554.811, 'text': 'So you can actually do things and deploy projects just from your terminal application itself.', 'start': 549.349, 'duration': 5.462}, {'end': 558.572, 'text': "So you're going to need to first install the Heroku CLI.", 'start': 555.111, 'duration': 3.461}, {'end': 559.872, 'text': "I've done that already.", 'start': 558.952, 'duration': 0.92}, {'end': 564.853, 'text': 'But you can download and install it for Mac OS, or you can download and install it for Windows or Ubuntu, whatever your operating system is.', 'start': 559.912, 'duration': 4.941}, {'end': 571.035, 'text': "You'll know that you have the CLI installed if you can type Heroku into the command line and see it doesn't say, I don't know what that is.", 'start': 565.273, 'duration': 5.762}, {'end': 573.776, 'text': 'So one of the things I want to do is type in Heroku login.', 'start': 571.295, 'duration': 2.481}, {'end': 576.676, 'text': "So I've already signed up for a Heroku account.", 'start': 574.136, 'duration': 2.54}, {'end': 580.157, 'text': "So you'll have to have done that if you're going to follow along with these instructions.", 'start': 577.356, 'duration': 2.801}, {'end': 583.378, 'text': "It's going to ask me to press any key.", 'start': 581.337, 'duration': 2.041}, {'end': 585.319, 'text': "It's going to open up the browser.", 'start': 584.218, 'duration': 1.101}, {'end': 586.519, 'text': "It's going to ask me to log in.", 'start': 585.359, 'duration': 1.16}, {'end': 587.92, 'text': "I'm already logged in.", 'start': 587.1, 'duration': 0.82}, {'end': 588.721, 'text': "I've already logged in.", 'start': 587.94, 'duration': 0.781}, {'end': 592.723, 'text': "We can go back to the terminal, and we can see that I've logged in now.", 'start': 588.741, 'duration': 3.982}, {'end': 596.625, 'text': "Once I'm logged in in terminal, I need to create a new app.", 'start': 593.243, 'duration': 3.382}, {'end': 602.828, 'text': 'So I could go to my Heroku dashboard at this URL, and then I can just click here and say New, Create New App.', 'start': 596.865, 'duration': 5.963}, {'end': 606.31, 'text': "So I'm going to create an app called The Weather Here.", 'start': 603.469, 'duration': 2.841}, {'end': 608.832, 'text': 'The Weather Here is available.', 'start': 607.711, 'duration': 1.121}, {'end': 610.673, 'text': "I'm going to hit Create App.", 'start': 609.292, 'duration': 1.381}, {'end': 613.074, 'text': 'And then look at this.', 'start': 612.253, 'duration': 0.821}, {'end': 614.174, 'text': 'This is so perfect.', 'start': 613.234, 'duration': 0.94}, {'end': 616.156, 'text': "It's kind of giving me everything I need to do.", 'start': 614.375, 'duration': 1.781}, {'end': 618.858, 'text': "I need to do Heroku login, which I've already done.", 'start': 616.436, 'duration': 2.422}, {'end': 622.56, 'text': "I've already created a Git repository, so I don't need to worry about any of this.", 'start': 619.138, 'duration': 3.422}, {'end': 627.204, 'text': 'But now I just need to add Heroku as a remote.', 'start': 622.961, 'duration': 4.243}, {'end': 629.125, 'text': "So I'm going to go back to terminal here.", 'start': 627.544, 'duration': 1.581}, {'end': 632.827, 'text': "I'm going to say git remote dash v.", 'start': 629.165, 'duration': 3.662}, {'end': 635.149, 'text': 'So this is listing me the current remotes.', 'start': 632.827, 'duration': 2.322}, {'end': 639.052, 'text': "And the only current remote is called origin, and it's at github.com.", 'start': 635.329, 'duration': 3.723}, {'end': 643.583, 'text': 'I want to add another remote by copying and pasting this command right here.', 'start': 639.452, 'duration': 4.131}, {'end': 644.966, 'text': "I'm going to paste that in.", 'start': 643.603, 'duration': 1.363}, {'end': 647.749, 'text': "OK, I've got another remote.", 'start': 646.909, 'duration': 0.84}, {'end': 653.21, 'text': 'If I say git remote dash v, we can see, aha, I have the Heroku remote and the origin remote.', 'start': 647.789, 'duration': 5.421}, {'end': 663.072, 'text': "What's next? Now I'm going to say, actually, if I made any changes to the code, I would need to do git add and git commit.", 'start': 653.63, 'duration': 9.442}, {'end': 665.373, 'text': 'But all I need to do is now deploy it.', 'start': 663.312, 'duration': 2.061}, {'end': 668.374, 'text': 'To deploy it to Heroku is say git push Heroku master.', 'start': 665.413, 'duration': 2.961}, {'end': 669.514, 'text': "I'm sure I've forgotten something.", 'start': 668.414, 'duration': 1.1}, {'end': 670.454, 'text': "Let's see what happens.", 'start': 669.754, 'duration': 0.7}, {'end': 675.63, 'text': "It's going to run through a bunch of things, building the project.", 'start': 672.628, 'duration': 3.002}, {'end': 677.171, 'text': "And it's deployed.", 'start': 676.43, 'duration': 0.741}, {'end': 680.913, 'text': 'So I can click on this and open it in the browser.', 'start': 677.631, 'duration': 3.282}, {'end': 682.714, 'text': 'And look, there it is.', 'start': 680.973, 'duration': 1.741}, {'end': 685.656, 'text': "Huh So it's working.", 'start': 682.734, 'duration': 2.922}, {'end': 687.818, 'text': "It's deployed, but I don't see temperature.", 'start': 685.696, 'duration': 2.122}, {'end': 691.54, 'text': "If I go to View Check-ins, there's nothing added to the database.", 'start': 688.118, 'duration': 3.422}, {'end': 693.281, 'text': "So something's not working.", 'start': 691.98, 'duration': 1.301}], 'summary': "Deployed 'the weather here' app using heroku cli, created new app, added heroku as remote, and deployed successfully.", 'duration': 143.932, 'max_score': 549.349, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rz886HkV1j4/pics/Rz886HkV1j4549349.jpg'}, {'end': 585.319, 'src': 'embed', 'start': 559.912, 'weight': 1, 'content': [{'end': 564.853, 'text': 'But you can download and install it for Mac OS, or you can download and install it for Windows or Ubuntu, whatever your operating system is.', 'start': 559.912, 'duration': 4.941}, {'end': 571.035, 'text': "You'll know that you have the CLI installed if you can type Heroku into the command line and see it doesn't say, I don't know what that is.", 'start': 565.273, 'duration': 5.762}, {'end': 573.776, 'text': 'So one of the things I want to do is type in Heroku login.', 'start': 571.295, 'duration': 2.481}, {'end': 576.676, 'text': "So I've already signed up for a Heroku account.", 'start': 574.136, 'duration': 2.54}, {'end': 580.157, 'text': "So you'll have to have done that if you're going to follow along with these instructions.", 'start': 577.356, 'duration': 2.801}, {'end': 583.378, 'text': "It's going to ask me to press any key.", 'start': 581.337, 'duration': 2.041}, {'end': 585.319, 'text': "It's going to open up the browser.", 'start': 584.218, 'duration': 1.101}], 'summary': 'Install heroku cli for mac, windows, or ubuntu, login to heroku account, and follow instructions to interact with cli.', 'duration': 25.407, 'max_score': 559.912, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rz886HkV1j4/pics/Rz886HkV1j4559912.jpg'}, {'end': 622.56, 'src': 'embed', 'start': 596.865, 'weight': 3, 'content': [{'end': 602.828, 'text': 'So I could go to my Heroku dashboard at this URL, and then I can just click here and say New, Create New App.', 'start': 596.865, 'duration': 5.963}, {'end': 606.31, 'text': "So I'm going to create an app called The Weather Here.", 'start': 603.469, 'duration': 2.841}, {'end': 608.832, 'text': 'The Weather Here is available.', 'start': 607.711, 'duration': 1.121}, {'end': 610.673, 'text': "I'm going to hit Create App.", 'start': 609.292, 'duration': 1.381}, {'end': 613.074, 'text': 'And then look at this.', 'start': 612.253, 'duration': 0.821}, {'end': 614.174, 'text': 'This is so perfect.', 'start': 613.234, 'duration': 0.94}, {'end': 616.156, 'text': "It's kind of giving me everything I need to do.", 'start': 614.375, 'duration': 1.781}, {'end': 618.858, 'text': "I need to do Heroku login, which I've already done.", 'start': 616.436, 'duration': 2.422}, {'end': 622.56, 'text': "I've already created a Git repository, so I don't need to worry about any of this.", 'start': 619.138, 'duration': 3.422}], 'summary': "Creating 'the weather here' app on heroku with ease.", 'duration': 25.695, 'max_score': 596.865, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rz886HkV1j4/pics/Rz886HkV1j4596865.jpg'}, {'end': 733.216, 'src': 'embed', 'start': 708.752, 'weight': 4, 'content': [{'end': 715.878, 'text': "I don't actually even need that npm package .env, because the Heroku command line interface lets me set environment variables directly.", 'start': 708.752, 'duration': 7.126}, {'end': 719.281, 'text': 'So I could go back to the terminal, and I can type Heroku config.', 'start': 716.058, 'duration': 3.223}, {'end': 723.806, 'text': 'And Heroku config is going to show me, ah, all of my environment variables, of which there are none.', 'start': 719.761, 'duration': 4.045}, {'end': 733.216, 'text': 'So I can now say Heroku config colon set API underscore key equals, go back to my code, grab this, paste that in, hit Enter.', 'start': 724.186, 'duration': 9.03}], 'summary': 'Heroku cli allows setting environment variables directly, demonstrating through example.', 'duration': 24.464, 'max_score': 708.752, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rz886HkV1j4/pics/Rz886HkV1j4708752.jpg'}, {'end': 747.482, 'src': 'heatmap', 'start': 724.186, 'weight': 0.728, 'content': [{'end': 733.216, 'text': 'So I can now say Heroku config colon set API underscore key equals, go back to my code, grab this, paste that in, hit Enter.', 'start': 724.186, 'duration': 9.03}, {'end': 738.514, 'text': "It's setting the API key and it's even restarting the app for me.", 'start': 734.83, 'duration': 3.684}, {'end': 740.495, 'text': 'Ah, so nice of it to do that for me.', 'start': 738.654, 'duration': 1.841}, {'end': 742.717, 'text': "Let's just check Heroku config again.", 'start': 740.996, 'duration': 1.721}, {'end': 745, 'text': "You can see that's my environment variable.", 'start': 742.898, 'duration': 2.102}, {'end': 747.482, 'text': "It's not found anywhere other than here.", 'start': 745.1, 'duration': 2.382}], 'summary': 'Setting api key on heroku config, verifies environment variable.', 'duration': 23.296, 'max_score': 724.186, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rz886HkV1j4/pics/Rz886HkV1j4724186.jpg'}], 'start': 490.133, 'title': 'Using glitch and heroku cli for code deployment', 'summary': 'Covers using glitch for instant code updates and automatic server reruns, allowing code remixing and deployment, as well as deploying projects with heroku cli, with successful app creation, adding remotes, setting environment variables, and issue resolution.', 'chapters': [{'end': 542.847, 'start': 490.133, 'title': 'Using glitch for code editing and deployment', 'summary': 'Discusses the use of glitch as a code editor, enabling instant updates and automatic server reruns, and the ability for others to remix and deploy the code.', 'duration': 52.714, 'highlights': ['Glitch allows for real-time editing and immediate updates, as demonstrated by changing the HTML page and observing the instant update.', 'The platform facilitates server code modification and automatic rerun of the server, streamlining the development process and ensuring seamless updates.', 'Upon deployment on Glitch, others can access and remix the code, encouraging collaborative development and innovation.']}, {'end': 748.903, 'start': 543.147, 'title': 'Deploying projects with heroku cli', 'summary': 'Demonstrates deploying a project using heroku cli, including installing the cli, logging in, creating and deploying an app, adding remotes, and setting environment variables, ultimately resulting in successful deployment and resolving issues.', 'duration': 205.756, 'highlights': ["Installing Heroku CLI The process of installing Heroku CLI is explained, highlighting the availability for various operating systems and the confirmation of successful installation by testing the 'Heroku' command in the terminal.", "Creating and Deploying an App The steps for creating and deploying an app on Heroku, including creating a new app, adding Heroku as a remote, and deploying the project using 'git push Heroku master' are detailed, demonstrating the seamless deployment process.", 'Setting Environment Variables The method of setting environment variables using Heroku CLI, including checking, setting, and verifying the variables, is illustrated, showcasing the ability to manage environment variables directly through the CLI.']}], 'duration': 258.77, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rz886HkV1j4/pics/Rz886HkV1j4490133.jpg', 'highlights': ['Glitch allows for real-time editing and immediate updates, streamlining the development process.', 'Heroku CLI installation process is explained, highlighting availability for various operating systems.', 'Upon deployment on Glitch, others can access and remix the code, encouraging collaborative development.', 'Creating and deploying an app on Heroku is detailed, demonstrating the seamless deployment process.', 'Setting environment variables using Heroku CLI is illustrated, showcasing direct management through the CLI.']}, {'end': 1138.653, 'segs': [{'end': 837.325, 'src': 'embed', 'start': 806.203, 'weight': 1, 'content': [{'end': 808.005, 'text': "1, 2, 3, 4, there's like seven of them.", 'start': 806.203, 'duration': 1.802}, {'end': 810.689, 'text': "Over here on the Heroku one, there's four of them.", 'start': 808.466, 'duration': 2.223}, {'end': 813.052, 'text': "They're not sharing a database.", 'start': 810.709, 'duration': 2.343}, {'end': 814.473, 'text': 'This is very important.', 'start': 813.332, 'duration': 1.141}, {'end': 818.919, 'text': 'Remember, the server is the holder of the database.', 'start': 814.734, 'duration': 4.185}, {'end': 821.5, 'text': "So you wouldn't want to deploy this to multiple places.", 'start': 819.119, 'duration': 2.381}, {'end': 823.16, 'text': "I'm just kind of showing you how that works.", 'start': 821.58, 'duration': 1.58}, {'end': 828.082, 'text': 'But that database is something that is created from the server side itself.', 'start': 823.48, 'duration': 4.602}, {'end': 830.403, 'text': "And it's different than I could be running this local here.", 'start': 828.282, 'duration': 2.121}, {'end': 831.763, 'text': "I'm not running the server right now.", 'start': 830.443, 'duration': 1.32}, {'end': 834.004, 'text': 'But I could still say node index.js.', 'start': 832.043, 'duration': 1.961}, {'end': 837.325, 'text': "And I've got whatever data I happen to have here locally.", 'start': 834.384, 'duration': 2.941}], 'summary': 'Heroku has four servers, not sharing a database. server holds database.', 'duration': 31.122, 'max_score': 806.203, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rz886HkV1j4/pics/Rz886HkV1j4806203.jpg'}, {'end': 920.276, 'src': 'embed', 'start': 890.723, 'weight': 0, 'content': [{'end': 892.865, 'text': 'Then I would have to go back to my terminal.', 'start': 890.723, 'duration': 2.142}, {'end': 894.947, 'text': "I've got to commit that.", 'start': 893.085, 'duration': 1.862}, {'end': 902.553, 'text': 'Making a change to demonstrate deploy.', 'start': 899.57, 'duration': 2.983}, {'end': 907.124, 'text': "to Heroku, I'm going to make that change.", 'start': 904.522, 'duration': 2.602}, {'end': 911.488, 'text': "And then I'm going to say git push Heroku master.", 'start': 907.204, 'duration': 4.284}, {'end': 916.393, 'text': 'And this will now automatically rebuild and restart the app.', 'start': 911.889, 'duration': 4.504}, {'end': 920.276, 'text': 'Heroku knows to do that automatically when you try to send it revised code.', 'start': 916.613, 'duration': 3.663}], 'summary': 'Demonstrating deployment to heroku using git push command.', 'duration': 29.553, 'max_score': 890.723, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rz886HkV1j4/pics/Rz886HkV1j4890723.jpg'}, {'end': 1110.15, 'src': 'embed', 'start': 1082.866, 'weight': 2, 'content': [{'end': 1090.377, 'text': 'And you can make a call to an external API, get information, and use that information, repurpose it in a web page itself.', 'start': 1082.866, 'duration': 7.511}, {'end': 1097.421, 'text': "Then, more importantly, hopefully now you've realized that server-side programming is something that you can add to your toolbox.", 'start': 1090.837, 'duration': 6.584}, {'end': 1099.883, 'text': 'You can use it to save data to a database.', 'start': 1097.622, 'duration': 2.261}, {'end': 1102.025, 'text': 'You can use it to hide API keys.', 'start': 1100.083, 'duration': 1.942}, {'end': 1110.15, 'text': 'There is so much more that you can do with server-side programming in terms of being able to have multiple applications communicate to each other across the network.', 'start': 1102.225, 'duration': 7.925}], 'summary': 'Server-side programming enables data storage, api key security, and network communication.', 'duration': 27.284, 'max_score': 1082.866, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rz886HkV1j4/pics/Rz886HkV1j41082866.jpg'}], 'start': 749.824, 'title': 'Deploying web apps and managing databases', 'summary': 'Discusses deploying a web app, emphasizing the importance of database management, deployment workflow, and server-side programming for communication across networks.', 'chapters': [{'end': 1138.653, 'start': 749.824, 'title': 'Deploying web apps and managing databases', 'summary': 'Discusses the process of deploying a web app, including the importance of database management and deployment workflow, and emphasizes the significance of server-side programming for communication across networks.', 'duration': 388.829, 'highlights': ['The server being the holder of the database is an important concept in deploying web apps to ensure database consistency, as demonstrated by the different check-in counts on different deployment platforms. Different check-in counts on Heroku and glitch', 'The process of deploying code changes to Heroku involves committing the changes to git and pushing the code to Heroku, which automatically rebuilds and restarts the app. Steps involved in deploying code changes to Heroku', 'The significance of server-side programming is emphasized, highlighting its capabilities in saving data to a database, hiding API keys, and enabling communication between multiple applications across networks. Capabilities of server-side programming']}], 'duration': 388.829, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rz886HkV1j4/pics/Rz886HkV1j4749824.jpg', 'highlights': ['The process of deploying code changes to Heroku involves committing the changes to git and pushing the code to Heroku, which automatically rebuilds and restarts the app.', 'The server being the holder of the database is an important concept in deploying web apps to ensure database consistency, as demonstrated by the different check-in counts on different deployment platforms.', 'The significance of server-side programming is emphasized, highlighting its capabilities in saving data to a database, hiding API keys, and enabling communication between multiple applications across networks.']}], 'highlights': ['The process of deploying code changes to Heroku involves committing the changes to git and pushing the code to Heroku, which automatically rebuilds and restarts the app.', 'The server being the holder of the database is an important concept in deploying web apps to ensure database consistency, as demonstrated by the different check-in counts on different deployment platforms.', 'The significance of server-side programming is emphasized, highlighting its capabilities in saving data to a database, hiding API keys, and enabling communication between multiple applications across networks.', 'Glitch allows for real-time editing and immediate updates, streamlining the development process.', 'Upon deployment on Glitch, others can access and remix the code, encouraging collaborative development.', 'Creating and deploying an app on Heroku is detailed, demonstrating the seamless deployment process.', 'Setting environment variables using Heroku CLI is illustrated, showcasing direct management through the CLI.', "The speaker explains the significance of .env files in Glitch for securing API keys, highlighting the platform's capability to recognize .env files as secret files and ensure the confidentiality of sensitive information when sharing projects.", 'Using environment variables to dynamically assign the port for a web server, highlighting the flexibility and adaptability it provides when running the code on different web hosting platforms.', 'The speaker demonstrates the process of adding, committing, and pushing code changes to the GitHub repository, showcasing the importance of version control and collaborative development.', 'Glitch provides a user-friendly environment for writing and deploying node code and client JavaScript, allowing for app sharing and remixing.', 'Heroku offers a cost-effective free tier for deploying web applications, making it an accessible option for developers.', 'The chapter briefly touches on serverless programming and seeks input on preferred cloud servers, hinting at potential future content on serverless programming and a commitment to addressing audience interests and needs.', 'Heroku CLI installation process is explained, highlighting availability for various operating systems.', 'Acknowledges the diverse methods of deploying a project, including setting up a personal server, obtaining an IP address, and creating a web server on a Raspberry Pi.', 'Emphasizes the lack of a single method for deploying a project, highlighting the multitude of potential approaches to this process.']}