How to Host an NPM Package in GitHub for Free
This lesson preview is part of the The newline Guide to Building a Company Component Library course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to The newline Guide to Building a Company Component Library, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:14] GitHub has a generous free plan which allows us to create private repositories, run a CICD environment, and host private NPM packages. The first step for a new component library is to create a private GitHub repository.
[00:15 - 00:31] When creating it, for the repository details we can leave the owner as our personal GitHub username, and then for the repository name, let's call it " Component Library". I've recreated this repository under my account, so it's going to show us invalid for me, but should be good for you.
[00:32 - 00:46] Let's leave this as a private repository since we're creating an internal library. And then let's include a default readme and a get_ignore with the node js template to start out with.
[00:47 - 01:06] Once you create that repository and clone it locally, open it in your editor of choice, which will be VS Code for me. Once we have this open, we can see the default get_ignore with the pre-pop ulated node js values, which will be good for us in our NPM package, as well as a simple readme.
[01:07 - 01:17] To start out with, let's initialize our new package. We can use the NPM init command, so NPM init force to pre-populate some of these values.
[01:18 - 01:27] That command will create a new package.json that we can see here locally. These values are pre-populated based off the repository that we have.
[01:28 - 01:37] What we want to do first is update the name and the version. For name, let's go ahead and add in our GitHub username as a package scope.
[01:38 - 01:48] For me, this would be Austin Green Dev, but it would be whatever your personal NPM or GitHub username is. Then let's make the version all zeros to start out with.
[01:49 - 02:02] The first dependencies that we're going to add in are the react-based peer dependencies, and we can include those by calling NPM install. Save peer, react, and react DOM.
[02:03 - 02:23] By default, this will include a React and React DOM with an open-sember range for anything above the latest version, which is React 17 right now. To make this available to a wider variety of React code bases, let's actually change this to greater than or equal to version 1612.0.
[02:24 - 02:40] These minimum versions are determined from what React features we want to require based off of the features that we're using in our components. We're going to be using hooks in our shared components, and so version 1612 is a good starting point for those features.
[02:41 - 02:52] This will allow anything greater than version 1612, as well as version 17, which is the latest. Next, let's add TypeScript to our library.
[02:53 - 03:14] We also need to include the necessary type declarations for React and React DOM , and these packages are going to be included as dev dependencies since they're only required for local development. We can call it NPM install, save dev, TypeScript, add types React, and add types React DOM.
[03:15 - 03:33] Then to help TypeScript understand our React environment a little bit better, we're going to create a new TS config.json file with the following content that you can copy over. This configuration doesn't emit any JavaScript by default.
[03:34 - 03:45] It's only meant to do type check in when the compiler is ran. Now that we have a TS config included, let's create our first shared component.
[03:46 - 03:59] We can create a new folder, source, and then within that, let's create a new folder called buttons. Then in here, we can create our first TSX element, which will be button.tsx.
[04:00 - 04:06] We can include some default content here. This button component is very simple.
[04:07 - 04:15] It's just going to return a button with some static text so it doesn't dynamic yet. To double check that TypeScript is running correctly, let's go and run the Type Script compiler locally.
[04:16 - 04:21] With MPX TSC, we can run that. If there's no errors, good.
[04:22 - 04:30] It means everything's running correctly. Now that we have our first component created, go ahead and commit those changes locally, just to store our progress.
[04:31 - 04:36] In the next lesson, we're going to be creating a Storybook environment to help document and develop these components.