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

cra-template-all-the-things-typescript

v0.19.0

Published

all the bells ๐Ÿ”” and whistles ๐Ÿ˜™ for create-react-app

Downloads

4

Readme

NOTE: still under active development and I'm not currently providing backwards compatibility until things stabilize.

๐Ÿ“ฏ Description

This package includes scripts and configuration used by Create React App but with LOTS more bells ๐Ÿ”” and whistles ๐Ÿ˜—.

โšก Features

  • accessibility (a11y) analyzer: via axe. in the bottom corner of CRA youโ€™ll see a menu that will give you a list of items your site is violating in terms of a11y.
  • admin panel: exception view and extensible panel to add custom admin capabilities.
  • authentication: via Auth0. gives you the ability to login using Google/Facebook.
  • bundle size analyzer: ร  la CRAโ€™s docs and source-map-explorer. do npm run analyze after creating a build.
  • component Libary (UI): via Material-UI. (Semantic UI is a good alternative, too.)
  • cron: via node-schedule.
  • CSP nonce: via helmetjs.
  • documentation: adds some standard and GitHub-specific Markdown files using best practices. files include:
  • error boundary: adds a top-level one to the app. (see doc).
  • error pages: 401, 404, 500.
  • error reporting: listens to window.onerror and reports JS errors to the server for debugging.
  • experiments framework: allows you to add experiments quickly via a React component and hook.
  • Flow: enable by default (off by default in CRA).
  • hot module replacement (HMR): enable by default (off by default in CRA).
  • humans.txt / robots.txt: adds stubs of these files.
  • Jest: installs Enzyme into the mix by default.
  • health checks: runs a client health check every 5 minutes to see if the client is still valid.
  • i18n: via react-intl and extraction tools.
  • imports: absolute imports are turned on.
  • libraries: adds lodash by default.
  • local state: adds Apollo's Local State.
  • logger: via winston.
  • node inspection: adds --inspect for development mode.
  • Open Graph: adds stub for social media embedding.
  • OpenSearch: adds stub file so that you can add search queries to your site later.
  • ORM: via sequelize.
  • perf indicator: in the bottom corner of the app, it will display render times. (also has web vitals built in.)
  • Prettier: adds linting upon commit. also sorts imports via prettier-plugin-import-sort.
  • React Router: adds AJAX-navigation, and code splitting via React.lazy and Suspense.
  • React Spring: for great animation using a React hook.
  • Sentry: exception collection and analysis.
  • server: i know, heresy!
  • structured data: via JSON-LD.
  • styleguide: via Storybook.
  • xsrf/csrf protection: via csurf.

๐Ÿ’พ Install

npx create-react-app react-all-the-things --use-npm --scripts-version=cra-all-the-things --template=all-the-things

Then, to run your newly created server locally, with the Storybook styleguide server:

npm start

Prerequisites: Node 13+ if you want proper internationalization (i18n) support (via full-icu).

Or, to run locally without the Storybook styleguide server:

npm run serve:dev

In dev or prod you'll want to setup your environment as well. Check out the .env.example file and mv it to .env.development.local (or .env for prod) and set the various variables:

  • REACT_APP_DB* for your database
  • REACT_APP_SESSION_SECRET for session management
  • REACT_APP_AUTH0* variables if you would like to use Auth0 for logging in

To run in production (or better yet check out bin/flightplan.js)

npm --production install
npm run build
npm run serve:prod

To run tests:

npm run test

๐Ÿ”จ Development (of this meta-repo, not of the repo created by the npx command above)

To run locally, with the Storybook styleguide server:

yarn
cd packages/react-scripts  # TODO(mime) need to get rid of this command eventually - it's a crutch
npm install
cd ../../
yarn start

To run locally, without the Storybook styleguide server:

yarn serve:dev

To run tests:

yarn:test

To change port, in an .env change the values to what you would like:

PORT=3000
REACT_APP_SSR_PORT=3001

To run migrations:

npx sequelize db:migrate && npx sequelize db:seed:all

To create a new migration:

npx sequelize migration:generate --name [migration_name]

To learn more about Sequelize and migrations, read the docs here.

To add your name/email to relevant files:

npm run config

To extract i18n messages (they go into the folder build/messages):

npm run extract-messages

To use Docker:

npm run dev

and then MySQL will be available on port 3002 (with username/password/database name all being allthethings). Redis will be on port 3003. To set up Redis be sure to set REACT_APP_REDIS_HOST and REACT_APP_REDIS_PORT.

๐Ÿ‘‰ See main README.md for roadmap and more details! ๐Ÿ‘ˆ

๐Ÿ“œ License

MIT

(The format is based on Make a README)