The size of your codebase is already expanding, and you can imagine how cumbersome it will be to continually modify and run your 

 script. Package your code as an npm module so you can use it directly in your example app via 

You will install three packages as dev dependencies:

npm install --save-dev rollup @rollup/plugin-typescript tslib

Next, import the Rollup TypeScript plugin and set up the following configuration:

import typescript from '@rollup/plugin-typescript';
import pkg from './package.json' assert { type: "json" };

export default {
  input: 'src/index.ts',
  output: {
    file: pkg.main,
    format: 'module',
    sourcemap: true,
    strict: false,
  },
  plugins: [typescript()],
  external: ['react']
};

This config tells Rollup to package your 

 file will be the actual source code that is imported when your library is used.

 file when packaging. Finally, you'll need to expose the files you want to package, in this case, 

export { usePleaseStay } from './hooks/usePleaseStay';

You'll also need to allow synthetic default imports for rollup to work, since 

 itself is a synthetic default import. So, add the following to your 

You also need to add a type declaration so TypeScript won't complain when you use it in your example project:

You also need to ensure that Rollup, by way of TypeScript, will only be building your 

{
  "compilerOptions": {
    // ...
  },
  "include": ["src"],
  "exclude": ["example"]
}

 is about to become an npm module, you need to inform npm of this within 

Try packaging your hook with your new build command:

You should get some output that looks like this:

 folder. You should see the following files and folders:

.
├── hooks
│   ├── useInterval.d.ts
│   └── usePleaseStay.d.ts
├── index.d.ts
├── index.js
└── index.js.map

, you have to modify a few properties in 

. First, since this is a module with types, thanks to rollup's type declaration, you should also specify the 

 property. This tells npm all relevant files needed for your package. In your case, it's the 

 folder where Rollup placed all your packaged files. However, npm expects this to be an array, so be sure to pass it as 

"types": "dist/index.d.ts",
"files": ["dist"]

Before you can use this linked package in your example app, you need to be sure to link to a single version of React. In your case, the version of React that is used in the 

 folder, so that React does not complain about finding two versions of React in your project. (Note that you 

 have two versions: the one in your root folder, but also the one used by the example app in the 

 folder.) Note that even if the actual semantic version is identical, React will still complain about seeing two locations. You can use 

 to use the example version's React. Still inside the 

To double-check that the link worked, you can issue:

npm ls --location=global --depth=0 --link=true

You may have more, but should at least have these two entries:

/path/to/your/nvm/.nvm/versions/node/v16.18.1/lib
├── react-use-please-stay@1.0.0 -> ./path/to/your/project/react-use-please-stay-course
└── react@18.2.0 -> ./path/to/your/project/example/node_modules/react

 is where your nvm install lives (typically the root) and 

 is where you have decided to place your 

 folder, you can import it directly from the linked package:

import React from "react";
import { usePleaseStay } from "react-use-please-stay"

function App() {
  usePleaseStay(["Title One!", "Title Two!!", "Title Three?!?"]);
  return <></>;
}

export default App;

Give it a go to see if everything is still working as expected:

When the app is up and running, you should still see the title toggling functionality, just as you had in the previous lesson. Looks like everything is working! As a cleanup, you can now get rid of your no longer needed 

 is a great tool that allows you to continually develop and test your hook without having to continually publish it to npm and re-install it.

In the next lesson, you will clean up and refactor what you have built so far.

---
title: Packaging react-use-please-stay as an npm Module using Rollup
code: https://gitlab.com/fullstackio/books/react-use-please-stay-with-react-and-typescript/-/blob/production/course/code/lesson-6
isPublicLesson: true
useMdx: true
privateVideoUrl: https://stream.mux.com/mHWZaV8ufCY01IEb4wARKBUNZMb7UMNeESq9Gkk3XTl8.m3u8
---

The size of your codebase is already expanding, and you can imagine how cumbersome it will be to continually modify and run your `copy-hook` script. Package your code as an npm module so you can use it directly in your example app via `npm link`.

You will install three packages as dev dependencies:

1.  Rollup, 
2.  The standard TypeScript plugin for rollup, 
3.  tslib, which is required by the TypeScript Rollup plugins

```shell
npm install --save-dev rollup @rollup/plugin-typescript tslib
```

Now, create a `rollup.config.js` file in the project root: 

```shell
touch rollup.config.js
```

Next, import the Rollup TypeScript plugin and set up the following configuration:

```js
import typescript from '@rollup/plugin-typescript';
import pkg from './package.json' assert { type: "json" };

export default {
  input: 'src/index.ts',
  output: {
    file: pkg.main,
    format: 'module',
    sourcemap: true,
    strict: false,
  },
  plugins: [typescript()],
  external: ['react']
};
```

This config tells Rollup to package your `src/index.ts` file into a common JS `index.js` file in the `dist` folder. This `dist/index.js` file will be the actual source code that is imported when your library is used.

Now, you need to replace your `"build"` npm script, from `tsc` to `rollup -c`: 

```json
"build": "rollup -c"
```

The `-c` flag tells Rollup to use your `rollup.config.js` file when packaging. Finally, you'll need to expose the files you want to package, in this case, `usePleaseStay`, in a new `index.ts` file. First, create the `index.ts` file:

```shell
touch src/index.ts
```

Then, add the following code:

```ts
export { usePleaseStay } from './hooks/usePleaseStay';
```

You'll also need to allow synthetic default imports for rollup to work, since `React` itself is a synthetic default import. So, add the following to your `tsconfig.json`:

```json
"allowSyntheticDefaultImports": true
```

You also need to add a type declaration so TypeScript won't complain when you use it in your example project:

```json
"declaration": true
```

You also need to ensure that Rollup, by way of TypeScript, will only be building your `src` folder, and not your `example` folder. So, include the `src/` folder and exclude the `example` folder in `tsconfig.json`:

```json
{
  "compilerOptions": {
    // ...
  },
  "include": ["src"],
  "exclude": ["example"]
}
```

Since your `usePleaseStay` is about to become an npm module, you need to inform npm of this within `package.json`:

```json
"type": "module"
```

And you should update the value of `"main"` in `package.json` to point to your new distributable `index.js`:

```json
"index": "dist/index.js"
```

Try packaging your hook with your new build command:

```shell
npm run build
```

You should get some output that looks like this:

```shell
created dist/index.js in 1s
```

To double-check, look in the `dist/` folder. You should see the following files and folders:

    .
    ├── hooks
    │   ├── useInterval.d.ts
    │   └── usePleaseStay.d.ts
    ├── index.d.ts
    ├── index.js
    └── index.js.map

If `usePleaseStay.js` is still in your `dist` folder, you should delete it.

## Modifications to `package.json`

To be able to use `npm link`, you have to modify a few properties in `package.json`. First, since this is a module with types, thanks to rollup's type declaration, you should also specify the `"types"` property as `dist/index.d.ts`. Finally, provide the `"files"` property. This tells npm all relevant files needed for your package. In your case, it's the `dist/` folder where Rollup placed all your packaged files. However, npm expects this to be an array, so be sure to pass it as `["dist"]`. Altogether, these two changes to `package.json` are as follows:

```json
"types": "dist/index.d.ts",
"files": ["dist"]
```

## Running `npm link` Commands

You should now be able to run npm link:

```shell
npm link
```

Before you can use this linked package in your example app, you need to be sure to link to a single version of React. In your case, the version of React that is used in the `example/` folder, so that React does not complain about finding two versions of React in your project. (Note that you _do_ have two versions: the one in your root folder, but also the one used by the example app in the `example/` folder.) Note that even if the actual semantic version is identical, React will still complain about seeing two locations. You can use `npm link` to use the example version's React. Still inside the _root_ directory, issue this command:

```shell
npm link ./example/node_modules/react
```

Now you can move into the `example` directory:

```shell
cd example
```

and link your package:

```shell
npm link react-use-please-stay
```

To double-check that the link worked, you can issue:

```shell
npm ls --location=global --depth=0 --link=true
```

You may have more, but should at least have these two entries:

    /path/to/your/nvm/.nvm/versions/node/v16.18.1/lib
    ├── react-use-please-stay@1.0.0 -> ./path/to/your/project/react-use-please-stay-course
    └── react@18.2.0 -> ./path/to/your/project/example/node_modules/react

Where `/path/to/your/nvm` is where your nvm install lives (typically the root) and `/path/to/your/project` is where you have decided to place your `react-use-please-stay` project folder.

Now, in `App.tsx`, instead of importing a copy of `usePleaseStay` from the `hooks/` folder, you can import it directly from the linked package:

```tsx
import React from "react";
import { usePleaseStay } from "react-use-please-stay"

function App() {
  usePleaseStay(["Title One!", "Title Two!!", "Title Three?!?"]);
  return <></>;
}

export default App;
```

Give it a go to see if everything is still working as expected:

```shell
npm run start
```

When the app is up and running, you should still see the title toggling functionality, just as you had in the previous lesson. Looks like everything is working! As a cleanup, you can now get rid of your no longer needed `copy-hook` script, and also delete the `hooks` folder from your example project.

`npm link` is a great tool that allows you to continually develop and test your hook without having to continually publish it to npm and re-install it.

In summary, you:

-   Installed Rollup and the TypeScript plugin for rollup
-   Created a `rollup.config.js` file to package your hook
-   Created an `index.ts` file to expose your hook
-   Modified your `package.json` and set important properties needed to package your hook
-   Linked your package and a specific React version to your example project using `npm link`
-   Imported your hook directly from your package (instead of a copied version) in your example project
-   Tested your example application to ensure everything was still working

In the next lesson, you will clean up and refactor what you have built so far.


Chris Frewin

Packaging react-use-please-stay as an npm Module using Rollup

The size of our codebase is already expanding, and we can imagine how

be to continually modify and run our copyhook script in our example project.

Let's package our code as an NPM module so we can use it directly in our

We will now install three packages as dev dependencies.

The second is the standard TypeScript plugin for rollup, and the third is TSlib

is required by the TypeScript rollup plugin.

So that is NPM install, save dev, rollup, then the rollup plugin, TypeScript,

Now we'll create a rollup.config.js file in the project root, and within this

We'll import the package as PKG from package.json.

We can't use the word package directly since that's a reserved word, and we'll

First we need to define an input for rollup to go off of.

That will be an index.ts file, which we have yet to make.

And the output for the file will use the package.json main key.

We do want source maps, and we'll set strict to false.

We need to pass in the TypeScript plugin, which is a function, and the external

Next we need to update our build script, and instead of using TSC, our build

The dash c flag tells rollup to use our rollup config file when packaging.

Finally we'll need to expose the files that we want to package.

And to do that, we'll create a new index.ts file right in the src root.

And from here we'll just export usepleasestay from hooks.

We'll also need to allow synthetic default imports for rollup to work, since

So we'll need to add that to our TS config.

That means TypeScript will create a type declaration for us when rollup does

And outside of the compiler options, we should also be sure to define and tell

compiler which files we want to include and those who wish to exclude during

And for us, we'd like to include the src folder and we'd like to be sure to

Since our usepleasestay hook is about to become an npm module, we need to

We can do that by adding type module to the JSON.

And while we're in package.json, we should also update the main value here.

As you remember, we're using it in our config to specify the output file.

And so if we were to leave it as index.js, our distribution version would be

in the root folder, which is not what we want, but rather we'd like to target

So that can be updated by adding dist in front of the index.js file.

Let's now try packaging our hook with our new build command.

So it looks like our build is working fine.

And to double check, we can look in the dist folder.

We should have the following files and folders within hooks.

We should have the type declaration for both use interval and usepleasestay.

And in the root of dist, we should have three files, the type declaration, the

index of the hook and the source map file.

If you still have usepleasestay.js in this folder, you should delete it.

Now to be able to use npm link, we have to make a few more properties in

First, since this is a module with types, thanks to TypeScript's type

we should also specify the types property as dist index.d.ts.

We then should also provide the files property.

This tells npm all relevant files needed for our package.

In our case, it's the dist folder where rollup placed all our package files.

npm expects this to be an array, so we will pass it, so we will be sure to pass

And with that done, we should now be able to run npm link.

Before we can use this linked package in our example app, we need to be sure to

In our case, we want the version of React that is used in the example folder.

Ensuring that you're still inside the root directory, we can link to the React

present in the node modules folder of the example project.

The example folder, known modules, and React.

Now we can move into the example folder and link our package.

In double check that the link worked, you can issue npm ls, location global,

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript