Full Stack for Front End Engineers

Full Stack for Front End Engineers Exercise 17: Putting it all together


This course has been updated! We now recommend you take the Full Stack for Front-End Engineers, v2 course.

Check out a free preview of the full Full Stack for Front End Engineers course:
The "Exercise 17: Putting it all together" Lesson is part of the full, Full Stack for Front End Engineers course featured in this preview video. Here's what you'd learn in this lesson:

In this exercise, students work to combine Gulp and Forever into one command. Jem reviews the exercise solution by coding a deploy command and demonstrating it on his server.

Get Unlimited Access Now

Transcript from the "Exercise 17: Putting it all together" Lesson

>> Jem: So last exercise. This is the last one. We're gonna put this all together, and have an entire deploy system, and forever, and a gulp task. And it all points to your domain, so you can edit freely, and then just run this task, and it's gonna update for you automatically.

[00:00:15] It's gonna restart your server, so.
>> Speaker 2: Before we jump off here.
>> Jem: Yes.
>> Speaker 2: Just noticing, what we're logging out of that forever task is the standard output.
>> Jem: Yeah.
>> Speaker 2: If the app.js writes the standard error, is forever catching that?
>> Jem: No, there's more advanced output. So we normally wanna do forever-o to log output.

[00:00:40] There's a special log for error cases as well, and that's a great point. But because this is pretty beginner, we're just gonna keep the very basic level. I encourage everybody to look up the forever docs, cuz they're much more advanced. We're gonna have a log for standard output, a log for errors, a log for just what's happening in our Node app.

[00:00:58] But again, that's more advanced. But, as we learned, we wanna log all that stuff independently cuz if it breaks, and it probably will break, you wanna know why. Great question though. So we're gonna put this all together. There's numerous ways of doing this. We could have do a shell script.

[00:01:15] I prefer mpm scripts because they're very straight forward. So in your package.json,
>> Jem: Don't worry, I'm gonna blow this up in a second. We're just gonna run, we're just gonna script task. So when we run mpm run deploy, it's gonna run gulp build and forever start, and all in one go.

[00:01:36] So I'll do that now.
>> Jem: So vi package.json.
>> Jem: Is that big enough?
>> Jem: And I'm just gonna delete that line.
>> Jem: And I'll just call this deploy.
>> Jem: So what we wanna do is we wanna run on gulp,
>> Jem: build I believe was the task name, yes.

[00:02:13] The & just means whenever gulp's done running, we're gonna run the next command which is forever. So forever start app.js.
>> Speaker 2: So right now it says test, we just deleted the test line and replaced with a deploy line?
>> Jem: Exactly, and we're logging as to forever and forever.log.

>> Jem: So now,
>> Jem: I can run npm run, what did I call it, build? Or did I call it deploy?
>> Speaker 2: You called it deploy.
>> Speaker 3: Is it gulp build?
>> Jem: I called it deploy, right?
>> Jem: And all said and done. So if you had a, yes?
>> Speaker 2: I was wondering, did we wired up so that the CSS and JS would be served by the-

>> Jem: I believe so, let me look at the index.html
>> Jem: I never did wire that up.
>> Speaker 2: And I don't think the config is gonna do it either.
>> Jem: No, it won't do it automatically. So in the index.html, we just point to /dist/main.min.js, and our CSS file would be main.min.css.

[00:03:42] That would be how you wire it all up. Should add that in, but everybody's looking a little bleary eyed at this point. But [LAUGH] thanks you are on point today.
>> Jem: Is there anything to be done about DigitalOcean dropping idle terminals? Yes, that is configurable, via whatever terminal you're using.

[00:04:05] So I'm using iTerm, and I have a set idle. So about every five seconds it just sends keep alive connection to the server and so I stay connected all the time. But great question.
>> Speaker 2: So how did you run that once you've added it to the package?
>> Jem: You just run npm run deploy.

>> Speaker 2: Okay, cool.
>> Jem: And just runs.
>> Jem: And so the earlier question, and I just wanna make sure everybody gets everything down. This is the, let me see if I can find it.
>> Jem: I had it earlier.
>> Jem: So I remember the earlier question. It was why do we run things using NGINX instead of using Node directly.

[00:04:55] Well on my jemyoung.com I'm actually serving three websites. I'm serving magic8ball.co. I'm serving blog.jemyoung.com and I'm serving jemyoung.com. But it's all running on the same server and we could do that using NGINX. So my configuration for my magic8ball server just looks like that, nothing special. But my configuration for my main server, Grant, I'm using a SSL so it's a bit more complex.

[00:05:23] Ignore all that, ignore all that. And here I'm using location blocks to redirect everybody to the Google Docs. But that's why we're using NGINX, in that we can just keep adding servers and servers and servers and only using one main server. And that's the benefit.