okay let's get started let's create our project now one of the hardest parts when
using react with Express and Node.js simply setting up the project so I've
created a sample project to do this for us so we don't have to start from
scratch so if you go to bitly.com/express-react-starter that will
open up a browser you can go to github and you can just grab this starter
template here which makes it super easy to get started with debugging and
running them both in the same project and everything so back here we'll just do
git clone and then we're gonna clone it into a folder called react-cosmos-db
okay cool then we'll move into the react-cosmos-db folder and we'll
run an NPM install and I will see you on the other side of this thing because
this is boring and we're back okay let's open this Visual Studio Code and
let's have a look at what's inside this project so there's really two main
pieces of this project that you need to know about the first one is this source
folder here which contains all of the react portion of the application this is
generated by create-react-app and it is create-react-app living in this folder
in this folder here is where the server portion lives so Express and Node are
running right here now these two things have to run on separate processes the
front end runs on a Webpack server and the back end runs of course on the node
server it is a node server so to run these two things we need to fire them up
separately so to run the React portion it is the same as create-react-app it's
just NPM start from the terminal and then to run the backend portion of the
application we come over here to the debug tab and I've got some launch
configurations in here for you already just choose launch server press the
green button and that will launch the server portion and if we take a look
here I'll refresh this and we'll get a message back so let's talk about how to
debug for a second if we're debugging the front end we can do that here in the
browser dev tools the way that we normally would so let's say we wanted to
debug this message here because this message actually comes from the express
node server so I know that this happens in the App.js file so I can just open
up App.js and then I can drop a breakpoint right here so if I was to
refresh then we'll hit the breakpoint okay it's
going to slash API slash message alright so we'll continue through there and then
if we want to debug on the server let's go over there we can debug here as well
so all of our API calls are going to go to the server folder and then into the
routes to this index route here anything that slash API comes to the routes
anything else is going to be redirected to the react front-end so in this index.js file we can put a breakpoint here and then go back and refresh let's do
the same thing it'll hit this pretty point first let's step through and it
hits our breakpoint and we can go ahead and change this we can actually say res.json let's say welcome to react cosmos DB with let's do some fire emoji here
for effect perfect so we can send that back and
continue on and yep now we're welcome to react cosmos DB so this is how the
application runs and debugs now another thing to notice is that let's look at
the Ajax call that's made here for this for this message so if we refresh I'm
going to go ahead and step on through remove this breakpoint we're gonna go
back to welcome to React and that's fine and let's look at the network tab in the
network tab you'll see that we're calling a /api/message which
is right here /api/message and it looks like it's going to port
3000 so it looks like the React app and the server running in the same project
but our little server back here is actually running on port 3001 and
to prove that to you when I come up here and copy this over and 3001 and
/api/message and look at what we get back welcome to React how is that
possible well it's possible thanks to a proxy function of create-react-app so
React proxies all requests that are /api to port 3001 now when we run
this thing in production it looks a little bit different in production what
we'll do is we'll run npm run build like that and what that's going to do is
build the front end and then you'll notice that it's going to drop the front
end into the server folder inside of a build folder so I'll let you see that
when that comes up here in a second and there it is so this is all of our React
app now built for production and everything in the server folder is what
we would deploy and now that everything is in the same folder check this out we
can go ahead and fire up our server if we head back to the browser on port 3001
api message is still going to return slash api / message but look at what the
root will return it returns the application so this is exactly what we
want a development environment where we have hot reload and debugging and a
production environment where both React and Express are running on the same URL
and that's what the Express React Starter gives you now that we've got a
project set up we're ready to start building the application and that's
exactly what we're gonna do in the next episode I'll see you on the other side