Check out a free preview of the full Full Stack for Front-End Engineers, v3 course
The "Setup Proxy Pass" Lesson is part of the full, Full Stack for Front-End Engineers, v3 course featured in this preview video. Here's what you'd learn in this lesson:
Jem walks through establishing the application file system and how to no longer require sudo by changing the application ownership and initializing a git repo.
Transcript from the "Setup Proxy Pass" Lesson
[00:00:00]
>> So, pull up my own instructions because I don't remember these websites off the top of my head. So we can say curl https://deb.nodesource.com/setup_19.x, I'm gonna pipe that into a new shell with sudo, -E and bash, we're gonna put the outputs right there. And if you want, there's a link at the bottom of the screen on the slides.
[00:00:44]
So you can just copy and paste all these things, you don't have to do it the hard way like I did, and hopefully I didn't misspell anything. Okay, just double checking. All right, looks like it's still working. If you're wondering about why we're using apt versus apt-get. So apt-get is supposedly the lower level version of apts, and apt is the more human friendly version.
[00:01:16]
I know it doesn't seem that way. But that's just the reason the difference between the two, they really do the same thing. But we generally try to use apt for most things, but in this case, we're using apt-get. sudo apt-get install nodejs. All right, now we can double check that.
[00:01:49]
So we can say node --version. 19.7, nice, we're pretty far up there on the newer versions of Node. The next thing we wanna do is let's install Git. It may be installed by default, but I just wanna, actually I can say git. Yeah, git's already installed. But if it's not, sudo apt install git, and git has, of course, version control, which we will talk about as well, we'll touch on it.
[00:02:15]
When we installed Node.js, we installed Git. So next thing we need to do, let's set up our application. We need to establish the file system, we need to establish version control, always version control. Then we need to create a node.js server. The third one we've already done, and the rest of it, well, something you've probably done a million times already, if you've created any sort of projects, but let's do it together.
[00:02:37]
We're on the server, so things always get a little bit trickier. Do you remember how I ran into the issue earlier where I sudo that file? Well, I created the file but I didn't have sudo permission, that was really annoying. I don't wanna sudo all my files. So let's just change ownership of that directory to myself, and that way I never have to sudo again.
[00:02:55]
So we're gonna use the chown command, change owner. And we're gonna say -R recursively change ownership to myself, then we're gonna create a new application directory. Then we're just gonna create a new git repo. So other than the change ownership, these are things you've probably done a million times already, but let's do it together.
[00:03:13]
So clear, and I'm gonna cd up one. So I am now in /var/www. I wanna change owner, so I need to sudo for that cuz it's currently owned by not me, -R for recursive. And I'm just gonna change it to myself, user. The group and the name is the same and we're gonna change this current directory.
[00:03:47]
Okay, and you usually won't see an output when you change ownership. So next, let's make our application directory. So we're gonna mkdir, use mkdir command, and we're gonna say /var/. I know about it indirectly, I'm just being really, really pedantic, and we'll call it app, very original. And let's cd into app.
[00:04:12]
And let's take git init, to create a new git repository here. All right, Everybody with me on this step? All right, so next thing we'll do, let's create our application file. So we'll just say touch app.js. We're not gonna do anything with it yet. And because this is a Node.js project, let's make sure it works with npm.
[00:04:43]
And npm init will create a package JSON and all that fun stuff for us. So we'll just say npm init. You can call it whatever you want. I will leave it as app or a full stack front end, doesn't really matter. Version's fine, description's fine, entry point's fine, the defaults are totally fine.
[00:05:06]
So now if we ls, we now have an app.js, and we have a package.js, the package.json file. I didn't know about npm init for the longest time, it's pretty convenient. Okay, everybody make it to step three so far. We're hauling now, we're moving faster, if you can't tell.
[00:05:30]
So remember what I said about incremental knowledge? Yeah, I don't have to explain every step anymore. This is great, we're becoming fluent. So, step three was, after we did our step on this new page, touch, we created app.js file, we npm inited it. Now, let's create a basic node server in app.js.
[00:05:51]
We've done that before. So there's a variety of ways to do it. Remember the last time I said, hey, we're gonna create a new one where we're just writing directly to the response rather than reading from a file, because the file, it's one more step and I just don't wanna do that right now.
[00:06:04]
I just wanna write directly through response. So, I'll leave this up or, actually let's do this follow along, cuz we've already done this before, so I don't have to explain as much this time around. So again, on your server we're gonna open vi app.js, we don't need sudo this time.
[00:06:25]
So INSERT, we're gonna import http. And what's nice on the server, syntax highly is just turned on by default. I didn't do anything, so that's great. Then we're gonna create a server, which we've done before, http.createServer. That's a function. Let's move that down here, for my sanity. And that takes an argument, that takes a request.
[00:07:10]
Always requests and then response. Always in that order. And then I'm just gonna close it off here to make my life easier here. Now, we can shortcut a lot of things we did before, so we don't need to pull from a file because we're just writing a very simple response.
[00:07:27]
So we're just gonna write directly to the response, we can do that. So we're gonna say res.write. And you can put whatever you want, I'm gonna say On the way to being a full stack engineer. Now I'm gonna say full snack engineer, cuz that's where I'm at right now, full snack engineer, And close that off.
[00:08:00]
But we can't just write willy nolly, because how does the server know that we're done writing? So we have to call end(). We need to be explicit about when we're done with that response. And we'll close it off and send it to the client at this point. Next, we didn't say which port we're gonna listen on.
[00:08:21]
Before we did this on a separate line, we can just chain these together rather than create a new server const and do the port. So we'll just say listen on port 3000. And then this is just a good practice, console.log. We'll just say server started. Okay, and let's go ahead and write and quit this file.
[00:09:04]
Whoops, caps lock on, there we go. So next, remember, the one piece we're missing is we have an application, we have a node server. We have a nginx server, but how do they know how to talk to each other? So we need to create what's called a virtual configuration, a virtual server.
[00:09:25]
That way we'll tell, any request that comes into our server, we'll say, hey, ngnix, route here. Just proxy all the requests from nginx to our node server. So we're gonna use that proxy_pass directive that we talked about. So this is a little bit different, a little bit off the beaten path, but this will make our lives a little bit easier to reason about.
[00:09:47]
So we're not messing around with the default nginx configuration. So you wanna sudo vi/etc/nginx/sites-enabled, and create something called fsfe. The name of this doesn't actually matter, I just say full stack frontend for consistency across the board when I'm modifying it later. You can name it whatever you want.
[00:10:10]
A good practice is actually naming your domain name. And you can call it dot com, you can call it whatever you want, it doesn't affect the actual configuration. But, in my instance, I'm gonna keep it fsfe. Okay, so let's go ahead and do that. sudo vi /etc/nginx/sites-enabled/fsfe. All right, so what we need to do here is create a virtual server block.
[00:10:49]
And why we're creating this and not modifying the default is we're just taking out all the extra comments, all the extra things we don't actually need. And we're just gonna distill it down to these are the actual things you need to run your server, just to make our lives easier down the road.
[00:11:05]
So I'll give you a second to copy this and then I will walk through it. Otherwise, it's hard to follow along if I'm typing and talking at the same time.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops