Check out a free preview of the full Complete Introduction to React (feat. Redux and React Router) course:
The "Using Express Part 1" Lesson is part of the full, Complete Introduction to React (feat. Redux and React Router) course featured in this preview video. Here's what you'd learn in this lesson:

As Brian has pointed out, universal rendering happens on the server and is sent in the initial payload to the browser. This means the server must run the React application to generate the output. Brian is using Express, a lightweight Node application framework, to create the server environment.

Get Unlimited Access Now

Transcript from the "Using Express Part 1" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Brian Holt: Here comes a bunch of just code vomit, unfortunate this is a really long file and you just have to write it. And there's no, again there's like, you go from zero to done, and there's no middle step. So I'll be explaining line by line while I'm going, but then will look at it holistically after I'm done.

[00:00:22] And then after I'm done with this I'll cut a branch.
>> Brian Holt: Yeah I got, I think we're doing well in time. So we're gonna be done by five I think.
>> [INAUDIBLE]
>> Brian Holt: What's that?
>> Speaker 2: What do you call this file?
>> Brian Holt: This going to be called app.js, oops.

[00:00:47]
>> Speaker 2: In the root?
>> Brian Holt: Yeah this is going in the root and this is not going JS. So it's going to be app.js but it's not going and JS.
>> Brian Holt: We can also call it server JS if that's better for you just make sure that you always refer to as such.

[00:01:06] First thing you wanna do is babel-register. This is basically saying it's going to hook into require. Now every file that you get required, is going to transpiled, but it's key to note that this file that we're in right now app.js does not get transpiled. So we can't use all our fanciest ES6, we can't use JSX in here, we can only use whatever node it can understand, but everything that it requires can.

[00:01:32] And you can use babel-node if you want to, but I don't wanna show you that because you don't use babel-node in production, it's way too slow. So this is the way it has to be.
>> Brian Holt: We're gonna be using express, express is just a lightweight server for node.

[00:01:52] You could be using COA you could be using happy anywhere this is totally fine. Upon react, hope you are familiar at this point with react, otherwise I have greatly failed you.
>> Brian Holt: Const reactDOMserver, this is specifically a package for rendering react to a string. So it's going to be react-dom/server.

[00:02:20] We're going to get react router as well.
>> Brian Holt: There is a lot it requires here.
>> Brian Holt: And actually,
>> Brian Holt: Actually what we want out of this is not React router, we want match out of it like that.
>> Brian Holt: And we also want RouterContext. So match and RouterContext.
>> Brian Holt: Then we want, from react redux, we want provider,

[00:03:08]
>> Brian Holt: Equals require react redux
>> Brian Holt: Const store, we're going to be pulling in our own store from our own store, so it's gonna be require./JS/store. Unfortunately, we can't do the trick of saying just store we actually have to do say JSX because this is not Webpac there's no resolve for us, we actually have to specify that this is the JSX file.

[00:03:46]
>> Brian Holt: You're gonna pull in low dash underscore equals require a low dash we're going to using that for the templating that we're just talking about in the HTML. We're pulling in FS, which stands for file system. This is from node, cuz we have to read that index file into memory.

[00:04:05] I'm gonna do const port=5050, you can do 8080y you can do 8000 whatever you want, I gonna use 5050. Const basedTemplate = require.
>> Brian Holt: Sorry, not require cuz you can't require HTML, so I'm gonna say fs.readFileSync (./index.html), so this is just gonna read whatever is in index or HTML, bring that into memory.

[00:04:41] We're gonna use that to template. Actually right now, so we're gonna say const template = _template(baseTemplate). So basically this is going to create a new function that whenever we call template, it's going to create a new string with this using this template.
>> Brian Holt: That's usually confusing for some people, so this is a function that returns to function in case anyone missed that.

[00:05:17]
>> Brian Holt: Const clientapp, this is where we're gonna pull in our clientApp = require(./js/client/ClientApp.jsx), const, is that all we need out of there?. I might actually be,so we can just actually say routes, right. Routes like that.
>> Brian Holt: Actually that might not work, this might not work in node. We'll try it and we might have to refactor this to be a little bit more explicit.

[00:06:02]
>> Brian Holt: I mean, const works for sure. So const app =express. Actually, I remember it doesn't work, so sorry. We have to refactor a little bit. So this has to say const match=react router.match, const routercontext = reactrouter.routercontext, and I'm just turn this into reactrouter.
>> Brian Holt: And this is gonna be ReactRedux.

[00:06:49]
>> Brian Holt: And this is gonna be Provider.
>> Brian Holt: .provider, and they're going to say const store, this one's all that weird, but just put that.
>> Brian Holt: Equals store.store.
>> Brian Holt: Okay, yeah I forgot. Because destructuring doesn't work in node as of 4.3, it doesn't work anyway. I'm may work in five, I don't think it does though.

[00:07:34] Okay, and then I have to do routes down here as well don't I?
>> Brian Holt: This is going to be ClientApp.routes,
>> Brian Holt: ClientApp=that.
>> Brian Holt: Is that enough requires for you? [LAUGH] It's a wall of text. All right, now for the meat of it, this gets a little fun [LAUGH] depending on the definition of fun.

[00:08:13]
>> Brian Holt: So we'll create a new express server right there. And then we're gonna do app.use/public, express.static(./public). Now, what's happening here? [COUGH] What's actually happening here is, whenever someone request something to public, we wanna just immediately serve them whatever files in there, right? So, if someone requests style.css if we want to serve them, styles.css, that's what a static file server does.

[00:08:52]
>> Brian Holt: It also sets all the proper headers and everything like that, it does some auto magic for you behind the scenes, that's really annoying and not very fun so I'm okay doing that. And now everything else, if that's not going to public, it's going to go through react router and that's the way we want it.

[00:09:06] So we're going to say app.use, and it's going to be a function that says (req, res).
>> Brian Holt: So basically anything that doesn't match this, is going to match this, that's the gist there. And we're going to use the match function that we brought in from react router. And what this is going to do is, this actually uses the same matching algorithm that react router does and it's going to run it on the server for us.

[00:09:37] So routes is gonna be routes,capital R, right? So that's, this function that we're getting from clientApp.
>> Brian Holt: Okay, and location is going to be coming from our requests, so that's why it's req and res here, this is request and response. So everything to do with what the user is sending to you goes into request, everything they want to send back goes into response.

[00:10:04] And that's always abbreviated in node as req and res.
>> Brian Holt: If you want to put requests and response that's fine. Just showing you how everyone always does it.
>> Speaker 3: Can you use error functions?
>> Brian Holt: Yep, you can.
>> Speaker 3: Okay.
>> Brian Holt: It's a crapshoot I know, and most this is like I just read it the first time as he's like does this work?

[00:10:28] Damn and they switch to the old syntax.
>> Brian Holt: Okay, so match is gonna do its best to try and find something that matches, and then it's gonna call it's callback with whatever happened. So it's gonna be error,
>> Brian Holt: RedirectLocation render props.
>> Brian Holt: So it's going to call this function whenever it finds or doesn't find whatever it's looking for.

[00:11:06] So error is going to be like I hit a 500, like something went wrong and what the if their server exploded, that's error is. Redirect location means react router told me to redirect somewhere, so I want you to redirect somewhere. And then if both error and redirect location are undefined and render props is done, then that means I found the correct route here all the properties I want you to give to the route.

[00:11:30] And then if error, redirect location and render props are all undefined, that means 404, nothing was found. So that's the general progression of what's going on here.