Now that we've dealt with all this Web assembly stuff, let's start to set up build inside of our index
file.
I'm going to first begin by adding in an import statement at the very top four star as us build from
its build Dash ASEM.
Then inside of my app component, I'm going to write out a function inside of here that will initialize
this building.
So I'm going to write out.
Consed start service, this will be an async function.
Inside there, I'm going to say service is a wait, it's build start service.
I'm going to put in a configuration object, the first option will be worker, true, and the second
will be a M capital U RL.
All capital is right there.
We'll provide that a value of E build web assembly.
So this is the actual initialization we're giving us, build the opportunity to go and fetch that Web
assembly bundle or that binary that we just placed inside the public directory.
So this string right here is essentially saying, hey, just go into that public directory, try to
find s build web assembly inside there.
That's where you can get that compiled binary.
After that, we're going to get back a service object, the service thing right here is what we're going
to use to actually bundle and transform, transport.
All that kind of stuff are code.
Right now, I'm just going to console log that service and just make sure everything is loading up as
expected.
Now, we are not actually ever calling this service function, we need to make sure we call it at some
point in time, we only have to call it exactly once, probably when our component is first rendered
on the screen.
Let's import the use effect hook and use the fact hook to call start service just one single time.
I'm going to go back up to my statement from react and get the effect.
Then right after start service, I'll put in a use effect.
Inside there, a Carlstadt service, and to make sure that we only tried to call start service one single
time, I'm going to put in a second argument of an empty array.
Remember, that just means we're going to run this function one single time when our component is first
rendered to the screen.
OK, let's save this, go back over to the browser and see what happens with this console log.
I'll do a refresh and then after a little brief pause, we shouldn't see a console log looks like this,
it has some functions that look pretty promising, a function called build, serve, stop and transform.
We're going to eventually use the transform function and the build function, transform is going to
attempt to execute some trans piling on some code that we provide.
So transform is only for trans piling.
It does not do any bundling whatsoever.
If we want to bundle our code, we're going to use built.
However, to use build inside the browser, we have to do some extra little setup that we're going to
eventually get into.
So right now, we're not going to worry about bundling.
We're just going to do the transform stuff just in transpiring and make sure that we can take some joysticks
and stuff like that and turn it into normal JavaScript.
OK, now we've got this working.
Another quick pause when we come back, the next video, we'll make sure that we use this service to
actually transpired some code and show the result any time a user clicks on our button.