1 00:00:00,830 --> 00:00:05,540 In this video we're gonna write out a little bit more config inside of our package that JS on file to 2 00:00:05,540 --> 00:00:06,040 get started. 3 00:00:06,050 --> 00:00:08,150 I want to find the main flag inside of here. 4 00:00:08,180 --> 00:00:14,630 By default it is set to index dot J.S. This main path right here is defining exactly what file we import 5 00:00:14,810 --> 00:00:17,840 whenever we attempt to import this overall module. 6 00:00:18,230 --> 00:00:19,460 Let me give you an example. 7 00:00:19,580 --> 00:00:24,700 Let's imagine that we install this module into our auth service inside of our service. 8 00:00:24,710 --> 00:00:28,360 We're going to want to import some code of common at some point in time. 9 00:00:28,790 --> 00:00:35,780 So you're going to want to write out something like say import middleware or something from SGI ticketing 10 00:00:36,350 --> 00:00:43,340 slash common the main flag inside that package dot Jason File is going to say what file we tried to 11 00:00:43,340 --> 00:00:45,830 reach into when we write out this import statement. 12 00:00:46,670 --> 00:00:52,640 So for you and I we want to make sure that when ever we tried to import this module we import that index 13 00:00:52,650 --> 00:01:00,160 not just file inside the build directory so for main we're going to write out dot slash build slash 14 00:01:00,450 --> 00:01:00,880 index. 15 00:01:00,920 --> 00:01:04,540 J.S. then very similar to that. 16 00:01:04,640 --> 00:01:09,500 We're also gonna add in eight types setting. 17 00:01:09,530 --> 00:01:13,880 This is used by TypeScript and it tells typescript what the main type definition file inside of our 18 00:01:13,880 --> 00:01:14,980 project is. 19 00:01:14,990 --> 00:01:19,780 So for you and I it is the index dot deed t s file inside of the bill directory. 20 00:01:19,910 --> 00:01:26,240 So we'll write out build index that D dot t us one other setting inside of here. 21 00:01:26,300 --> 00:01:27,560 We're gonna put in files 22 00:01:31,490 --> 00:01:36,590 this file setting is going to tell NPM what set of files inside of our project we want to make sure 23 00:01:36,620 --> 00:01:41,930 100 percent gets included inside the final published version of our package. 24 00:01:41,960 --> 00:01:45,590 So we want to make sure that we publish everything inside of this bill directory. 25 00:01:45,740 --> 00:01:54,160 So inside of files right here we'll put in a string of dot slash build da star slash star. 26 00:01:54,250 --> 00:01:57,170 Well that is pretty much it for a package not just on file. 27 00:01:57,250 --> 00:02:02,320 We're not gonna move onto another little piece of housekeeping right now if we tried to use get to commit 28 00:02:02,350 --> 00:02:07,060 all the files inside of our project that would include the node modules and Bill directories and we 29 00:02:07,060 --> 00:02:11,700 usually do not commit those directories to get so burnt that prevent that behavior. 30 00:02:11,710 --> 00:02:16,630 I'm gonna create a new file inside the common directory I'm gonna give it a very special name of dot 31 00:02:16,720 --> 00:02:26,540 get ignore and then inside there I'm going to write out the build folder in node modules folders. 32 00:02:26,640 --> 00:02:32,740 So again that's just gonna make sure that we do not accidentally commit those directories to get. 33 00:02:32,920 --> 00:02:38,260 Well let's not take a look at how we would somehow make a change to our project build it and then publish 34 00:02:38,260 --> 00:02:39,880 it to NPM. 35 00:02:40,060 --> 00:02:42,640 Let's first begin with making a very simple change. 36 00:02:42,640 --> 00:02:43,990 So how about inside of our index dot. 37 00:02:44,010 --> 00:02:44,960 Yes file. 38 00:02:45,130 --> 00:02:50,050 Let's say that we want to actually make this color object available to other things inside of our projects 39 00:02:50,050 --> 00:02:55,380 and maybe at the bottom we'll do an expert default color well then save this. 40 00:02:55,500 --> 00:03:01,130 And now we probably want to somehow publish this change up to NPM or other services can actually make 41 00:03:01,130 --> 00:03:01,900 use of it. 42 00:03:01,950 --> 00:03:03,140 But here's what we would do. 43 00:03:03,140 --> 00:03:09,130 Usually we would go over to our terminal we would find our common directory. 44 00:03:09,130 --> 00:03:15,480 We could do a get status to take a look at everything we have changed and added inside their after reviewing 45 00:03:15,510 --> 00:03:21,510 all those changes we could commit them by running a get add dot and then actually commit it with some 46 00:03:21,510 --> 00:03:22,830 kind of message. 47 00:03:22,900 --> 00:03:26,520 In this case we'll give it a message of how about something like additional config 48 00:03:29,390 --> 00:03:36,320 after committing and then going to increment the version of my package to do so we can either go over 49 00:03:36,320 --> 00:03:42,330 to our package not just on file and manually update the version number right there or alternatively 50 00:03:42,540 --> 00:03:49,980 we can run some built in commands include with NPM stuff like NPM version patch if we run NPM version 51 00:03:49,980 --> 00:03:55,290 patch and PMA is going to automatically open up our package that Jason File and update that little last 52 00:03:55,290 --> 00:04:00,840 version number right there so if I run NPM version patch right now I get printed out at my terminal 53 00:04:00,900 --> 00:04:07,840 one point 0 5 and if I go backward in Pakistan J's on file it says the same thing we always have to 54 00:04:07,870 --> 00:04:12,310 increment the version number and each single time we make a change to our package when we want to publish 55 00:04:12,310 --> 00:04:13,680 it now. 56 00:04:13,710 --> 00:04:18,810 Which number right here you update comes down to versioning semantics or semantic versioning. 57 00:04:18,810 --> 00:04:22,500 I'll let you do some separate research or reading on semantic versioning if you're really interested 58 00:04:22,500 --> 00:04:23,790 in it or you and I. 59 00:04:23,790 --> 00:04:28,040 For the purposes of this course we're just going to update this last version number right here. 60 00:04:28,040 --> 00:04:33,300 Any time we make a change even if it is a breaking change we're not going to strictly follow semantic 61 00:04:33,300 --> 00:04:40,820 versioning or anything like that once I've incremental version number we would then do an NPM run build 62 00:04:43,100 --> 00:04:47,390 that's going to build all of our code and then we can publish it with NPM publish 63 00:04:51,600 --> 00:04:55,000 and there we go it looks pretty good. 64 00:04:56,110 --> 00:04:57,710 Now running all those commands. 65 00:04:57,730 --> 00:05:02,290 In other words the get ad that commits the version and to publish. 66 00:05:02,290 --> 00:05:06,050 We're gonna have to run those fairly frequently inside this course. 67 00:05:06,070 --> 00:05:11,500 So just in the context of this course we're going to add a little script to our package dot Jason File 68 00:05:11,770 --> 00:05:14,320 to automate that whole process for us. 69 00:05:14,380 --> 00:05:18,640 You would not normally do this in a real project whatsoever. 70 00:05:18,640 --> 00:05:22,200 So what we're going to add and swipe here we would normally not run in a real project. 71 00:05:22,270 --> 00:05:27,250 We are only going to add it just to make our lives inside this course a little bit easier because we 72 00:05:27,250 --> 00:05:32,620 are going to have to come back over to this coming module several times and make updates to it so let's 73 00:05:32,620 --> 00:05:36,410 write out a little command to just make our lives a little bit more straightforward. 74 00:05:36,540 --> 00:05:42,290 Got to add in a new script called pub talk publish any time I run this. 75 00:05:42,350 --> 00:05:48,460 I want to add all the changes to get and then going to commit those changes. 76 00:05:48,620 --> 00:05:54,880 I'm going to put in a dash M and then an escaped set of double quotes and I'll give it a very generic 77 00:05:54,880 --> 00:06:07,500 update message like updates I'll then do a version patch I'll do a NPM run build and then add NPM publish 78 00:06:08,280 --> 00:06:14,070 notice that publish is not NPM run publish is just NPM published that's it. 79 00:06:14,160 --> 00:06:16,050 Now what's so bad about this command. 80 00:06:16,050 --> 00:06:16,950 Well it's very simple. 81 00:06:16,950 --> 00:06:19,620 We are adding all the changes in to get at the same time. 82 00:06:19,770 --> 00:06:23,960 We're giving those changes a very generic commit message which is not good. 83 00:06:24,090 --> 00:06:27,840 And we are also only ever updating the patch version number. 84 00:06:27,900 --> 00:06:34,080 So these three first things right here not super ideal at all so we'd normally not do this in a real 85 00:06:34,080 --> 00:06:34,660 project. 86 00:06:34,660 --> 00:06:39,460 Again it's just to make our lives in this course a little bit easier. 87 00:06:39,500 --> 00:06:44,600 Let's save this I'll then go back over which my index dot t yes file I'll make another little arbitrary 88 00:06:44,600 --> 00:06:50,360 change inside of here so how about will change red to 20 I'll save the file and then let's imagine we 89 00:06:50,360 --> 00:06:52,200 want to publish these changes. 90 00:06:52,230 --> 00:07:00,030 So with that new script we just put together all we do is run NPM run up like some that's going to commit 91 00:07:00,390 --> 00:07:08,890 version build publish all in one little command and after a brief pause Yeah there we go. 92 00:07:08,890 --> 00:07:12,210 So there's my new version of my package. 93 00:07:12,290 --> 00:07:12,530 All right. 94 00:07:12,560 --> 00:07:13,610 This looks good. 95 00:07:13,610 --> 00:07:17,450 That that's very much all the setup we have to do for right now inside this coming module. 96 00:07:17,450 --> 00:07:18,610 Let's take a pause right here. 97 00:07:18,650 --> 00:07:23,000 When we come back the next video we're gonna start to move over some of that reusable code from our 98 00:07:23,040 --> 00:07:25,520 art project into the common module.