1 Prelude

The entire project is here

https://github.com/lambdaJasonYang/rollupreact

I am sick and tired of all the tutorials online using bulky Storybook to hot-reload/demo their react components.
Here we do not use any external tools to build our react library and hot-reload/demo in the SAME FOLDER.

2 Summary

Our general project name that contains both the component library and demo page is called colocatedReact

This allows us to develop our react component library and demo it using the light weight default create-react-app in the SAME folder called colocatedReact.

cd colocatedReact
npm init
npm install -D react typescript @types/react"

• add "peerDependencies":{"react": "CURRENTVERSION" } to package.json
• change to "main" : "dist/esm/index.js in package.json
  • when we do npm install .. from our demo folder, the main variable tells us where to look for the js files.
• add "module": "dist/esm/index.js" to package.json
  • this is used by rollup
• add "build":"tsc" to scripts in package.json
• add "build:rollup": "rollup -c" to scripts in package.json

{
  "name": "colocatedReact",
  "version": "1.0.0",
  "description": "",
  "main": "dist/esm/index.js",
  "module": "dist/esm/index.js",
  "scripts": {
    "build": "tsc",
    "build:rollup": "rollup -c",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/react": "^18.2.7",
    "react": "^18.2.0",
    "typescript": "^5.0.4"
  },
  "peerDependencies": {
    "react": "^18.2.0"
  }
}

npx tsc --init

in tsconfig.json

1. uncomment "jsx": "react"
2. uncomment "outDir": "dist"
3. uncomment "module": "ESNext"
4. uncomment "moduleResolution": "nodenext"

npm install -D rollup @rollup/plugin-node-resolve @rollup/plugin-typescript @rollup/plugin-terser rollup-plugin-peer-deps-external

mkdir src
mkdir src/components
mkdir src/components/Button
touch src/index.ts
touch src/components/index.ts
touch src/components/Button/index.ts

cd dist/esm/
touch package.json

{
    "name": "fruitrollup",
    "version": "1.0.0"

}

cd demo
npm install .. #this will install our component library via the package.json "main": "dist/esm/index.js",