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 simple Create Next App template to start your projects with Next.js, TypeScript, ESLint, Prettier and other tools.

⚡ Next Typescript Template ⚡ A simple Create Next App template to start your projects with Next.js, TypeScript, ESLint, Prettier and other tools. Quic

Nov 23, 2022

Create a new project with Next.js, TypeScript, Eslint, Prettier in just 1 second and you don't need to setup anything.

Create a new project with Next.js, TypeScript, Eslint, Prettier in just 1 second and you don't need to setup anything.

Next + TypeScript + Eslint + Prettier Template 🔥 Create a new project with Next.js, TypeScript, Eslint, Prettier in just 1 second and you don't need

Oct 2, 2022

TypeScript + Nextjs + Tailwind = TNT🧨 (plus Prettier and ESLint configuration).

TypeScript + Nextjs + Tailwind => TNT🧨 (plus Prettier and ESLint configuration).

Bye bye next boilerplate, welcome to TNT! About This is TNT, Nextjs boilerplate powered by Typescript, Tailwind. This template also has customized ESL

Aug 7, 2022

A template for your NestJS projects including Typescript, Eslint, Prettier, Jest and Docker.

A template for your NestJS projects including Typescript, Eslint, Prettier, Jest and Docker.

NestJS Template Quickly start a new NestJS project A template for your NestJS projects including Typescript, Eslint, Prettier, Jest and Docker. ⏩ Gett

Oct 7, 2022

A template for your Next.js projects including Typescript, Eslint, Prettier, Jest, Cypress and Docker.

A template for your Next.js projects including Typescript, Eslint, Prettier, Jest, Cypress and Docker.

Next.js Template Quickly start a new Next.js project A template for your Next.js projects including Typescript, Eslint, Prettier, Jest, Cypress and Do

Oct 7, 2022

A template for your Node.js projects including Typescript, Eslint, Prettier, Jest and Docker.

A template for your Node.js projects including Typescript, Eslint, Prettier, Jest and Docker.

Node.js Template Quickly start a new Node.js project A template for your Node.js projects including Typescript, Eslint, Prettier, Jest and Docker. ⏩ G

Oct 12, 2022

Repository for the LogRocket meetup: Configuring ESLint And Prettier For TypeScript. ✨

logrocket-eslint-prettier-typescript ✨ Configuring ESLint And Prettier For TypeScript ✨ Join Josh Goldberg on October 21st at 2 p.m. EDT and learn how

Dec 21, 2022

🚀Starter project with Angular 13, Ngx-admin, NestJS, Nx Workspace, Jest, Cypress, ESLint & Prettier 🚀

🚀Starter project with Angular 13, Ngx-admin, NestJS, Nx Workspace, Jest, Cypress, ESLint & Prettier 🚀

Angular 13 + Ngx-admin + NestJs + NX Starter project with Angular 13, Ngx-admin, NestJs, Nx Workspace, Jest, Cypress, ESLint & Prettier Features ✅ Ang

Jan 4, 2023
Owner
HackingBay
Premium Design and Development Agency
HackingBay
💅 A ready-to-go with a well-thought-out structure Electron app boilerplate with ReactJS, TypeScript, CSS / SASS modules, SWC, Eslint, Prettier, GitHub Action releases and more.

Electron App ??  A ready-to-go with a well-thought-out structure Electron app boilerplate with ReactJS, TypeScript, CSS / SASS modules, SWC, Eslint, P

Dalton Menezes 155 Dec 29, 2022
College project done for the CG Artwork lecture in 2022. Used HTML for the indexes and mainly JavaScript (using to THREE.js). Ended with the final A grade (17.3 in scale grade).

CG Artwork Project 2022 This project was done by a group of 3 in 2022 with an educational purpose for the CG Artwork lecture in Instituto Superior Téc

filipe_neves 3 Sep 19, 2022
A boilerplate for ExpressJs projects configured with ESLint, Prettier & Airbnb Setup. The boilerplate utilises RESTful architecture and uses Mongodb.

ExpressJs-Boilerplate An ExpressJs boilerplate configured with ESLint, Prettier & Airbnb Setup. The boilerplate utilises RESTful architecture and uses

Hammas bin Farrukh 4 Mar 8, 2023
A template project for NRWL's NX, Ionic Framework, Stylelint, Eslint, and more from the OpenForge mobile app team.

OpenForge Ionic Monorepo Example This is a template project for all Ionic + Angular Monorepos. It was generated using a combination of Nx, Ionic Thank

OpenForge 14 Oct 26, 2022
A framework dedicated to making it easier for you to build enterprise-grade PWA applications.

A framework dedicated to making it easier for you to build enterprise-grade PWA applications.

JerryC 181 Oct 6, 2022
This repo contains configurations for webpack, webhint, stylelint and eslint, it is a boiler-plate template and a starting point for coming projects.

Project Name Description the project. Built With Major languages Frameworks Technologies used Live Demo (if available) Experience a live Demo ?? Getti

Adel Guitoun 6 Oct 20, 2022
A Nextjs-Typescript boilerplate , configured with Tailwindcss, Eslint, Prettier, Lint-staged ,Husky and commitizen

Minimal Nextjs Typescript boilerplate A Minimal Next-Typescript boilerplate to quickly and easily bootstrap your next project. Comes pre-configured wi

TEYIM ASOBO 3 Nov 4, 2022
Babel plugin and helper functions for interoperation between Node.js native ESM and Babel ESM

babel-plugin-node-cjs-interop and node-cjs-interop: fix the default import interoperability issue in Node.js The problem to solve Consider the followi

Masaki Hara 15 Nov 6, 2022
Babel-plugin-amd-checker - Module format checking plugin for Babel usable in both Node.js the web browser environments.

babel-plugin-amd-checker A Babel plugin to check the format of your modules when compiling your code using Babel. This plugin allows you to abort the

Ferdinand Prantl 1 Jan 6, 2022
vite-react-typescript with eslint and prettier predefined settings

Vite + React + Typescript + Eslint + Prettier A starter for React with Typescript with the fast Vite and all static code testing with Eslint and forma

The Sword Breaker 315 Dec 30, 2022