Let's start to integrate s build into our project before we start to write any code, however, I want
to take another very fast glance at the documentation for its build itself.
I'm at s build GitHub Io once you're going to find Transform API on the left hand side.
Now, as you scroll through the documentation, you might see that there are a couple of little examples,
snippets of code, each of these are describing how to do some particular thing with s built.
You'll also notice that on the top right hand side of each of these little panels are instructions on
how to work with s build from a particular environment.
So if you click on the CLI tab, that will show you how to work with s build from your command line
or your terminal.
If you click on jobs that will show you how to work with s build from a JavaScript environment.
And then finally and very interestingly, there's also a go tab here.
So this is describing how to work with s build from some go programming code or to go programming language.
Naturally, you and I are not really working with go here at all.
So why is the good stuff here at all in the documentation?
Well, it turns out that the entire E build tool is actually written using go.
How are we going to use go code or anything like that inside of a JavaScript app?
Remember we had said that we wanted to run all this build stuff directly inside the browser and well,
your browser just doesn't know what to do with go code.
So it seems like this might be a big problem.
Don't sweat.
It turns out you just need to understand a little bit more about s build to understand how all this
stuff kind of fits into the big picture, the one or two very quick diagrams.
OK, so this is a diagram of the build NPM module.
Whenever you install this module, you're actually getting a rather small amount of JavaScript, this
very small amount of JavaScript is responsible for really just passing along commands that you issued
to this module, to this go code or this go executable.
So if you ever tell its build to go and bundle something or transpose something or do anything like
that, you're passing along some series of commands to the JavaScript wrapper.
And that in turn is just passing those commands along to the actual go executable.
This go executable is the thing that does the actual transpiring and the building.
It's what does the heavy lifting inside of our application.
Now, you might notice that you and I did not actually install a module called S built in the last couple
of videos.
Instead, we installed a slightly different module, one called Yes, build dash w a.
S m.
ASEM is short for Web assembly.
This is a feature that is supported in many modern browsers but allows you to execute comp. c C++,
C, sharp rust and go code.
So build A.
S M is an NPM module that gives you a rather small amount of JavaScript.
We're going to interact with this JavaScript and eventually tell that JavaScript that we want to bundle
or transpires some amount of code that JavaScript is not actually responsible for doing the bundling
or the transpiring.
Instead, it's going to delegate all that to a web assembly binary.
This Web assembly binary is all the actual go code of build compiled to work inside the browser.
So I know there's a little bit over the top and it's a little bit more information than we need to know
to work with the Yes.
Build zones, telling you this because we're going to do some kind of interesting set up stuff to get
build running inside the browser.
So as we start to go through some of this interesting set up stuff, it's all because it's build itself
is written as go we can't run, go inside the browser, go instead.
Yes, build is compiled into this web assembly binary which can be executed inside the browser.
And on top of that, it's actually going to run very, very quickly.
Web assembly in general is very, very fast, and that's why it's going to run so quickly to do all
of our compilers, all of our transpiring and all of our bundling.
OK, so with all this side knowledge out of the way, let's go back over to our editor and start to
set up this build stuff.
OK, the first thing we have to do is make sure that we can download or get access to that Web assembly
binary inside of a react application.
So we're going to do one little step of set up right now.
That's going to be a little bit strange, a little bit painful.
We're only going to do this one time and we're we're going to eventually replace the step with a much
more elegant solution.
So here is the kind of nasty part.
I'm going to find the node modules directory inside my code editor.
I'm going to expand it and then going to scroll down and find the build dependency.
Eventually, I will find it.
OK, I'm close now.
There it is right there, so it's build dash web assembly.
If you do not see this folder, then just reopen your code editor or open your code editor a second
time.
I'm going to expand that folder.
And then inside there you'll find a file called Eskild Dot Web Assembly.
So this is the compiled go code that can correctly work inside the browser.
We're going to copy this file.
We're then going to collapse the node modules directory.
I'm going to go into my public directory and paste it inside their.
So I should see public build dot web assembly.
So why did we do that?
Well, we eventually need to make use of this Web assembly stuff inside the browser, that means we
need to actually get this compiled code inside of our browser.
We need to actually load it up in some way.
Every file that you place inside the public directory of a ReachOut project and B, fetch very easily
from inside the browser.
So that's pretty much all we're doing here.
We're just making sure that this E build stuff can fetch that binary and do the actual transpiring for
us.
We only really have to do that step one single time.
Like I said, we're going to eventually have a much more elegant solution and going into the node modules
directory and trying to copy stuff around, don't worry, we'll get a much better solution.
OK, so let's take a pause right here.
We're going to start to make use of that binary in the next video and start doing some actual transpiring.