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

@dbenfouzari/react-typescript-starter

v6.0.19

Published

2019/07/16 - Redone all with new best practices. Removed all bad eslint rules etc. See diff at [Github](https://github.com/dbenfouzari/react-typescript-starter/compare/v5.1.1...v6.0.0)

Downloads

19

Readme

react-typescript-starter CircleCI codecov Maintainability

2019/07/16 - Redone all with new best practices. Removed all bad eslint rules etc. See diff at Github

This project aims to simplify starting project. It contains so much useful things which are, in my opinion, useful to get a really robust application.

It contains :

  • Docker
  • docker-compose
  • eslint
  • jest
  • commitlint
  • etc...

Docker

My Dockerfile is optimised to avoid useless build when no new dependencies were added, or when code did not update.

You can use the Makefile to build production app and run it

make build
make run

make build

This command will build project with default params. Built image will be named react-typescript-starter-starter and accessible port is 8080.

make run

This one will run an nginx serving static build and expose it to default port 8080.

docker-compose

I also included a docker-compose.yml file to ease up and down. To build and run development server simply run :

docker-compose up --build -d web

To build and run production server run :

docker-compose up --build -d web-prod

ESLint

I added custom plugins on top of initial ESLint configuration provided by create-react-app.

  • eslint-plugin-prettier to ensure Prettier does not collide with ESLint rules

Prettier

Our code is automatically reformated when we save a file, or when we try to commit thanks to Prettier.

Final notes

Commands

You will find all available commands in package.json. Here the ones that you will use often :

  • yarn start to start application if you don't use Docker

Lint :

  • yarn lint:js to lint all application's JS files with ESLint. You can append --fix if you want autofix
  • yarn lint:js:changed to lint ONLY changed JS files
  • yarn lint:css to lint CSS-in-JS or CSS files
  • yarn lint:css:changed to lint ONLY changed CSS-in-JS or CSS files
  • yarn lint to lint all application
  • yarn lint:changed to lint all changed application files

... All commands are listed in package.json and are pretty self-explanatory. So I won't list them all here, cuz' they all are important and useful.

Contributions

We also lint your commit names thanks to conventional-commits. If commit content or commit name is not valid, we will be rejected.

So it helps you to keep maintainable code