By this point, you should be familiar with the js-generate NPM node module the devcamp js builder. So open up your terminal and will begin using it. So I'm going to say I'm just going to make this a little bit bigger quickly. And what I want to say is js-generate and then we want to select one of these options.

We don't want to select skeleton redux router redux or or starter. What we want to do is select react-skeleton(Course Update) so lets select react-bootstrap and let's name this project madlibs. Okay now I'm going to cd into madlibs and I'm going to open it up in my text editor.

Now if you're not using a text editor with a built in terminal where you're going to want to do is run NPM start and install in your terminal. But for now we just want to open it up in our text editor so if you're using vs code and you have the code command installed you can say code and then a DOT and that will open it up. If you're using any other text editor just type in open right here with a dot and then I'll open up this directory here and it's basically your project.

So what you want to do is click on the next one that's right here you see how mad libs is right here. If you're using a different text editor just click right here and find your application in here it should be right here.

Now, you just want to open this in a text editor. Okay so if you're using a built in terminal you can close out this terminal window. If you're not you are going to have to keep that open. So what I want to do is basically now that I have this open I'm going to close out this welcome file and I'm going to go to my preferences and make my font size bigger so you can see my screen better so I'm going to select 18. If you're interested in this theme you can go over to extentions here and search blueberry dark theme, that's what this is, so I think 18 is a good size for us. I'll make it slightly bigger just in case, so 20 should be good.

Okay, now with that set up and you can see my font. Let's begin installing our node modules. So what we want to do is open the terminal here and basically what we're going to do is install what's in our package.json so if you go to this package.json file you'll see that there's a lot of dependencies at the bottom.

Basically this is code that's already been written that we're going to install. Now when you install this it's going to install a lot of code that you don't really want to push up to your github project if you have this on version control. So what we need to do is first go to this .gitignore.example file

and basically what's happening in here is we're saying ignore these files.

You don't really need to worry about what these are except for node modules so quickly changed the title of this file to .gitignore. The first thing to do is type in git init to initialize this as a git repository. Now if we type in git status you'll see we have all these changes that we want to be able to push up to our github project.

But it doesn't include node modules because one node modules isn't even installed yet we don't even have a node modules folder and 2 it's in our .gitignore. So now what we want to do is type in npm install and when you run npm install it's going to install all of our code that is in our package.json, all the dependence we have. And like I said once this is done installing it's going to have a big folder with a lot of code that we don't really want to push up to git.

So I guess while it's installing I'm going to go to Chrome and I'm going to go to github.com and I'm going to create a project so I can push this up to github so you can view individual commits when you want and other things. You probably want to do this too if you want to learn how to use git a little bit better. You don't have to, but if you want it on your github profile then I would recommend doing it.

So I'm going to go here and hit start a project

and I'm going to call this bodega Mad Libs with a dash and then I'm going to just change the owner tap or take a code school. You can just leave out the same and I'm going to call this bottega-madlibs. I'm going to change the owner to bottega-code-school, you will want to keep yourself as the owner. And then I'm going to make it a public repository and I'm going to create a repository.

So next thing we need to do is look at this.

We don't want to do this because we've already created our project. We just want to look at this one.

So push an existing repository from the command line so you can copy this and paste. So copy git remote add origin and it's going to contain this link.

Go back to your text editor and now that our node modules are installed we can paste it in here and hit return. Now what we need to do is push it up, and that comes back to the node modules. You'll see in our project here that we have all these green files and then we have this node modules file that slightly less green or gray.

If you click on that and open it you'll see all of this code. All of these directories with tons of code.

We don't want all of this code on our repository, we don't want to push it up to github. Because that would just be a lot of code that we don't want to do and it's not maintainable because this code is constantly being updated by other developers when they're doing their projects.

So a better approach to this would be to not push it up here and to simply run npm install every time you pull it down from GitHub which isn't going to be that often it's only when you pull it down for the first time or when somebody else is you using the project.

So this allows us to not push up all that code to github and it allows us to keep our node modules updated so that features we use such as react will be up to date and to the latest version, you'll see in here in our dependencies, react is in here as a dependency because all react really is is a library. Angular is a framework but you know it's a library.

So what we want to do is finally push this up to github. If you go back to github you'll see it git push -u origin master. If you copy that and head back to your text editor here and paste it and then hit return. This will push this up to our repository now it looks like it said failed to push some refs to https. Now, I'm not sure why that happened, I'm going to type in git status. I think the reason this happened is because we didn't actually add any of our code to our commit. So let's say git status then we want to type in git add .

Now if we type in git status you'll see it's all green and it's added. Now we want to paste that in and push it to the master.

Okay, we still need to commit it so my bad. So we want to say git commit -m and let's just say initial commit. Now let's push this up to our repository on github using git push -u origin master Okay, so I'm going to head over to the application here and reload the page or the repository and you'll see that it's up here on github.

So now that thats set up I'm just going to close this and I'm going to head back here to our text editor and that should be good. So let's just quickly start this up and see it in the browser. I'm going to type in npm start in the terminal here so NPM start it's going to say project is running at localhost 3000 and then it will do a bunch of cool stuff and then what we want to do is just change some of this text here.

Let's call this Bottega Madlibs and then another thing I want to do is change the title so if we go to index.html in the static folder. We just want to change the title here to say Madlibs. I'm going to close out index.html and .gitignore so we just have our app.js open and I'm going to head over to the browser and I'm going to go to localhost 3000. OK you'll see that it says Bottega Madlibs and you'll see that appears as Madlibs in your tab.

So another cool thing if you want to learn how to put this on a different port what you can do is go to env.js and change the port here. So you can say something like 2018 and then you'll have to stop your server using Control C in the terminal here.

Then type in npm start and it will start it back up and this time you'll see it says this project is running at localist 2018.

Now I'm going to head over to the application and I'm going to reload the page and it doesn't work because it's on a different port. You'll see it's now up and running here at localhost:2018.

So let's go ahead and open a new terminal window here. If you're in the terminal application just hit command T or command new and make sure you're in your project directory. I'm just going to do it in vs code and I'm just going to type in git status, git add ., git commit and make sure you type in git add with a period after it so adds all the files.

And then when you say git commit make sure you put a -m and then some quotes for message, m stands for message and then for the message we want to say "changed port and app title". OK now let's push this and that new code will be up in our project so if you go to your github account you'll see that it's there, but I'm not going to do that.

So let's go ahead and end the guide here and let's hop into the next guide where we will begin coding our application, I'll see you then.

Resources

Source code