1
00:00:01,780 --> 00:00:06,750
Now that we've dealt with all this Web assembly stuff, let's start to set up build inside of our index

2
00:00:07,360 --> 00:00:07,670
file.

3
00:00:08,410 --> 00:00:15,730
I'm going to first begin by adding in an import statement at the very top four star as us build from

4
00:00:15,730 --> 00:00:18,540
its build Dash ASEM.

5
00:00:20,160 --> 00:00:25,560
Then inside of my app component, I'm going to write out a function inside of here that will initialize

6
00:00:26,100 --> 00:00:27,330
this building.

7
00:00:28,370 --> 00:00:29,270
So I'm going to write out.

8
00:00:31,830 --> 00:00:36,630
Consed start service, this will be an async function.

9
00:00:37,960 --> 00:00:45,520
Inside there, I'm going to say service is a wait, it's build start service.

10
00:00:46,860 --> 00:00:53,640
I'm going to put in a configuration object, the first option will be worker, true, and the second

11
00:00:53,640 --> 00:00:57,680
will be a M capital U RL.

12
00:00:57,840 --> 00:00:58,860
All capital is right there.

13
00:01:00,360 --> 00:01:04,860
We'll provide that a value of E build web assembly.

14
00:01:07,190 --> 00:01:13,310
So this is the actual initialization we're giving us, build the opportunity to go and fetch that Web

15
00:01:13,310 --> 00:01:17,360
assembly bundle or that binary that we just placed inside the public directory.

16
00:01:17,840 --> 00:01:22,190
So this string right here is essentially saying, hey, just go into that public directory, try to

17
00:01:22,190 --> 00:01:24,510
find s build web assembly inside there.

18
00:01:24,710 --> 00:01:26,690
That's where you can get that compiled binary.

19
00:01:29,730 --> 00:01:33,570
After that, we're going to get back a service object, the service thing right here is what we're going

20
00:01:33,570 --> 00:01:36,120
to use to actually bundle and transform, transport.

21
00:01:36,300 --> 00:01:37,560
All that kind of stuff are code.

22
00:01:38,710 --> 00:01:43,360
Right now, I'm just going to console log that service and just make sure everything is loading up as

23
00:01:43,360 --> 00:01:43,900
expected.

24
00:01:45,110 --> 00:01:49,910
Now, we are not actually ever calling this service function, we need to make sure we call it at some

25
00:01:49,910 --> 00:01:54,830
point in time, we only have to call it exactly once, probably when our component is first rendered

26
00:01:54,830 --> 00:01:55,490
on the screen.

27
00:01:56,130 --> 00:02:01,940
Let's import the use effect hook and use the fact hook to call start service just one single time.

28
00:02:02,950 --> 00:02:06,610
I'm going to go back up to my statement from react and get the effect.

29
00:02:08,130 --> 00:02:11,580
Then right after start service, I'll put in a use effect.

30
00:02:15,840 --> 00:02:21,630
Inside there, a Carlstadt service, and to make sure that we only tried to call start service one single

31
00:02:21,630 --> 00:02:24,360
time, I'm going to put in a second argument of an empty array.

32
00:02:24,760 --> 00:02:28,620
Remember, that just means we're going to run this function one single time when our component is first

33
00:02:28,620 --> 00:02:29,490
rendered to the screen.

34
00:02:30,910 --> 00:02:35,260
OK, let's save this, go back over to the browser and see what happens with this console log.

35
00:02:38,460 --> 00:02:45,570
I'll do a refresh and then after a little brief pause, we shouldn't see a console log looks like this,

36
00:02:46,080 --> 00:02:51,390
it has some functions that look pretty promising, a function called build, serve, stop and transform.

37
00:02:52,810 --> 00:02:58,990
We're going to eventually use the transform function and the build function, transform is going to

38
00:02:58,990 --> 00:03:02,920
attempt to execute some trans piling on some code that we provide.

39
00:03:03,500 --> 00:03:05,290
So transform is only for trans piling.

40
00:03:05,290 --> 00:03:07,300
It does not do any bundling whatsoever.

41
00:03:07,660 --> 00:03:10,240
If we want to bundle our code, we're going to use built.

42
00:03:10,900 --> 00:03:15,280
However, to use build inside the browser, we have to do some extra little setup that we're going to

43
00:03:15,280 --> 00:03:16,090
eventually get into.

44
00:03:16,330 --> 00:03:18,160
So right now, we're not going to worry about bundling.

45
00:03:18,370 --> 00:03:23,580
We're just going to do the transform stuff just in transpiring and make sure that we can take some joysticks

46
00:03:23,650 --> 00:03:26,320
and stuff like that and turn it into normal JavaScript.

47
00:03:28,450 --> 00:03:29,910
OK, now we've got this working.

48
00:03:29,980 --> 00:03:34,810
Another quick pause when we come back, the next video, we'll make sure that we use this service to

49
00:03:34,810 --> 00:03:38,950
actually transpired some code and show the result any time a user clicks on our button.