Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
backpack-react-scripts
Advanced tools
This package is a fork of Create React App (specifically the
react-scripts
package). It's intended to be used in conjuction with create-react-app
like so:
# we still rely on facebooks global `create-react-app` cli
npm install -g create-react-app
# specify `backpack-react-scripts` as the scripts package to use
create-react-app my-app --scripts-version=backpack-react-scripts
# start your app development like you normally would with `create-react-app`
cd my-app
npm start
Out of the box, create-react-app
doesn't work well with Backpack components because it has no support for
Sass stylesheets or uncompiled dependencies in the node_modules
folder. We also want to be able to tailor
the template to use Backpack out-the-box.
This is a high-level overview of the changed we made to this fork.
See
config/webpack.config.{dev,prod}.js
,package.json
,scripts/{eject,init}.js
,template/.eslintrc
By default, react-scripts runs all code through ESLint on build. As our ESLint configuration is quite opinionated, we have disabled this functionality.
We have added an npm script so you can still run the linter at will using npm run lint
.
See
package.json
,template/.stylelintrc.json
We added Skyscanner's Stylelint configuration.
See
scripts/init.js
,template/src/*
We pre-install some Backpack components to help you get started quickly.
See
config/webpack.config.ssr.js
This Webpack configuration is used to to enable easy server-side rendering. It is derived from config/webpack.config.prod.js
.
Everything that we don't need from the prod config is not removed, but commented out.
dependencies
to devDependencies
See
scripts/init.js
Any app built with backpack-react-scripts should always output a bundle, and therefore it is enough to keep React and ReactDOM in devDependencies
. In many cases, they should also be external dependencies (not part of the bundle).
As the CRA CLI install React and ReactDOM, we cannot really do anything about that; but we can move the entries in package.json
from dependencies
to devDependencies
.
See
config/webpack.config.{dev,prod,ssr}.js
All Sass files are by default treated as CSS Modules. You can opt out of this behaviour using the following config option:
"backpack-react-scripts": {
"cssModules": false
}
If you decide to opt out, Sass files will not be treated as CSS Modules by default. However, you can opt-in on a per-file basis using the naming convention: *.module.scss
.
Backpack components will always be treated as CSS Modules, even if you opt out
backpack-react-scripts
To publish a new version of backpack-react-scripts
, run the following command:
npm run publish -- --scope backpack-react-scripts
You will be prompted to select a new semver version (MAJOR, MINOR, PATCH). Use the CHANGELOG.md to decide on the nature of the changes since the last release.
npm run publish -- --scope backpack-react-scripts --canary
Update the CHANGELOG.md with the new version, taking care to follow the format of previous releases.
We wish to keep this fork updated with the upstream repo to benefit from the ongoing open source development
of create-react-app
. To keep this fork up to date, please follow the steps below:
Ensure master
is in sync with upstream/master
:
git checkout master
git remote add upstream git@github.com:facebook/create-react-app.git
git fetch upstream
git reset --hard upstream/master
git push --force-with-lease
Rebase fork
on top of a tagged release on master
:
git checkout fork
git rebase <commit>
Note:
<commit>
should be the SHA-1 of the latest upstream release - not just the latest i.e.upstream/master
Pair with someone else to fix any conflicts and cross examine changes in upstream with changes in our fork.
This is the most time consuming part. Take care to make sure you are not regressing any functionality that we have added in our fork.
Re-name your local, rebased fork
branch to something else and push it to origin. This will ensure it runs through CI and you can verify your changes.
git branch -m <branch>
git push origin <branch>
Finally, when we are confident that the rebase has been successful, re-name your branch back to fork
and push it to origin:
git branch -m fork
git push --force-with-lease
FAQs
Backpack configuration and scripts for Create React App.
The npm package backpack-react-scripts receives a total of 111 weekly downloads. As such, backpack-react-scripts popularity was classified as not popular.
We found that backpack-react-scripts demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 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
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.