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.