8 Running a Node Project Downloaded from GitHub

okay now you have a good understanding of how to use the packages we just installed so first we need to use NPM install package name to install a package either locally or globally in this case we can start two packages low - and UID locally so all the local packages will be saved or stored under this node underscore modules directory which is under the current directory of the project we also modify the package dot JSON as you can see once you do NPM install no - then line 12 is added in dependencies of course you can also add something to dev dependencies in this case we install a package called web pack all right then how do we use a package in a module first we need to require this package require low - and then assign it to a variable so for example here is on a score then we can use a variable name dot API to use all kinds of functionalities in this package all right I really want to mention the importance or emphasize the importance of package dot JSON right here so let's say you're done with your project and ready to push it to a remote depository for example github or bitbucket or gitlab or any remote online code repository so we want to push your code right but make sure you ignored this directory note underscore modules so put it in your dot git ignore file because there is no reason to push all the third-party packages to github why because people can easily download it from NPM right so pushing this to your github will be a waste of bandwidth and you remember this directory can become very very large and very heavy if you remember the picture I showed you that there's no joke okay so let me show you a example I found a very interesting project on github it is called a real world example apps the reason I like it is that you can see how the exact same medium.com website medium.com cologne is built using different kinds of front-end and back-end technologies for example you can see react and rails you can see angular and Django so this is front-end technology and this is backend technology alright if I scroll down here is a list of all the front-end technologies they used so here in this project they use react the angular do use react view a source of force you know I don't know half of the frameworks if I scroll down again here are all the backends they use express is from no GS and they use PHP and here is flask and here's spring we're gonna talk about spring later on so it's really a good website how do you recommend you guys to look at each project and you can know the difference or pros and cons of front-end and back-end technology all right so let's say I'm very interested in where interesting view of course but this time let me show you react so I'm very interested in how to use react to build medium calm alright if I scroll down well this is a node project how do I know because every node product has a file called package dot JSON okay so if I click this file I can see here there are some dependencies okay if I go back do I see a directory called node underscore modules no right because the author didn't really push it there because there's no need let me close this to my local host and then I will install all the packages and launch it so click here copy this and then I'm gonna start my terminal so here is my current directory what I'm gonna do here is I'm gonna get clone copy and paste alright turn okay I have successfully downloaded the project from github ok so LS CD react I think that's the one okay as you can see they already have a dot key to learning it that's why my Z shell shows amount wrench right unless we have pets dog jisang but right now we do not have note on score modules directory okay so what I'm gonna do here is of a type NPM install this time I'm not going to specify any pet name if you simply just type NPM install this will trigger the installation of all the packages that we specified not not sorry not we but the authors specified in package dot JSON dependencies and adapt dependencies but if pressed return it starts downloading it would take a while right now if I clear and LS as you can see a new directory called note on score modules is generated by node install ok now we have all the packages this current react product knees how do we run it let's take a look at package ISA so VI package of course you can do this in vs code right ok press Enter in this package talk JSON file besides name version source of force dependencies we also have something called NPM scripts let's take a look here so in the script it looks like we can use start to start this project ok here we're not going to build we're not gonna test when I manage act we're not going to deploy we sim just want to start okay so let me exit the command is NPM well start okay so this start how do I know this start I know they start from the NPM scripts impact story so that's why the file is super important so press Enter okay as you can see now it is starting so we're starting at localhost 3000 of course you can change this number to 8080 whatever your favorite port number and this is a product but you know those are just some testing data but it's really similar to medium if you know what a medium is okay medium.com okay it's a clone right it's not exactly the same but you can take you can take a look so in summary if you find a good project on github or if you have your own project and you gave it to somebody else the first thing to do is you go into that directory and use npm install that will install all the packages you need

Channel: Bingyang Wei

Views: 25,478

Keywords:

Id: pqzNVQW9Pbk

Length: 6min 59sec (419 seconds)

Published: Sat Apr 18 2020