add yarn workspaces, update configuration #1
Conversation
| @@ -0,0 +1,17 @@ | |||
| { | |||
There was a problem hiding this comment.
Launch.json for VSCode for launching the app in debugging mode. You can configure which script you want debugging mode to launch with the "command" value (currently set to yarn dev). Breakpoints and call stack will be available in VSCode when running with this launch config
| @@ -1,6 +1,6 @@ | |||
| { | |||
There was a problem hiding this comment.
This tells Lerna that we are using yarn to manage the project, and that we are using yarn workspaces. Lerna has first class support for workspaces.
| @@ -1,8 +1,12 @@ | |||
| { | |||
| "name": "root", | |||
| "private": true, | |||
There was a problem hiding this comment.
This is a pattern that tells yarn which folder we are using for workspaces. When you run yarn install in the root it will check the package.json files of each of these workspaces and install the shared modules in the root directory
| "scripts": { | ||
| "dev": "lerna run dev", | ||
| "dev": "lerna run --parallel dev", |
There was a problem hiding this comment.
This dev script will run the "dev" scripts for each package (so both Next apps, as well as the new rollup --watch mode for the component library.)
There is also a script to run without the rollup watch since it does require a fair bit of memory and increase hot reload times. using storybook to work on the components is a preferable option
| @@ -9,7 +9,7 @@ | |||
| "lint": "next lint" | |||
| }, | |||
| "dependencies": { | |||
| "@bnayae/wk-lib-playground": "^1.0.45", | |||
| "@weknow-network/wk-lib-playground": "^1.0.45", | |||
There was a problem hiding this comment.
All references in the project are scoped to this @weknow-network so I updated them from bnayae
This is controlled by the "name" field in the package.json files if you ever need to change it
| "core": { | ||
| "builder": "webpack5" | ||
| } | ||
| "framework": "@storybook/react" |
There was a problem hiding this comment.
This is what was causing the error and storybook not to build. Unfortunately I don't have the precise reason why. This project is the first time I've ever used storybook in a monorepo, I think it has something to do with issues related to webpack 4 vs 5 when everything is hoisted into a single node modules directory. either way with this removed it works now. if you want to read more this is where I got most of my info:
| "pure": false, | ||
| "namespace": "lib-playground" | ||
| }] | ||
| plugins: [ |
There was a problem hiding this comment.
each plugin itself needs to be an array (so array inside array)
| @@ -18,9 +19,7 @@ | |||
| "author": "bnaya eshet", | |||
| "license": "MIT", | |||
| "types": "dist/index.d.ts", | |||
There was a problem hiding this comment.
Evidently consumers are looking for types with the "typings" field in package.json. Might be that types is not necessary (I may have to update my blog entry) 😄
| @@ -75,7 +74,8 @@ | |||
| }, | |||
| "peerDependencies": { | |||
| "react": "^17.0.2", | |||
| "react-dom": "^17.0.2" | |||
| "react-dom": "^17.0.2", | |||
| "styled-components": "^5.3.3" | |||
There was a problem hiding this comment.
styled-components should be a peerDependency in your library like react and react-dom (to indicate to consumer libraries that it needs to be installed, but so that you don't have to package the entire styled-components project in your custom library)
tsconfig.json
Outdated
| "@weknow-network/wk-lib-playground": ["wk-lib-playground/src"], | ||
| "@weknow-network/*": ["*/src"] | ||
| } | ||
| "baseUrl": "./packages" |
There was a problem hiding this comment.
I do not believe paths are not necessary to define in tsconfig here. However if you are looking to consume your components directly from your library workspace ( rather than the dist that contains the compiled library), this might be a way to approach it.
|
I've added some comments with each change explaining the reason for it, hopefully that helps! |
|
Updated with the |
Instructions for running scripts in the README