This course has been updated! We now recommend you take the Intermediate React, v5 course.
Transcript from the "Building Your Project for Production" Lesson
[00:00:01]
>> Brian Holt: We're gonna need babel-cli so that we can compile our node applications with babel, cuz we still have JSX inside of our application, right? And node out of the box does not know how to understand JSX. JSX is not normal JavaScript, so we need to have babel compile our node code, which is not atypical.
[00:00:19] That happens frequently. So babel-cli, and then the other one we need to put in here is express. Express is a JavaScript node's server-side framework. You could use happy.js, you could use any of the other ones out there. I'm just gonna show you Express cuz it's the most common and the most simple, to be honest.
[00:00:40] So install those two as well.
>> Brian Holt: And you don't need the capital d there, so that's fine.
>> Brian Holt: So that'll install those two. I want you to go into your package.json now. Here inside of scripts, we're gonna put a couple more things. The first thing is, we're not gonna be using our dev server, we're gonna be building for production now, right?
[00:01:05] Because that's what our Node server's gonna serve. So we're gonna make another one called build.
>> Brian Holt: That's gonna be parcel build --public-url ./dist/src/index.html. You need a comma up there as well. So let's talk about this. Parcel build is going to build your application for production. So it's gonna minify, it's going to do all that stuff for you.
[00:01:39] --public-url, this is going to identify where your static assets are being served from. Right, cuz all these relative paths need to be correct, right. So if I'm trying to serve client app, I need it to say /dist/public url. That's what that's doing. And then here I'm giving it the entry point just like I did up here.
[00:02:02] So that's what build does for you.
>> Brian Holt: And then you're gonna put start underneath that. This is gonna start our Node application to do the server-side rendering. So npm,
>> Brian Holt: So I'm gonna do it so it does npm run build, so it's gonna run build first before it starts the application.
[00:02:24] And then I'm gonna say &&, so this is only gonna work in bash. If you're in Windows, you might have to do this a little bit differently.
>> Brian Holt: If you're doing this with Windows, I'll show you how to do it in just a second. But if you're doing this with bash, babel-node server/index.js
[00:02:50]
>> Brian Holt: And now you can do one command if you're doing bash. It just says npm run start. It'll build it and it'll start serving. If you're on Windows, get rid of this && business right here. And so it's just this.
>> Brian Holt: So it's just that, and then you, on Windows, have to remember to run npm run build first and then run npm run start.
[00:03:16]
>> Brian Holt: Okay, good.
>> Brian Holt: The key is that you have to build your project first, right? You have to compile all the assets together. I just do this because I often forget to compile my assets, but I can't start the Node server until I compile it. So it works a little bit better for me.