1 00:00:00,540 --> 00:00:06,030 In the last section we install materialist's says as an NPR module into our project we're now going 2 00:00:06,030 --> 00:00:12,620 to continue by hooking up the CSSA files inside of this NPM package to our project. 3 00:00:12,660 --> 00:00:18,300 Now again the way in which we're doing this is not quite as straightforward as just using the link tag 4 00:00:18,300 --> 00:00:23,580 right here and pasting this into our age HTML file but this is something you're seeing more commonly 5 00:00:23,580 --> 00:00:25,260 with CSSA frameworks these days. 6 00:00:25,290 --> 00:00:30,300 So we're going to take the slightly more complicated approach but understand what is actually going 7 00:00:30,300 --> 00:00:31,400 on behind the scenes. 8 00:00:31,530 --> 00:00:33,520 When we install it as an NPM module. 9 00:00:33,750 --> 00:00:35,140 So let's get to it. 10 00:00:35,190 --> 00:00:40,140 The first thing I want to tell you about is the Web pack module that we are making use of that came 11 00:00:40,200 --> 00:00:43,920 as a part of the Create re-act app installation that we used. 12 00:00:44,160 --> 00:00:50,850 So when we installed create re-act up in and used it to generate a new project we automatically got 13 00:00:50,850 --> 00:00:57,840 some infrastructure inside our project that configures and make use makes use of Web pack web pack is 14 00:00:57,840 --> 00:01:00,440 what's called a module loader. 15 00:01:00,780 --> 00:01:07,200 We can feed in a big old web file a big web of files to it and what pack will automatically somehow 16 00:01:07,200 --> 00:01:13,800 concatenate together and arrange all these different files in such a way that it spits out one or very 17 00:01:13,800 --> 00:01:15,690 few output files. 18 00:01:15,720 --> 00:01:21,330 So essentially well-packed allows us to take a big old pile of separate javascript files and condense 19 00:01:21,330 --> 00:01:23,900 it down to one individual file. 20 00:01:23,940 --> 00:01:25,640 It doesn't always have to be one per se. 21 00:01:25,650 --> 00:01:29,740 Sometimes we want multiple files but that's it's own little discussion. 22 00:01:30,030 --> 00:01:35,380 What pack is not only limited to processing javascript files like the ones we have right now though. 23 00:01:35,550 --> 00:01:41,460 You can also load up what are called Lowder's into web pack that instruct web pack how to handle other 24 00:01:41,460 --> 00:01:48,480 types of files as well in particular one other file type that will handle out of the box with our create 25 00:01:48,480 --> 00:01:51,940 re-act up installation is CSSA files. 26 00:01:52,170 --> 00:01:59,340 So if we import a CSSA file directly into a javascript file well-packed will look at the import statement 27 00:01:59,430 --> 00:02:05,010 it will recognize that we are attempting to import in a CSSA file and it will include it into our project 28 00:02:05,160 --> 00:02:11,110 output as VSS rather than trying to parse it as actual raw javascript. 29 00:02:11,280 --> 00:02:13,370 Which is exactly what we need. 30 00:02:13,410 --> 00:02:18,480 So that's the slightly more complicated way that I mentioned that where we are hooking this thing up 31 00:02:18,480 --> 00:02:24,570 with NPM really you want to have some idea of what web pack is doing behind the scenes to really understand 32 00:02:24,870 --> 00:02:30,550 how we can somehow import it with import statements when using CSSA files. 33 00:02:30,810 --> 00:02:34,380 So let's see what this actually looks like in practice. 34 00:02:34,380 --> 00:02:38,010 Inside my code editor I'm going to find my client directory. 35 00:02:38,040 --> 00:02:39,190 So here it is right here. 36 00:02:39,420 --> 00:02:44,610 And then inside there I'm going to find my node modules folder and as a reminder remember the node modules 37 00:02:44,610 --> 00:02:48,900 directory is where all of our projects dependencies are placed. 38 00:02:48,900 --> 00:02:55,260 If we scroll down very far inside this directory we will eventually come across the material design 39 00:02:55,530 --> 00:02:57,660 or the materialized CSSA library. 40 00:02:57,660 --> 00:02:59,160 So here it is right here. 41 00:02:59,220 --> 00:03:03,430 So let's open this up inside of there you'll find a folder called dist. 42 00:03:03,780 --> 00:03:07,230 And then inside of there you'll find a folder called CSX. 43 00:03:07,230 --> 00:03:10,030 And so right here are two CSSA files. 44 00:03:10,050 --> 00:03:16,020 One is called materialized Nazi SS and the other is materialized in the mini version right here is the 45 00:03:16,020 --> 00:03:18,660 minute fied version of all the US. 46 00:03:18,900 --> 00:03:23,670 So for us we're going to include in the minute five version because we know we're not really going to 47 00:03:23,670 --> 00:03:28,770 be referencing the raw CSSA inside there like we don't really have to look at it or anything. 48 00:03:28,770 --> 00:03:32,850 So we're completely fine using materialize in that CSSA file. 49 00:03:32,870 --> 00:03:39,000 So in practice all we really have to do is write an import statement that will require in or import 50 00:03:39,060 --> 00:03:45,470 in this file right here into our project structure as soon as we do whenever well-packed runs. 51 00:03:45,480 --> 00:03:48,720 And remember it runs every time our application is changed. 52 00:03:48,860 --> 00:03:52,430 It'll automatically include in the CSSA file. 53 00:03:52,500 --> 00:03:54,460 So let's see what that looks like. 54 00:03:54,960 --> 00:03:57,420 To import this file the CSSA file. 55 00:03:57,480 --> 00:04:00,720 I'm going to import it into our index dot G-S file. 56 00:04:00,720 --> 00:04:04,140 In truth it doesn't really matter where we put this import statement. 57 00:04:04,140 --> 00:04:09,520 All that matters is that we place an import for at least one time inside of our application. 58 00:04:09,870 --> 00:04:15,740 I like to put it inside the index file just because it's a Verbier root level requirement of our project. 59 00:04:15,750 --> 00:04:19,890 I think it just kind of makes sense there but you can easily make the case to me to say that it should 60 00:04:19,890 --> 00:04:22,140 be inside the Apogees file as well. 61 00:04:22,170 --> 00:04:25,510 Really there's a couple of different ways you can handle this one. 62 00:04:25,530 --> 00:04:27,820 And really they're all correct. 63 00:04:28,290 --> 00:04:30,180 OK so let's get to this. 64 00:04:30,480 --> 00:04:38,890 At the very top of the index G-S file I'm going to import in the CSSA file so import materialize see 65 00:04:39,060 --> 00:04:40,740 SS from. 66 00:04:40,740 --> 00:04:43,580 And then we're going to provide the path to this file. 67 00:04:43,950 --> 00:04:45,780 Will say materialize. 68 00:04:46,240 --> 00:04:47,720 Dash CSSA. 69 00:04:47,830 --> 00:04:55,890 That's the name of the module slash dist because that's the name of the directory slash CSSA slash materialize 70 00:04:56,490 --> 00:05:03,560 in VSS so materialise men don't see SS like so nothing. 71 00:05:03,600 --> 00:05:09,090 One thing I want to mention to you is that when we are importing non javascript files we do have to 72 00:05:09,120 --> 00:05:15,480 add on the file extension right here so we can't get away with leaving the file extension off like we 73 00:05:15,480 --> 00:05:17,050 do with files that we import. 74 00:05:17,100 --> 00:05:21,050 Like say the app import statement right here or the reducers import. 75 00:05:21,210 --> 00:05:26,380 So these truly are not James Files but web pack assumes that we mean us. 76 00:05:26,490 --> 00:05:32,520 If we leave that extension off when we are importing anything else yes we have to use the CSSA extension 77 00:05:32,520 --> 00:05:33,290 to say yes. 78 00:05:33,390 --> 00:05:36,030 Specifically this file right here. 79 00:05:36,300 --> 00:05:40,800 I'll get the other thing to mention is that you'll notice that we did not use any type of relative path 80 00:05:40,800 --> 00:05:45,740 name so I didn't do something like Dotts slash here or anything like that. 81 00:05:45,840 --> 00:05:49,250 Whenever well-packed parses an import statement path like this. 82 00:05:49,350 --> 00:05:54,810 If you do not provide a well relative path what pack automatically assumes that you are trying to specify 83 00:05:54,870 --> 00:06:00,120 a NPM module or module that is installed inside of your node modules directory. 84 00:06:00,120 --> 00:06:06,300 So no need to specify a relative path here we just say materialized DSS and I want specifically this 85 00:06:06,300 --> 00:06:08,620 file inside of there. 86 00:06:08,670 --> 00:06:14,490 OK now the last thing I want to say is that when we import a CSSA file like this it doesn't actually 87 00:06:14,550 --> 00:06:20,750 assign anything to any variable inside the javascript world so this variable that we just declared right 88 00:06:20,750 --> 00:06:27,810 here and presumably assign some value to we do not need it all so we can condense down the import statements 89 00:06:28,060 --> 00:06:33,910 import statement to just be the actual import this file to do so. 90 00:06:33,960 --> 00:06:38,170 All we have to do is remove the variable name and the From statement. 91 00:06:38,190 --> 00:06:44,980 So overall this entire thing becomes just import this VSS file like that right there. 92 00:06:46,130 --> 00:06:50,140 OK so now when we save this web pack is going to run again. 93 00:06:50,280 --> 00:06:55,470 It's going to attempt to look at all the different files that we are importing into our application 94 00:06:55,470 --> 00:06:56,510 structure. 95 00:06:56,580 --> 00:07:00,670 One of them is now the CSSA file materialized not. 96 00:07:00,750 --> 00:07:06,540 SS So materialize is going to recognize this is a CSSA file and treated differently than it does the 97 00:07:06,540 --> 00:07:07,980 other javascript ones. 98 00:07:08,130 --> 00:07:13,200 At the end of the day it will produce a final output that includes all these javascript files that we 99 00:07:13,200 --> 00:07:18,250 have in addition to the serialise or seeming that materialized out CSSA file. 100 00:07:18,630 --> 00:07:21,100 OK let's see what happens when we save it. 101 00:07:21,120 --> 00:07:27,770 I'll save the file and condense down the node modules directory as well. 102 00:07:27,770 --> 00:07:33,190 And then when we go back over to the browser now it's very hard to see. 103 00:07:33,240 --> 00:07:35,290 Well let's refresh the page first. 104 00:07:35,340 --> 00:07:37,510 Oops my mistake we never restart the server. 105 00:07:37,530 --> 00:07:38,940 So that's very important as well. 106 00:07:38,940 --> 00:07:40,650 Let's make sure we restart the server. 107 00:07:40,650 --> 00:07:43,900 So I'm inside the server directory and we'll run NPM run dev. 108 00:07:44,160 --> 00:07:48,540 Now rather than make you have to watch all my server start up let's take a quick break. 109 00:07:48,540 --> 00:07:53,820 We'll come back in the next section and we will verify that the CSSA file was successful installed. 110 00:07:53,880 --> 00:07:55,380 So I'll see you in just a second.