1
00:00:00,330 --> 00:00:06,750
In this lecture, we are going to configure Web pack to compile rust, our file is ready to be sent

2
00:00:06,750 --> 00:00:07,680
over to rust.

3
00:00:07,980 --> 00:00:09,240
There's just one problem.

4
00:00:09,480 --> 00:00:11,400
Rust does not run in the browser.

5
00:00:11,670 --> 00:00:14,610
We can't compile rust to an executable file.

6
00:00:14,880 --> 00:00:18,690
Rust needs to be compiled into a web assembly file.

7
00:00:19,350 --> 00:00:24,000
We can perform this process manually, but I would rather automate this process.

8
00:00:24,270 --> 00:00:30,660
Web Pack is capable of refreshing the application whenever we perform changes in our JavaScript files.

9
00:00:31,020 --> 00:00:36,030
It would be convenient if it can compile our Rust program into Web Assembly two.

10
00:00:36,450 --> 00:00:42,570
In the resource section of this lecture, I provide a link to a plugin called Web Assembly Pack.

11
00:00:43,110 --> 00:00:47,880
This project was developed to compile rust projects into web assembly.

12
00:00:48,150 --> 00:00:49,590
It works out of the box.

13
00:00:49,800 --> 00:00:52,710
Best of all, it ships a plugin for Web Pack.

14
00:00:52,950 --> 00:00:58,200
We can integrate this tool into our build flow to compile rust into web assembly.

15
00:00:58,500 --> 00:01:03,900
If you click on the install link, you will be provided with various installation methods.

16
00:01:04,200 --> 00:01:06,570
This tool can be installed with npm.

17
00:01:06,870 --> 00:01:08,190
Let's give that a try.

18
00:01:08,400 --> 00:01:10,110
Switch over to your terminal.

19
00:01:12,680 --> 00:01:22,820
Inside the command line, run the following command and p.m. install minus D at WASC tool slash WAC

20
00:01:22,830 --> 00:01:23,870
impact plug in.

21
00:01:26,440 --> 00:01:30,010
Next, we can start configuring this plugin with Web pack.

22
00:01:30,310 --> 00:01:33,700
Open the Web pack config dot s file.

23
00:01:36,250 --> 00:01:42,040
At the top of the file import, the WASC pack plug in with the required function.

24
00:01:45,980 --> 00:01:52,700
Lastly, let's register the plug in with Web pack inside the plugins array, add a new instance of the

25
00:01:52,700 --> 00:01:55,490
WSM pack plug in object.

26
00:01:58,130 --> 00:02:04,130
Our plug in is going to need more information about our project specifically, it needs to know where

27
00:02:04,130 --> 00:02:05,900
to find our robust project.

28
00:02:06,140 --> 00:02:11,030
It just so happens that our Rust and JavaScript apps are written in the same directory.

29
00:02:11,370 --> 00:02:18,800
We can configure the location of our project by passing in an object in this object at a property called

30
00:02:18,800 --> 00:02:20,000
Create Directory.

31
00:02:22,720 --> 00:02:26,290
The value for this property must be a false system path.

32
00:02:26,560 --> 00:02:32,370
We have an idea of how to generate a full system path with the path dark resolve function.

33
00:02:35,070 --> 00:02:40,350
Will pass in the underscore, underscore directory name, Constance, with a dot.

34
00:02:43,090 --> 00:02:47,490
Overall, this function to return the root directory of our project.

35
00:02:47,870 --> 00:02:51,940
This plugin will search for the cargo dot t0 Ml file.

36
00:02:52,330 --> 00:02:56,800
Make sure you're pointing the plug into the root directory of the Rust Project.

37
00:02:57,190 --> 00:03:01,330
Some beginners will try to point it directly to the source directory.

38
00:03:01,990 --> 00:03:04,510
There's one more modification we need to make.

39
00:03:04,750 --> 00:03:07,680
Open the cargo n'keal EML file.

40
00:03:10,240 --> 00:03:16,690
We are compiling rust to Web assembly by doing so, you can define functions that are accessible via

41
00:03:16,690 --> 00:03:18,790
JavaScript by default.

42
00:03:19,000 --> 00:03:23,170
Rust assumes we're going to be calling rust functions with rust code.

43
00:03:23,530 --> 00:03:27,970
We should tell Rust that we'll be able to call our functions from other languages.

44
00:03:28,270 --> 00:03:31,630
We can do so by adding a table called library.

45
00:03:34,270 --> 00:03:39,610
Under this table, set the create type option to CD, why lib?

46
00:03:42,880 --> 00:03:49,880
The word crate is synonymous with the words library or package in other languages during compilation.

47
00:03:49,900 --> 00:03:51,580
Rust produces a crate.

48
00:03:51,940 --> 00:03:56,530
We're telling Rust to produce a crate with support for external languages.

49
00:03:56,830 --> 00:03:58,750
We're finished configuring rust.

50
00:03:58,930 --> 00:04:02,920
It's time to give our compiler a test inside the command line.

51
00:04:02,950 --> 00:04:05,590
Run the npm run serve command.

52
00:04:08,030 --> 00:04:14,570
After a couple of sections, Web pack will compile our project, it's also going to make changes to

53
00:04:14,570 --> 00:04:15,380
our projects.

54
00:04:15,590 --> 00:04:20,360
We have a new directory called Package, which is abbreviated to pcgg.

55
00:04:20,750 --> 00:04:24,350
This folder will contain a copy of our web assembly files.

56
00:04:24,650 --> 00:04:29,180
It's possible you may not see a WebAssembly file that's perfectly fine.

57
00:04:29,390 --> 00:04:31,640
We haven't written code for WebAssembly.

58
00:04:32,150 --> 00:04:35,780
As long as your project is being compiled, you should be good to go.

59
00:04:35,990 --> 00:04:39,260
If you receive warnings from web pack, that's fine too.

60
00:04:39,650 --> 00:04:42,110
It will go away as we work on our project.

61
00:04:42,350 --> 00:04:46,700
In the next lecture, we're going to start writing some web assembly code.