Rollup + React + Babel + Prettier + Strict ESlint and Stylelint + Sass + VSCode + Playground app - Enterprise grade boilerplate

Overview

React package boilerplate by HackingBay

  • Rollup + React 17 + Babel + Prettier + Strict ESlint and Stylelint + Sass + VSCode + Playground app - Enterprise grade boilerplate

Inherits minimal boilerplate https://github.com/hackingbay/react-minimal-boilerplate with initial boilerplate setup and also a playground app setup to test the created component.

Reference document to setup Rollup.js based module bundle for reusability which helps properly export our React component created with create-react-app https://hinammehra.medium.com/build-a-private-react-component-library-cra-rollup-material-ui-github-package-registry-1e14da93e790

TODO: Check if any improvement can be taken from https://blog.bitsrc.io/trying-rollup-for-react-applications-d3c2304d16bf

TODO:

Editor Configuration

  • Editor of your preference. I used some VSCode specific config in .vscode folder and recommend plugins for enhanced experience.

Recommended VSCode Extensions:

  • Prettier (Official) - Code formatter
  • ESLint (Official) - Real time JS syntax validation
  • Stylelint (Official) - Real time CSS/Sass syntax validation

Technologies Used

  • React 17
  • Rollup.js
  • Yarn
  • Babel
  • Prettier + ESlint + Stylelint
  • Sass
  • Jest

Steps to use this project

  1. Update your library/component's name, license, publishConfig and repository fields in package.json as per your need.

  2. If external styles are used, replace output: 'sample.css' with your project's expected output bundled css file name. People can import styles into their project as import "sample/dist/sample.css";

  3. If .env file is used, make sure you updated your library/component name. Optionally, you can remove it.

  4. yarn dev for local development and yarn build to prepare dist folder for publishing.

  5. yarn test-all to run component and its playground app tests.

  6. Before publishing with npm make sure you are publishing to correct registry, public/private depending on project's need.
    Change private:true to private:false in package.json to publish package to public registry.

Note

You may see a warning like this when running lint, but we should ignore that as that is expected.

Warning: React version was set to "detect" in eslint-plugin-react settings, but the "react" package is not installed. Assuming latest React version for linting.

Available Scripts

In the project directory, you can run:

yarn build

To build the project

yarn fix:all

Runs prettier formatter followed by eslint and stylelint, to format code and fix lint issues. Prettier is not good enough to run alone, must always be followed lint fixes included in this command.

npm login --registry https://PACKAGE-REGISTRY-URL

If your account doesn't exist in internal registry, ask admin to enable account registration temporarily. And, run following for the first time. Run this command in the root of the project only, to make sure your account is created in our local internal registry not in the npm public registry.

npm adduser --registry https://PACKAGE-REGISTRY-URL

If your account exists, login to the registry and do npm publish to our internal registry but running following command. Do it carefully, else publish could be published to public npm registry, which requires taking immediate actions to get it removed with in few days of publishing.

npm publish --registry https://PACKAGE-REGISTRY-URL

This commands publishes your package to our internal npm package registry.

If you are publishing to public registry for the first time to npm you may need to provide --access=public as argument. E.g.

npm publish --access=public --registry https://registry.npmjs.org

For every other time you need to upgrade version number in package.json before publish. Also, update license in package.json, which is currently set as restrictive UNLICENSED, not an open-source friendly license.

Playground app

Based on minimal boilerplate https://github.com/hackingbay/react-minimal-boilerplate created in playground/ folder. A sample usage of this component is demonstrated in playground app and can be very helpful while development of the component.

You might also like...
A bare-bones vite + react + typescript starter template with eslint + prettier, vitest + @testing-library and react-router

A bare-bones vite + react + typescript starter template with eslint + prettier, vitest + @testing-library and react-router

An template project made with Next.js, Typescript, Styled Components, Eslint, Prettier, Editorconfig, Storybook, Hygen and Jest + React Testing Library

An template project made with Next.js, Typescript, Styled Components, Eslint, Prettier, Editorconfig, Storybook, Hygen and Jest + React Testing Library

TypeScript, React, Rollup, and Chrome v3 Manifest Starter

A starter repo for building Chrome v3 manifest extensions using Typescript and React.

React starter kit for static apps (NO SSR): React + Vite + wouter + jest + testing-library + Prettier + ESLint + Stylint

Intention is to have some light-weight starter kit for any react (static) applications. Faster 🚀 build time, type-safe, linting, etc, are the things which have been considered for this setup.

Vite + React + TypeScript + Eslint + Prettier Template ⚡
Vite + React + TypeScript + Eslint + Prettier Template ⚡

Create a new project with Vite, React JS, TypeScript, Eslint, Prettier in just 1 second. You don't need to do anything anymore.

😊 NextJS Template with Tailwindcss, Eslint, Prettier.

Next.js + Tailwind CSS Example By Pedromdsn Deploy your own Deploy the example using Vercel or preview live with StackBlitz How to use Execute create-

A Cool VSCode extension that lets you create react component files/folders instantly with boilerplate code. It also handles imports/exports on its own.
A Cool VSCode extension that lets you create react component files/folders instantly with boilerplate code. It also handles imports/exports on its own.

React Component Generator v1.0.0 A cool VSCode extension that lets you create your component's files/folders instantly with boilerplate code. Also aut

React + Redux starter kit / boilerplate with Babel, hot reloading, testing, linting and a working example app built in
React + Redux starter kit / boilerplate with Babel, hot reloading, testing, linting and a working example app built in

A comprehensive starter kit for rapid application development using React. Why Slingshot? One command to get started - Type npm start to start develop

Owner
HackingBay
Premium Design and Development Agency
HackingBay
Next js 12 boilerplate with SCSS, Jest, React Testing Library, Prettier, ESLint, Plop JS and more 🚀

Next.js 12 Complete Boilerplate This is a readme from next.js 12 complete boilerplate. Table of Contents Just to make your dev experience more simple

Douglas Henrique 51 Dec 29, 2022
A React boilerplate using CRA5 + Craco, Typescript, Tailwind, Eslint + Prettier, Jest and Husky

Getting Started with Create React App This project was bootstrapped with Create React App. It contains the following additions: Typescript Tailwind St

Marvin de Bruin 20 Dec 7, 2022
A React boilerplate with Typescript using Vite. Includes React-query, Zustand, Tailwindcss, EsLint + Prettier, Husky Commit Lint

A React boilerplate with Typescript using Vite. Includes React-query, Zustand, Tailwindcss, EsLint + Prettier, Husky Commit Lint

null 11 Dec 13, 2022
Boilerplate for creating React component libraries, bundled with Rollup.js to ES6 Modules, React Styleguidist, Typescript

Boilerplate for creating React component libraries, bundled with Rollup.js to ES6 Modules, React Styleguidist, Typescript

Kai Hotz 239 Dec 29, 2022
dApp Starter Kit is flexible production grade Web3 boilerplate with Next.js, React, Material Design and Typescript

dApp Starter Kit is flexible production grade Web3 boilerplate with Next.js 12, React.js, Material-UI, Typescript and web3-react (beta).

ETH Salt Lake 8 Nov 1, 2022
Web3 Starter Kit is flexible production grade Web3 boilerplate with Next.js 12, React.js, Material-UI, Typescript and web3modal

Web3 Starter Kit is flexible production grade Web3 boilerplate with Next.js 12, React.js, Material-UI, Typescript and web3modal

ETH Salt Lake 8 Nov 1, 2022
React.js todo app with authorization, Testing: Cypress(e2e), UI (Chakra UI), Eslint, prettier, git hooks

React TypeScript template with Vite This is a React + TypeScript boilerplate built with Vite. What's inside? ReactJS Vite TypeScript Jest Testing Libr

Vladislav 2 Jan 28, 2022
A universal Javascript starter kit inc. React, Redux, Redux Dev Tools, Universal Redux Router, CSS Modules, hot module reloading, Babel for ES2015+ and ESLint

UniversalJS A universal Javascript starter kit inc. React, Redux, Redux Dev Tools, Universal Redux Router, CSS Modules, hot module reloading, Babel fo

Colin Meinke 65 Oct 13, 2022
Starter template for Vite with React (TypeScript). Supports Tailwind with CSS-Modules. Jest and @react/testing-library configured and ready to go. Also ESLint, Prettier, Husky, Commit-lint and Atomic Design for components.

Mocking up web app with Vital(speed) Live Demo Features ⚡️ React 17 ?? TypeScript, of course ?? Jest - unitary testing made easy ?? Tailwind with JIT

Josep Vidal 141 Dec 29, 2022
A modern minimal Vite + React + TypeScript template with pre-configured ESLint (with Airbnb JS/React rules), Prettier, Testing with Jest and Git hooks with Husky out of the box 📦

A modern minimal Vite + React + TypeScript template with pre-configured ESLint (with Airbnb JS/React rules), Prettier, Testing with Jest and Git hooks with Husky out of the box ??

Patrick Jean Meurer 16 Dec 29, 2022