
Security News
vlt Launches "reproduce": A New Tool Challenging the Limits of Package Provenance
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
@sumup/create-sumup-next-app
Advanced tools
Creates a fresh NextJS application preconfigured with SumUp's Circuit UI and Foundry
The easiest way to get started writing a Next.js app with SumUp's standard frontend toolchain.
v9.10.0
. If you cannot do that, see the Troubleshooting section for ways around this requirement.yarn
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.yarn create @sumup/sumup-next-app my-app
, 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 Next.js
and will use SumUp's Circuit UI
component library and Foundry
toolkit, as well as lodash
.
Run yarn dev
to start the development build. The app should automatically open in your browser. Changes you make to pages/index.js
should be visible on the page almost immediately.
To create a production build of your app, run yarn build
. Next.js
will create an optimized production build of your application inside the .next/
folder of your project. It will also provide you with additional details on what to do with them.
We try making adding new components as easy as possible. Run yarn create-component YourComponentName
to launch the plop CLI exposed and configured by Foundry.
A linter is a tool that checks your code for
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. Check your options and refer to the Tips section for details on how to make this work with Foundry.
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 components/Anchor.spec.js
for examples.
create-next-app
contain a lot of solutions for common problems when writing a React application.react-testing-library
.The great strength of using a toolkit like Foundry is that you as a user do not have to care about developer dependencies like ESLint. Foundry manages and runs them for you via its run
command. This, however, becomes a bit tricky when you want your text editor or IDE to run ESLint on your code as you edit it. To get this working, you need to tell your editor where to look for ESLint dependencies.
Your mileage may vary depending on your text editor, but we try to keep a list of instructions here.
The ESLint extension for VSCode has a nodePath
setting. It allows you to add additional paths where the plugin should look when resolving dependencies. By setting it to the default path of Foundry in a project's node_modules
, you will make VSCode work with Foundry's version of ESLint. Put the following line in your settings.json
.
"eslint.nodePath": "node_modules/@sumup/foundry/node_modules",
Don't worry, this won't break ESLint for other projects. It just gives VSCode another relative path where it can look for ESLint.
create-sumup-next-app
has a debug mode. To output verbose logging to your console, add the --debug
flag when creating your app. For example:
yarn create @sumup/sumup-next-app my-debugging-app --debug
error eslint@5.0.1: The engine "node" is incompatible with this module. Expected version "^6.14.0 || ^8.10.0 || >=9.10.0".
error Found incompatible module
Use a version of node that is compatible with ESLint. If you cannot install it globally, you may try nvm, nodenv, or similar tools.
2017-05-02 09:49 node[8980] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2017-05-02 09:49 node[8980] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2017-05-02 09:49 node[8980] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
events.js:163
throw er; // Unhandled 'error' event
^
Error: Error watching file for changes: EMFILE
at exports._errnoException (util.js:1050:11)
at FSEvent.FSWatcher._handle.onchange (fs.js:1376:11)
error Command failed with exit code 1.
Make sure you have watchman installed. On macOS and Homebrew as your package manager, you can install it with the following line.
brew install watchman
SumUp is a mobile-point of sale provider. It is our mission to make easy and fast card payments a reality across the entire world. You can pay with SumUp in more than 30 countries, already. Our engineers work in Berlin, Cologne, Sofia, and Sāo Paulo. They write code in JavaScript, Swift, Ruby, Elixir, Erlang, and much more. Want to come work and with us? Head to our careers page to find out more.
FAQs
Creates a fresh NextJS application preconfigured with SumUp's Circuit UI and Foundry
The npm package @sumup/create-sumup-next-app receives a total of 1 weekly downloads. As such, @sumup/create-sumup-next-app popularity was classified as not popular.
We found that @sumup/create-sumup-next-app demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 23 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.