Assemble Package:

Github Template

A lightweight monorepo template intended for use in developing javascript packages. Assemble Package leverages:

pnpm for dependency management
turbo for monorepo build and compile management
preconstruct to build packages
changesets to manage changelogs and publishing to the npm package registry.

Setup:

After creating your new repo from the github template plan out what your package(s) will be named and modify the contents of the packages directory to reflect this planning. Use the example in the packages directory as a reference. You can simply rename both the directory and the name in the package.json file and work off of that.

Install Dependencies: pnpm install
Run app: pnpm run dev

Initialization:

Removing the sample package in the packages directory.
Make a new directory with your package folder name.
Navigate to that directory and run pnpm init to create a fresh package.json file.
Make sure to add a namespace / scope to the package name.
Once that is all set up run pnpm preconstruct init from the root directory: this will add the necessary config for development and publishing.
Start adding dependencies and building! when adding dependencies navigate to the package you are installing dependencies within and then run. pnpm add [package-name].
If you don't want to bundle the dependency in the package make sure to specify the package as a peer dependency by using the --save-peer flag.
If you ran the example apps before all this setup make sure to remove any .next / .parcel-cache and dist directories! If you don't clean up you will have problems moving forward.

Publishing:

Note: in order to leverage the monorepo approach in a npm publishing workflow you need to have a paid NPM account - this unlocks private packages (sadly a mandatory in this context).

Example:

There is a next app configured with turb to work as a testing sandbox for your package development (or you can simply use it as a starting point for your dapp). You will need to modify your imports to reflect the new package name.

In the next app package.json you will need to import your development package like so:

"dependencies": {
  "[package-name-here]": "workspace:*"
}

In the next app next.config.ts make sure to update line 4 with the name of your package:

const withTM = require("next-transpile-modules")([
  "[package-name-here]",
]);

Both examples have been configured to support web3 technologies out of the box with the below dependencies: