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

@sumup/cra-template

v2.0.5

Published

Creates a ready for development React app using create-react-app.

Downloads

9

Readme

@sumup/cra-template

A create-react-app template for JavaScript React apps with SumUp's frontend stack.

Table of Contents

💻 Prerequisites

  • You should have Node.js installed at a version equal or above v14.0.0. If you cannot do that, see the Troubleshooting section for ways around this requirement.
  • At the moment this project reqires yarn (classic) to be installed on your system. Yarn is a package manager for JavaScript. You can read how to install the Yarn CLI in their documentation.

✨ Setting up a new JavaScript SumUp React project

  1. Open your terminal.
  2. Navigate to the directory you would like to place your project in.
  3. Run yarn create react-app my-app --template @sumup, where my-app is the name of your project.

This will create the folder my-app and initialize a new project inside. The project will be based on create-react-app and will use SumUp's Circuit UI component library and Foundry toolkit.

Optional: CRA will use React version ^17.0.0 with the new JSX runtime. You can remove any synthetic default React import statements from the codebase (i.e. import React from 'react'). If you do, make sure you disable the corresponding ESLint rules in .eslintrc.js, by providing overrides to Foundry in a second argument. See the React team's blog post covering the new runtime for details about the ESLint rules.

🛠 Development workflow

Firing up the tools

Run yarn start to start the development build. The app should automatically open in your browser. Changes you make to src/App.js should be visible on the page almost immediately.

To create a production build of your app, run yarn build. react-scripts will create an optimized production build of your application inside the build folder of your project. It will also provide you with additional details on what to do with them.

Adding a new component

We try to make adding new components as easy as possible. Run yarn create:component YourComponentName to launch the plop CLI exposed and configured by Foundry.

A GIF of how to use the create:component script.

Linting your code

A linter is a tool that checks your code for

  • problems that will cause it to break when run, or
  • code style that violates a given set of rules the project is following.

Linting serves as a first line of defence against evil bugs on production.​ Your project will be set up to use a version of the popular ESLint linter for JavaScript provided by Foundry. You can lint your code and apply automatic fixes by running yarn lint. Usually, your editor is able to integrate with ESLint.

Writing tests

Writing tests is great. Tests are the second line of defence against bugs ending up on production. By covering your application in unit and integration tests, you can be sure you did not break anything when, for example, shipping refactored code to production. Your new React project comes with testing built in. By running yarn test you will start the test runner, Jest. As you add tests or make changes to your code, Jest will re-run tests and show you the results. The app will come with react-testing-library set up for writing UI tests for your React components. Check out src/App.spec.js for examples.

For component tests we export a custom render method for testing-library/react from src/test-utils.js. The custom render method ensures components are wrapped in a ThemeProvider with the Circuit UI theme. Components created with the create:component script will have a *.spec.js file with the local render method imported. The import should look something like this. The Testing Library docs for React contain more details on how to add more React providers for your tests.

import { render } from '../../test-utils';

📖 Useful resources

  • The docs for create-react-app contain a lot of solutions for common problems when writing a React application.
  • Foundry docs.
  • Circuit UI docs and storybook.
  • The README for@testing-library/react.

⚠️ Troubleshooting

Debug mode

create-react-app has a debug mode. To output verbose logging to your console, add the --debug flag when creating your app. For example:

yarn create react-app my-debugging-app --debug --template @sumup

Broken build due to ESLint version

Because we depend on create-react-app@latest there is a chance that the shipped ESLint version in react-scripts is different from the one shipped with Foundry. Both projects are toolkits. When the build for your application fails, try to create your app with a version of CRA that ships the same version of ESLint as the Foundry's canary channel.