Static Assets Project Exercise

[00:00:00]
>> So I just showed you how to do a multistage build with a Node.js application, right? So what I'm gonna have you do now is I'm gonna have you do a multistage build with like a static website. This one down here that's called Static Assets Project. So, here's all the instructions and then if you see right here to scroll down to see my answer, I just feel like a big space if you scroll all the way down here it will show you the answer.

[00:00:27]
It's also in that GitHub repo that I showed you earlier. So how many of you are familiar with Create React App? Imagine many of you, right, if not there's a great coarse in Frontend Masters that's called the complete intro to React version five. All right, you don't have to do any of the React parts of it.

[00:00:46]
We are just gonna do Create React App to scuffle out a project for you. So, let's actually just go ahead and get started. Like I'll get you up and running with the React portion of this and then I'll leave you to build the actual Docker file. See, the idea here is that we're gonna create a Create React App.

[00:01:07]
We're gonna build that into a built project, right? And then we're gonna copy all those files into an Nginx container and the Nginx container is gonna serve all of our static assets for us, Okay? So let's go ahead, I'm gonna just copy this cuz it's really long. Npx, this is gonna run create-react-app.

[00:01:29]
They recently like probably last week, changed how create-react-app works so I had to totally change this. It's a good thing I tried this last night. [LAUGH] Cuz that would have been real embarrassing, the React teacher doesn't know shit about React. I mean, might be true, who knows. All right, so we're gonna go back in, what are you doing?

[00:01:48]
Stop that. All right, so I'm here in my intro-to-containers project, right? I'm gonna run that command that I said in there, which is gonna run it off of npm directly. It's gonna run create-react-app. It's gonna create a project called static-assets-project. And it's gonna be the typescript version and we're not confused yarn.

[00:02:11]
Why are we gonna use TypeScript? It's another ploy for me to get you to use more Microsoft products. Actually, I just wanna show you like as involved as a build process as possible, right? And that doesn't actually really matter. So this will take a couple minutes to get everything set up.

[00:02:27]
If you get a note that says, you don't have a template associated with your project or something like that, which is what I was seeing when I was doing this last night, uninstall your global installation of create-react-app. That's what eventually solved it for me. This ignore existing, hopefully should sidestep that for you, But if it doesn't, that's how I was eventually solved problem.

[00:02:56]
Okay, this will take maybe, I'm gonna guess like 30 more seconds to get through. So, this is gonna go install a React project that uses TypeScript. And then just for fun, you and I are gonna go put in SAS as well just to have like a bunch of dependencies.

[00:03:13]
So you'll see here my notes, I have this where it says optional. I'm gonna do this but you could totally skip this if you're not feeling it or something breaks for you. But the reason why I'm putting this in there is if you run the node modules and the npm install locally, this will break when you copy it in the container.

[00:03:34]
Cuz it'll build it for Mac or for Windows and it won't build it for Linux, unless you're on Linux then I don't know how to break a computer. I could try. What is going on here? Well, that's nice of you. All right, there we go, happy hacking. So now if we go into the static-assets-project, You'll see here you have a relatively full project here.

[00:04:08]
The first thing I want you to do is I want you to create a dockerignore. And let's open and edit that dockerignore file cuz that won't come by default. Inside of here, So you can also just come in here and say New File, dockerignore, right? We're gonna ignore .git directories and we're gonna ignore node_module directories and we'll also ignore, Yeah, anyway, that's fine.

[00:04:50]
There might be a cache in here as well. No, I don't think there is. Anyway, So we'll do that first, okay? The next thing I want you to go in here is I want you to say npm install. This is the optional part, node-sass. And then while that's doing that, we're gonna come in here and we're going to rename our source file.

[00:05:15]
So there's App.css, just right click on that and say rename. And just put an s in front of the css. So this is not a SASS class, I'm not teaching you any SASS. I'm not even necessarily endorsing the use of SASS, right? I don't use it myself anymore.

[00:05:34]
But, all css is valid SASS or valid scss, right, so that's why you're able to just change it without changing anything inside of it. So we name both of these to be s.css. And then in two places you need to go change. So, App.tsx, just change that to scss.

[00:05:54]
They're on line 3, and then on index.tsx, same thing here scss, okay? So now we have a SASSified project as well, so it's TypeScript, it's SASS so there's a lot of dependencies flying around here, right? So just to make sure that everything works, we're gonna say npm run start, I think is what it is.

[00:06:23]
And our project should start locally in the development mode. I might still have something running on port 3,000, To start. There we go, there you go. So, pretty vanilla node project here, right, or not node, but React. Little did you know this is actually the complete intro to React v6 and we're starting now, just kidding.

[00:06:56]
That would be an intense course, containers all the way to React back to containers. Challenge accepted. That's all you need to know about React for this particular piece of the course. So go ahead and stop that server. So the way that you build this project is you're gonna say npm run build, right?

[00:07:16]
This is a note to take cuz it's probably gonna go into your Dockerfile, right? And this'll go through and this'll actually build everything out into a directory, so it's creating an optimized production build, right? So this is gonna generate all of your index.html, your CSS's, your JavaScripts. And so now we have this build directory.

[00:07:41]
So if you look inside of your build directory, you can see here, it's got a favicon, it's got a manifest, it's got a bunch of stuff in here, right? Then the key here being that you have a static directory build/, Static. You can see there's the CSS, there's JS, there's media, right?

[00:08:05]
Suffice to say, if you copy the entire build directory across, that's gonna be your finally built project. So as such, I want you to go into your dockerignore, Inside of your stochastics project. And we're gonna add one more line here to our dockerignore and that is going to be, Built, like that.

[00:08:31]
So that we won't accidentally copy like a pre-built project. Okay, so at this point, this is where I'm gonna leave you to do the project. So what you're gonna need to do is you're gonna have a multi-stage build, right? And you're gonna go and you're going to copy in the project, you're gonna build the project, right?

[00:08:52]
And then, you're gonna take that output and you're gonna copy it into a Nginx container, right? So the container that I want you to use, if we come back here, I mean it's anything in here. You can do Nginx latest, you can do alpine. I think I have it so you can use Nginx 117, which I believe is the latest.

[00:09:14]
So if you wanna tie it to a proper version like I've been telling to do I think 117 is the correct one. Let me just triple check that that's the correct, cuz I have it written out here. The correct version is NGINX 1.17. So this is the one that I want you to use right there.

[00:09:36]
Okay, and then, so there's a very specific place that you have to copy it, Which is here. So copy the build files to user/share/nginx/html, everything goes into that directory, right? And then don't modify the CMD, because Nginx knows how to start itself and so you don't wanna overwrite that.

[00:09:59]
So if you just copy everything into this correct directory Nginx will take care of the rest for you.