1
00:00:01,210 --> 00:00:05,980
Let's start to integrate s build into our project before we start to write any code, however, I want

2
00:00:05,980 --> 00:00:09,480
to take another very fast glance at the documentation for its build itself.

3
00:00:10,060 --> 00:00:16,030
I'm at s build GitHub Io once you're going to find Transform API on the left hand side.

4
00:00:16,970 --> 00:00:21,440
Now, as you scroll through the documentation, you might see that there are a couple of little examples,

5
00:00:21,440 --> 00:00:25,970
snippets of code, each of these are describing how to do some particular thing with s built.

6
00:00:26,510 --> 00:00:30,590
You'll also notice that on the top right hand side of each of these little panels are instructions on

7
00:00:30,590 --> 00:00:33,240
how to work with s build from a particular environment.

8
00:00:33,950 --> 00:00:38,420
So if you click on the CLI tab, that will show you how to work with s build from your command line

9
00:00:38,420 --> 00:00:39,050
or your terminal.

10
00:00:39,600 --> 00:00:44,300
If you click on jobs that will show you how to work with s build from a JavaScript environment.

11
00:00:44,810 --> 00:00:49,040
And then finally and very interestingly, there's also a go tab here.

12
00:00:49,520 --> 00:00:55,880
So this is describing how to work with s build from some go programming code or to go programming language.

13
00:00:56,630 --> 00:01:00,060
Naturally, you and I are not really working with go here at all.

14
00:01:00,080 --> 00:01:02,810
So why is the good stuff here at all in the documentation?

15
00:01:03,470 --> 00:01:07,910
Well, it turns out that the entire E build tool is actually written using go.

16
00:01:08,750 --> 00:01:13,730
How are we going to use go code or anything like that inside of a JavaScript app?

17
00:01:13,730 --> 00:01:19,220
Remember we had said that we wanted to run all this build stuff directly inside the browser and well,

18
00:01:19,220 --> 00:01:21,680
your browser just doesn't know what to do with go code.

19
00:01:22,100 --> 00:01:23,720
So it seems like this might be a big problem.

20
00:01:24,410 --> 00:01:24,920
Don't sweat.

21
00:01:24,920 --> 00:01:29,270
It turns out you just need to understand a little bit more about s build to understand how all this

22
00:01:29,520 --> 00:01:33,110
stuff kind of fits into the big picture, the one or two very quick diagrams.

23
00:01:34,090 --> 00:01:37,270
OK, so this is a diagram of the build NPM module.

24
00:01:38,380 --> 00:01:43,750
Whenever you install this module, you're actually getting a rather small amount of JavaScript, this

25
00:01:43,750 --> 00:01:49,120
very small amount of JavaScript is responsible for really just passing along commands that you issued

26
00:01:49,120 --> 00:01:52,280
to this module, to this go code or this go executable.

27
00:01:52,780 --> 00:01:57,850
So if you ever tell its build to go and bundle something or transpose something or do anything like

28
00:01:57,850 --> 00:02:01,450
that, you're passing along some series of commands to the JavaScript wrapper.

29
00:02:01,690 --> 00:02:06,100
And that in turn is just passing those commands along to the actual go executable.

30
00:02:06,580 --> 00:02:10,419
This go executable is the thing that does the actual transpiring and the building.

31
00:02:10,780 --> 00:02:13,270
It's what does the heavy lifting inside of our application.

32
00:02:14,240 --> 00:02:20,450
Now, you might notice that you and I did not actually install a module called S built in the last couple

33
00:02:20,450 --> 00:02:20,910
of videos.

34
00:02:20,930 --> 00:02:26,960
Instead, we installed a slightly different module, one called Yes, build dash w a.

35
00:02:26,960 --> 00:02:27,710
S m.

36
00:02:28,920 --> 00:02:31,470
ASEM is short for Web assembly.

37
00:02:32,040 --> 00:02:39,810
This is a feature that is supported in many modern browsers but allows you to execute comp. c C++,

38
00:02:39,810 --> 00:02:42,150
C, sharp rust and go code.

39
00:02:42,750 --> 00:02:44,730
So build A.

40
00:02:44,850 --> 00:02:49,970
S M is an NPM module that gives you a rather small amount of JavaScript.

41
00:02:50,670 --> 00:02:54,840
We're going to interact with this JavaScript and eventually tell that JavaScript that we want to bundle

42
00:02:55,110 --> 00:03:00,570
or transpires some amount of code that JavaScript is not actually responsible for doing the bundling

43
00:03:00,570 --> 00:03:01,460
or the transpiring.

44
00:03:01,470 --> 00:03:06,630
Instead, it's going to delegate all that to a web assembly binary.

45
00:03:07,580 --> 00:03:15,080
This Web assembly binary is all the actual go code of build compiled to work inside the browser.

46
00:03:16,100 --> 00:03:20,120
So I know there's a little bit over the top and it's a little bit more information than we need to know

47
00:03:20,120 --> 00:03:21,060
to work with the Yes.

48
00:03:21,080 --> 00:03:25,160
Build zones, telling you this because we're going to do some kind of interesting set up stuff to get

49
00:03:25,370 --> 00:03:26,690
build running inside the browser.

50
00:03:27,350 --> 00:03:32,300
So as we start to go through some of this interesting set up stuff, it's all because it's build itself

51
00:03:32,300 --> 00:03:36,440
is written as go we can't run, go inside the browser, go instead.

52
00:03:36,440 --> 00:03:42,680
Yes, build is compiled into this web assembly binary which can be executed inside the browser.

53
00:03:42,680 --> 00:03:45,290
And on top of that, it's actually going to run very, very quickly.

54
00:03:45,680 --> 00:03:51,110
Web assembly in general is very, very fast, and that's why it's going to run so quickly to do all

55
00:03:51,110 --> 00:03:54,140
of our compilers, all of our transpiring and all of our bundling.

56
00:03:55,060 --> 00:03:59,350
OK, so with all this side knowledge out of the way, let's go back over to our editor and start to

57
00:03:59,350 --> 00:04:00,850
set up this build stuff.

58
00:04:03,570 --> 00:04:09,480
OK, the first thing we have to do is make sure that we can download or get access to that Web assembly

59
00:04:09,480 --> 00:04:11,850
binary inside of a react application.

60
00:04:12,370 --> 00:04:15,030
So we're going to do one little step of set up right now.

61
00:04:15,030 --> 00:04:17,760
That's going to be a little bit strange, a little bit painful.

62
00:04:18,000 --> 00:04:22,950
We're only going to do this one time and we're we're going to eventually replace the step with a much

63
00:04:22,950 --> 00:04:24,000
more elegant solution.

64
00:04:24,480 --> 00:04:26,130
So here is the kind of nasty part.

65
00:04:26,790 --> 00:04:30,060
I'm going to find the node modules directory inside my code editor.

66
00:04:30,630 --> 00:04:36,210
I'm going to expand it and then going to scroll down and find the build dependency.

67
00:04:41,310 --> 00:04:42,510
Eventually, I will find it.

68
00:04:45,150 --> 00:04:46,380
OK, I'm close now.

69
00:04:46,410 --> 00:04:49,650
There it is right there, so it's build dash web assembly.

70
00:04:50,430 --> 00:04:54,870
If you do not see this folder, then just reopen your code editor or open your code editor a second

71
00:04:54,870 --> 00:04:55,200
time.

72
00:04:55,980 --> 00:04:57,290
I'm going to expand that folder.

73
00:04:57,300 --> 00:05:01,690
And then inside there you'll find a file called Eskild Dot Web Assembly.

74
00:05:02,100 --> 00:05:06,380
So this is the compiled go code that can correctly work inside the browser.

75
00:05:06,990 --> 00:05:09,180
We're going to copy this file.

76
00:05:11,620 --> 00:05:14,050
We're then going to collapse the node modules directory.

77
00:05:14,940 --> 00:05:18,510
I'm going to go into my public directory and paste it inside their.

78
00:05:19,890 --> 00:05:22,920
So I should see public build dot web assembly.

79
00:05:23,850 --> 00:05:24,930
So why did we do that?

80
00:05:25,260 --> 00:05:30,090
Well, we eventually need to make use of this Web assembly stuff inside the browser, that means we

81
00:05:30,090 --> 00:05:33,350
need to actually get this compiled code inside of our browser.

82
00:05:33,360 --> 00:05:35,160
We need to actually load it up in some way.

83
00:05:35,850 --> 00:05:40,800
Every file that you place inside the public directory of a ReachOut project and B, fetch very easily

84
00:05:40,800 --> 00:05:41,710
from inside the browser.

85
00:05:42,060 --> 00:05:43,400
So that's pretty much all we're doing here.

86
00:05:43,410 --> 00:05:48,900
We're just making sure that this E build stuff can fetch that binary and do the actual transpiring for

87
00:05:48,900 --> 00:05:49,160
us.

88
00:05:50,010 --> 00:05:52,230
We only really have to do that step one single time.

89
00:05:52,290 --> 00:05:56,970
Like I said, we're going to eventually have a much more elegant solution and going into the node modules

90
00:05:56,970 --> 00:06:00,150
directory and trying to copy stuff around, don't worry, we'll get a much better solution.

91
00:06:00,990 --> 00:06:02,360
OK, so let's take a pause right here.

92
00:06:02,400 --> 00:06:06,900
We're going to start to make use of that binary in the next video and start doing some actual transpiring.