Build and Deploy a Web Server with Node.js and Heroku | Shivangi Das | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Build and Deploy a Web Server with Node.js and Heroku

teacher avatar Shivangi Das, Web Developer | Loves Books

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

12 Lessons (21m)
    • 1. Introduction

    • 2. Web Server

    • 3. Install Node.js

    • 4. Initialize Project

    • 5. Create an Express Server

    • 6. Hello World

    • 7. Serve files with express

    • 8. Connect to git

    • 9. Getting started with Heroku

    • 10. Html5 (Optional Class)

    • 11. Push Changes to Heroku

    • 12. Conclusion

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class


Build a Web Server with Node.js and deploy it on Heroku

This class is about being able to showcase your web applications/websites/art and craft. I will teach you how to make a web server in Node.js and Express.js, serve your files and finally deploy it on services like Heroku.

The class project involves creating a server that serves HTML files, images, text, JSON, etc. It can be extended to create REST APIs. Finally, we’ll publish our project using Heroku.

This is an intermediate level class because it involves prior knowledge of JavaScript. Beginners may find it a little fast-paced but they are welcome to follow along and ask their doubts in the community section.

Meet Your Teacher

Teacher Profile Image

Shivangi Das

Web Developer | Loves Books


Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introduction: ever wondered how the likes of Facebook and Twitter are able to dominate the Internet? Have you ever wished to take your hobby products online? I'll show you are for the world. My name is Shivani, and I will be teaching you how to build and deploy over observable. In this class. You learn everything you need to share your stuff on the Internet. We're going to pull the Web solo with no chairs and then we'll deploy refusing Hello. I am ready to get started and I hope to see you there in the first class. 2. Web Server: welcome to the first class of building and deploying a Web sellable. Today we're just going to go through what a Web solar is. And how does it work? According to Wikipedia, a Web soul is a soul, the software that is required to solve your content on the world by Web. That basically means if you want to share stuff with people on the Internet, you're going to require a silver software on this. Always, software will be done using some kind of hardware we will build the servers off on. The hardware will be taken care of by Hello. So what is happening? You when you try to open the LEP AIDS like let's say you're trying sold something on Google . What you're doing is sending an STD B request to the Google servers. STD B stands for hypertext transfer protocol. Do not get scared by it. That says, the protocol you're using for communication on the Internet. No, the Google Sobel's will look in the massive database. I try to find the webpage or a medal video that you asked for. It will send it back as a response, which will be visible on your browser in this class below on how to build lead whatsoever to solve your pages on the Internet. It is absolutely okay if you do not understand request in response right now, because we'll see a lot more of that. And when we start calling, the prerequisite for this class is knowing a little bit of JavaScript. If you're an absolute Vignal, you can still follow along because I will be life courting. Most of the time. I'll take you through the whole process of installing Nord Express. Making an accountant. Roku on AL include an option plus on building a webpage. By the end of the class, you will have your own Web sober up and running, and that will also count as a class project. I hope to see some really good content on the Internet. If you have any trouble falling along at any point of time, you can ask your questions in the community section on. You can reach me on Twitter in the next class. We'll get started, but installing node 3. Install Node.js: Welcome back Today I will take you through installing No Js know. James was created by Ryan Doll in 2009. Before that Dallas trip was solely used on the brother side. With no dare now have the power of creating back and codes the dollar scrip not come for the huge ecosystem. You can find an abundance of models on NPM. Note package Manager. These modules are usually open. Source you so you can use them and contribute to them and even make your own as well. Let's get to installing north on the northern side. We'll get an auction for download. I'm using Windows 64. So it's giving me an auction to download 64. I'll go with the long term support. One you're download would take maximum parties against download. You can just click corner on. It should start installing except the licenses. Oh, the ground flies. That's cool. Yep. Uh, but no, You will also get the note package manager so you don't have to worry about installing at separately. Will be using a lot of models from NPM. All right? It has been installed successfully and you're done for the day. Okay? Not all past. Let's take it. What? It's been stalled properly. Will you come on? Prom can type dogs Now. This is really amazing. You'll see that you can now use jealously on the command line. Let's add something. Do it did ill. How to get out of this? You just have to press control. C control. See again. Wasn't so hard to install. Known. Let's see in the next class how we can create a note project. 4. Initialize Project: Welcome back. Now that we have been stored No, let's start creating the project to do that first, make afford of oil project. Give it an appropriate name. I'm calling mine Web suitable when you're inside that cold. Oh, you can just type cmd in the at reservoir and that will open your command room, not initialize a note project we use and b m in it. It will ask you a bunch of questions about the project. If you are one of those busy people you can use minus it on all the T four values will be used. I'm going to use Justin P a minute and answer all my questions. So the Pakis name is Web syllable. That school was in one description left. So Entry point Index? Yes. No. I'm going to pull itself gorgeous. Best come on. Nothing. Right now. Get repository. We don't have one. Keywords. Give your name in the auto. Lightens will go with that. Okay, so it's asking me of this is okay. Yes, it is. And him. And it creates a pack of Jason. Fight for us. You can go back to your folder and see that a package or Jason file s created this Packages and file a super important. This one. Tell us which packages we have. All these dependencies we have how to start the project. How which which is the main file that will be called and everything is that is required for a Web. Sobel next class will start building the Web silver using expressed years. 5. Create an Express Server: I'm so excited you're finally going to write some code. The coordinator that I'm using is called visual studio Cord. It's an open source project by Microsoft, and the most wonderful thing about it is that it's devil abusing dollars script. Go ahead and open your project. Um, open fordo Mine was gored. Web So you can see the back of Jason file is there now in this we have mentioned that a main file is going to be so gorgeous. Let's create that fight now to build ourselves. We're going to use express. Yes, we'll have to require it. The syntax for that will be something like Go on. Express is equal. Requires express expresses a load module and we need toe Install it first Go back to your command from and oh, this type of npm install Express this one Lord the dependencies required for using express years who will define and app using express. Now you're sober. Needs to listen on some port. So let's mention back the board comes first. The old and all you Some fancy year six setbacks for the quarterback. The port could be something like I'm going to use 3000 My host will be Let's go with local host for now. Actually, let's not use it at all. If you do not mention the host, it will host it on local host. We want to live in indication when the solar starts. So let's mention back and sold Our Lord. That's pretty much all you need for the solo to run it. Just go back to your command wrong and type NTM start that is going to run you yourself. What RGs file. Let's see what happens. Be alive with 3000. That means also always working on you. But we're not hosting anything, so we'll see how to do that in the next class. 6. Hello World: It just occurred to me that we Lana force program, without saying hello to the world that is blasphemous will correct that in a moment when you open your browser and try to see what happened Your local host at 3000. All right, we're getting kind open. Hello, That says cannot get slash. That just means that you did not ask your computer to host anything on that address. We'll do that. Now you just up dimension app door get in case we get something like this that IHS rude then the request and the response fans EEA six index So when I will send a request of locals 3000 on nothing after that in the world, it should give back this response. Let's say we send of course, Hello one with Reese. Notice a little for that take effect again and GM stock be alive. Let's see what happens here. Hello world. Alright Winslow static files in the next plus 7. Serve files with express: it's press allows you to host static files. You just need to mention the Ford over. You have the static files and then you can host them using this piece of code E o express, not static, with almost all your static files mentioned in this spot. To mention the absolute part we're using apart Morgan, which is joining know their name is the global variable in no Js that gives you the current director your n plus the public for low. You can see that I've made a public for the euro have included image No, In order to use part, we have to force required and you have to install it as well. You can check in your back a Jason that there is a dependency called but in order hosting files from the file system or from any other sober that you're using, you need to mention this piece. Of course, this is called a middleware in no Js, it will go through this part before it executes any other request. It is just mentioning that we are allowing origin from anywhere, and we allow these head does in a response. JavaScript allows you to write all the court in one fight. But we're not barbarians. That a structure, a project I've already created a conflict file. So in this I'm mentioning what is the environment? I'm running it in. Is it a development environment or a production environment process? Don't environment allows you to access your environment? Variables in no Js. So when the devil I mentioning my solo host will be either from the process environment or 0000 my port is going to be 3000. And in the production, same thing over you are remove these two, and I'm going to use it from conflict. No, this will actually send us whatever we have written in model exports. That is the conflict environment. Currently, I'm sending them so it will send me this Jason into the sport. Now I'm going to mention config dot So got bored on my holsters. Want dots over the host? Let's run and see what happens. So this is my I p address right now. You can get it using ibeacon played in the command from All right, the solar still running. We're going to make another folder for the routes we are going to require that file you. Let's just check again if it's running. Oops. Oh, we do not send it. Hap. I ran into a couple of arrows before this, so we are good to go. So now you have a conflict file, we have a route You're going to go to route and try to solve our image. So I've made another route called Image, where I mentioned the part off my image file. This is the current directory. We have to get out off the rectory on, then go into the public polo and then send our image file sent file is use to send your static files. Let's run us over again in the European type image, this time as displaying the image. So now we're done with the SOBO. We're also hosting or fines. All that is left is to install abortion controller called Kate, and then we're ready to deploy it on her recoup 8. Connect to git: before proceeding any farther. I want you to install get It's an open source washing control system on one of my absolute favorite tools. While developing any project would get you get a good bash open that we're not going to use command prompt anymore will solidify using git bash You're going to initialize the project , go to the four low on time getting it. You would see that in your four low There is a hidden file that says dot gig coming back to visual studio cord. It says that you have to come in so many files will create a get ignore file in the get ignore file because we will mention that we don't want the norm models for low to be saved . So now we have seven piles to come in. You have per force is the files. I want to state all the files. Then I want to come with them. Now that get is integrated with a project, we are ready to deploy ourselves on her recoup 9. Getting started with Heroku: goto the heroic a website and create an account. I already have one. So I'm just going to log in. You would see an option to create a project you have given appropriate name because that will come as an extension. For example, I had made a nap saying at one not one. And I'm stuck with that right now. Create up. No, just go ahead. Copy this part where we're mentioning that this will be a remote trip was a treat. No. All your balloon is used. Get Bush. Very cool, Master. It will push all your files to the good repository. It can already see that. Yes, it is a no genius app. Compressed the files, downloaded all the dependencies on and says that it has already deployed it to your project . I poke open crescendo and it should open your project. Enough in the browser. If you share this link with anyone in the world, they would be able to see your hello world. Let's see if our images hosted, you're all set to host your website. The next class is optional, but I'll beat some basics or creating an STM edifying 10. Html5 (Optional Class): completely optional. Plus, you won't learn how to host an STM a file. The simplex remains the same. You you send files in the directory name on whichever pilot is on which party want to host it in. I'm going to go ahead and create in the public folder and indexed or test email file. We a sport will create a boilerplate for us. It has already created a head and body full sore title. Let's given appropriate title over your in this page. We're going to display ahead. Oh, on the the image that we hosted in the source, we're going to mention the part that we have given for image. Let's go and check that once. Yes, that's the wreck. Mentioning the order text is optional, but I highly recommend you do that in case the screen readers reading your webpage it will get to know what the images from the old text. We're going to go ahead and come in the court. Go ahead and push to fight. Okay, here is the moment of truth. Let's see if it hosted properly. The soul seems to be running. That will about smoothly. Now all you ever do was take pictures off your ardent cloth If you are an artsy person And in case you are a Web developer, make me a webpage on hosted using hair A group I forgot to mention Heracles. Free for hobby projects. No jails get. All of these are open source projects on. None of them are going to cost you any money. So go ahead and make a beautiful project. 11. Push Changes to Heroku: If you want to make anything is to your project all you have to do, it's coming your project again and put your head a coup who provides a very simple way off abating. Anything you want, you have 1% message testing. Whenever I goto this, you are test. I'll save the file commented. It's advisable to use some proper comic messages because that will help you a lot. Wildly budding type in again. Get bush Haruko Basta! This will again push all your files on and build the project. Also deployed. Go back to your brother and see if it's still running. Seems to be fine. We will go ahead and passed all you want. Now go ahead and create your own projects. I would love to see some really good stuff on the Internet. Please do not send me. Hello world, Make a page. If you already have a project, existing project pulls that. And if you have any trouble, just message me in the community section or reach me on Guido 12. Conclusion: in the words of Uncle Ben, with great park comes great responsibility. You now have the superpower off hosting anything and everything on the World Wide Web. Please use this to make the Internet a better place, make good art and host them, make useful Web applications. Having my own website helped me tremendously when I was looking for a job as a weapon. LeBow, in case you would like a big, no friendly class on no Js or estimate five or you want to develop something like shown your do, let me know you can send me your suggestions, requests feedback on Twitter. My begins are always open. And thank you so much for taking this class. I hope you learn something and you're going to make good use off it.