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
