npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

generator-react-scaffolder

v2.3.3

Published

Scaffolding for new enterprise scale React applications on the fly.

Downloads

36

Readme

React Scaffolder

Yeoman generator for scaffolding new React applications.

npm generator typescript javascript codecov quality prettier license

A Homegrown React Template Generator

While tools like Create React App and Next.js are objectively awesome, over time I've decided that I want to learn more about the engine behind the application. As such, I started building and evolving my own React + Webpack configuration over time as a learning experience.

I have since decided to share this tool with the open source community. Love it or loathe it, I will not be happy or offended either way. 🤷‍♂️

Prerequisites

  • Node version: While each template should still work with node ^14.6.0, moving forward the default version is >= 16.13.1.
  • NPM users: Updates to each template moving forward will be focused on optimizing for npm >= 7.x, though it should remain backwards compatible with npm ^6.14.7.
  • Yarn users: Current templates are optimized for yarn ^1.22.4, and no testing has been done for yarn >= 2.x as of yet.

Using the Generator

This scaffolding tool is a yeoman generator, and requires that yo be installed. After installing yo, run the following commands.

Install the Generator

NPM

npm install -g generator-react-scaffolder

Yarn

yarn global add generator-react-scaffolder

Scaffold a New React Template

To begin the scaffolding process:

yo react-scaffolder

At this stage, you will be prompted to provide the following:

  • Application name, any text of your choosing
  • Yarn, yes or no

With Options

Generate with TypeScript:

yo react-scaffolder --typescript

// alternatively
yo react-scaffolder --ts

The generator will attempt to install dependencies for you by default, though this operation can be disabled:

yo react-scaffolder --skip-install

What's Included

Rendering: client-side only
Syntax: react, js, jsx, ts, tsx
Tooling: eslint, stylelint, editorconfig, babel (non-TypeScript template only)
Styling: scss, css, postcss, css module syntax (*.module.scss and *.module.css nomenclature supported)
Testing: jest, react testing library
Build instructions: provided via the README.md file generated with each new scaffold

What's Not Included

Script ejection: There are links to the default webpack config on github in each webpack.*.js file.
Environment variables: The boilerplate is agnostic to your preferred implementation for consuming environment variables.

Disclaimers

  • Internet Explorer: Quite frankly, if you are still supporting IE in the 2020s, you are wrong. The templates this tool will generate have not been tested in IE, and they never will be, so use at your own risk there.