Now that we understand the general architecture that we're going for, we're going to take a look at
two possible ways of implementing this.
The first way that we're going to take a look at implementing that architecture is going to be one way
to put it all together very easily.
It's me, very simple, very straightforward way of implementing what we just saw on the last diagram.
After we take a look at this very easy way of putting things together, we're then going to take a look
at a much more challenging way, way, way, way, way more challenging way of putting all the same
stuff together.
Why are we taking a look at both approaches?
Well, in this course, we're going to go with the much more challenging solution of putting this out
together.
We're going to make things just way more complicated than they need to be.
And the reason for that is that, well, we're in a course and because we are inside of a course, I
want to show you the more advanced way, the more challenging way, the more kind of in-depth way of
putting all this stuff together.
I don't want to just keep out and say, oh, yeah, here's how you can just hack this stuff together
very easily.
We'll go into a little bit more on why this approach is more challenging in just a moment and exactly
why we are going to take the more challenging approach right now.
Let's just focus on how we can very easily set up an architecture like this right here.
OK, so here's the very easy and straightforward approach.
Right now.
We are making use of racked up, as you probably well know, when we generate a new reactor up, we
get a couple of different scripts created for us inside of our package JSON file.
I'm going to go back over to my editor very quickly and find where those scripts already find.
So here's my packages on file, I'm going to go down to my scripts section right here, and as I just
mentioned, we get a couple of scripts created for us automatically.
Two of them are start and built.
The start script starts up the development server that is the command that we are very familiar with
running.
We've also got build, which we can use to build our production ready bundle for all of our different
react assets.
It's a very easy way that we can implement this architecture right here would be to just add in another
script to our packages on file, and we might call this something like serve.
And if we run the serve command, we might run some code that's going to start up a local node API.
So by local node API, I mean a copy of node or really of express running directly on the user's machine.
That's going to do those three different tasks we just mentioned in the last video.
So let me just very quickly show you how we might put this thing together.
You don't have to write out any of this code.
I'm going to delete it very quickly to back inside of my packaged JSON file, I might add, in some
kind of serve commands.
And whenever I run surf or really a user run surf, because it will be up to our users to run the server
command.
I might decide to run something like Noad.
Local AP J.S..
Then inside of my project directory, I might create that local API JS file.
And then inside of here, I might import, express or required in.
I might then set up a couple of different routes, maybe one route to serve up react production assets,
so that's really our entire bundled react application, all the components we've been putting together.
I might create another route to save a list of.
Sells into a file.
And then one more route that we could use to load up a list of cells from a file and then at the very
bottom, I can have my express server listen on Port 40, 50.
So this is all implementation, we could add indirectly to this local API JS file.
Whenever a user runs, this serve, script will then start listening on ports.
I put four thousand five right there.
Just to be consistent with, say, 40, 50.
So that's going to start up our express application on localhost 40, 50.
And our express server is going to do everything we just listed out inside these comments, so one route
to serve up all the react production assets, one for saving a list of cells into a file and one for
loading up a list of cells as well.
So all this functionality, we can very easily pack into just one single file or maybe a couple if this
file ends up getting really large.
So, again, this is one way of implementing all this stuff in a very simple and straightforward fashion.
We're just adding in one additional script to a great ReachOut project, and that is pretty much it.
We can then figure out some way to deploy our ReachOut project to NPM so that users could install our
project as an NPR module and then run it from the command line, like exactly how you see it right there
and then be that, be it.
That's the whole thing.
We can solve all this stuff very, very easily.
But again, we're not going to take the easy way.
We're going to take the much more challenging way.
So let's take a pause right here.
We can come back.
Next video.
We're going to discuss exactly why we are taking a more challenging way, what benefits it actually
gives us and what the more challenging way is anyways.
So a quick pause and cover all that in just a moment.