Welcome to the Nodeblocks Frontend Starter Kit! 🎉 This kit is designed to make building frontend libraries in React super easy, helping you streamline your development workflow with minimal fuss. Let's dive in! 🤿
npm install @nodeblocks/frontend-list-organization-blockWelcome to the Nodeblocks Frontend Starter Kit! 🎉 This kit is designed to make building frontend libraries in React super easy, helping you streamline your development workflow with minimal fuss. Let's dive in! 🤿
- 🚀 Bundling with Rollup: Get a clean, minimalistic approach to bundling your JavaScript files for smoother frontend development.
- 💙 TypeScript Support: We've included a pre-configured tsconfig.json to ensure your TypeScript setup is strict, efficient, and ready to go.
- ⚙️ Peer Dependencies: Keep bundle sizes lean with React and React DOM set as peer dependencies.
- 🎨 CSS Support: Easily import and process CSS files, giving you more control over your styles.
1. Clone this repository 🌀:
``bash`
git clone
cd
2. Install dependencies 📦:
`bash`
npm install
3. Start development 🛠️:
`bash`
npm run watch
4. Build for production 🏗️:
`bash`
npm run build
The test folder contains examples that demonstrate how to use the libraries you create with this starter kit. These examples show compatibility with various bundlers, such as:
- Create React App (Webpack)
- Vite ⚡
- Rollup (itself) (Coming soon) 🔄
- Parcel (Coming soon) 📦
This ensures Nodeblocks libraries integrate seamlessly with different workflows. 🛠️✨
Before running each project make sure you run npm link:
1. In the root of this project:
`bash`
npm link
2. In the test project you want to run:
`bash`
npm i
npm link @basaldev/frontend-starter-kit
(Note that in real life your library would not be called frontend-starter-kit.)
3. Then you can follow your usual workflow either with Create React App (npm start) or with Vite (npm run dev`). This will give you a development environment where whenever you change your library it will be available in your test project.