# @niveditn/react-scripts > Custom configuration and scripts for Create React App. Latest version **2.1.2** (published 2019-01-15) · MIT license · 0 weekly downloads ## Install ```sh npm install @niveditn/react-scripts pnpm add @niveditn/react-scripts yarn add @niveditn/react-scripts bun add @niveditn/react-scripts ``` Provides the command `react-scripts`. ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.1.2 | | Published | 2019-01-15 | | First published | 2018-11-29 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Node | >=6 | | Dependencies | 49 | | Unpacked size | 157.5 KB | | Known vulnerabilities | 0 (+10 in 4 direct dependencies) | | Install scripts | no | | GitHub stars | 0 | | Maintainers | niveditn | ## Links - npm: https://www.npmjs.com/package/@niveditn/react-scripts - Repository: https://github.com/niveditn/react-scripts - Homepage: https://github.com/niveditn/react-scripts#readme - Issues: https://github.com/niveditn/react-scripts/issues - npm.io page: https://npm.io/package/@niveditn/react-scripts ## Dependencies (49) - [bfj](https://npm.io/package/bfj.md) 6.1.1 - [jest](https://npm.io/package/jest.md) 23.6.0 - [chalk](https://npm.io/package/chalk.md) 2.4.1 - [dotenv](https://npm.io/package/dotenv.md) 6.0.0 - [eslint](https://npm.io/package/eslint.md) 5.6.0 - [resolve](https://npm.io/package/resolve.md) 1.8.1 - [webpack](https://npm.io/package/webpack.md) 4.19.1 - [fs-extra](https://npm.io/package/fs-extra.md) 7.0.0 - [fsevents](https://npm.io/package/fsevents.md) 1.2.4 - [babel-core](https://npm.io/package/babel-core.md) 7.0.0-bridge.0 - [babel-jest](https://npm.io/package/babel-jest.md) 23.6.0 - [css-loader](https://npm.io/package/css-loader.md) 1.0.0 - [url-loader](https://npm.io/package/url-loader.md) 1.1.1 - [@babel/core](https://npm.io/package/@babel/core.md) 7.1.0 - [file-loader](https://npm.io/package/file-loader.md) 2.0.0 - [sass-loader](https://npm.io/package/sass-loader.md) 7.1.0 - [babel-eslint](https://npm.io/package/babel-eslint.md) 9.0.0 - [babel-loader](https://npm.io/package/babel-loader.md) 8.0.4 - [jest-resolve](https://npm.io/package/jest-resolve.md) 23.6.0 - [style-loader](https://npm.io/package/style-loader.md) 0.23.0 - [@svgr/webpack](https://npm.io/package/@svgr/webpack.md) 2.4.1 - [dotenv-expand](https://npm.io/package/dotenv-expand.md) 4.2.0 - [eslint-loader](https://npm.io/package/eslint-loader.md) 2.1.1 - [postcss-loader](https://npm.io/package/postcss-loader.md) 3.0.0 - [react-dev-utils](https://npm.io/package/react-dev-utils.md) ^6.1.1 - [jest-pnp-resolver](https://npm.io/package/jest-pnp-resolver.md) 1.0.1 - [identity-obj-proxy](https://npm.io/package/identity-obj-proxy.md) 3.0.0 - [pnp-webpack-plugin](https://npm.io/package/pnp-webpack-plugin.md) 1.1.0 - [postcss-preset-env](https://npm.io/package/postcss-preset-env.md) 6.0.6 - [react-app-polyfill](https://npm.io/package/react-app-polyfill.md) ^0.1.3 - [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) 3.1.11 - [eslint-plugin-react](https://npm.io/package/eslint-plugin-react.md) 7.11.1 - [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) 4.0.0-alpha.2 - [postcss-safe-parser](https://npm.io/package/postcss-safe-parser.md) 4.0.1 - [base64-inline-loader](https://npm.io/package/base64-inline-loader.md) ^1.1.0 - [eslint-plugin-import](https://npm.io/package/eslint-plugin-import.md) 2.14.0 - [terser-webpack-plugin](https://npm.io/package/terser-webpack-plugin.md) 1.1.0 - [babel-preset-react-app](https://npm.io/package/babel-preset-react-app.md) ^6.1.0 - [eslint-plugin-flowtype](https://npm.io/package/eslint-plugin-flowtype.md) 2.50.1 - [eslint-plugin-jsx-a11y](https://npm.io/package/eslint-plugin-jsx-a11y.md) 6.1.2 - [postcss-flexbugs-fixes](https://npm.io/package/postcss-flexbugs-fixes.md) 4.1.0 - [workbox-webpack-plugin](https://npm.io/package/workbox-webpack-plugin.md) 3.6.3 - [eslint-config-react-app](https://npm.io/package/eslint-config-react-app.md) ^3.0.5 - [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) 0.4.3 - [webpack-manifest-plugin](https://npm.io/package/webpack-manifest-plugin.md) 2.0.4 - [babel-plugin-named-asset-import](https://npm.io/package/babel-plugin-named-asset-import.md) ^0.2.3 - [fork-ts-checker-webpack-plugin-alt](https://npm.io/package/fork-ts-checker-webpack-plugin-alt.md) 0.4.14 - [optimize-css-assets-webpack-plugin](https://npm.io/package/optimize-css-assets-webpack-plugin.md) 5.0.1 - [case-sensitive-paths-webpack-plugin](https://npm.io/package/case-sensitive-paths-webpack-plugin.md) 2.1.2 ## Recent versions - 2.1.2 (latest) — 2019-01-15 - 2.1.1 — 2018-11-29 ## README # react-scripts Customized [`react-scripts`](https://github.com/facebook/create-react-app/tree/master/packages/react-scripts) for Nuage Networks VSD UI Framework ## Getting Started Clone the repository to make changes: ``` git clone https://github.com/niveditn/react-scripts.git ``` ### Prerequisites This library is meant for use in an un-ejected CRA app. (See [facebook/create-react-app](https://github.com/facebook/create-react-app).) It sligthly modifies the behavior of the original scripts used to run, build and test the CRA app. ### Installation To install this customized version of `react-scripts`, simply point the corresponding `package.json` key towards this github repo. i.e. Replace this: ```json "react-scripts": "^2.1.1" ``` with: ```json "react-scripts": "@niveditn/react-scripts" ``` Then, in your project directory, run npm install command: ``` npm i ``` Your project should now be using the custom version of `react-scripts`. ### Usage The usage is identical to original package. The available npm scripts are: ```json "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", }, ``` ## Customization _**Current version: [2.1.1](https://github.com/facebook/create-react-app/tree/v2.1.1/packages/react-scripts)**_ The following customization has been done to the original `react-scripts` package. #### `package.json` Add the following packages to the manifest file: ```json "base64-inline-loader": "^1.1.0", ``` #### `config/webpack.config.dev` and `config/webpack.config.prod` ##### base64-inline-loader Add this loader at the top of the config objects, right under `oneOf` key. Make sure it is present before `url-loader` settings. ```javascript oneOf: [ // "base64-inline-loader" converts matching images to base64 strings. // If you add this loader at the top, you can leave the "url-loader" // as it is, since webpack will use the first loader it matches. { test: /\.(jpe?g|png|gif|svg)$/i, loader: require.resolve('base64-inline-loader'), options: { name: 'static/media/[name].[hash:8].[ext]', } }, // [... "url-loader" settings and so on ...] ] ``` Keeping this loader at the top means that if an image file matches its test, it will be converted to base64 string as intented. The remaining loaders will not be checked, so `url-loader` will not be used for the matching file. #### `scripts/start.js` ##### Disable typescript checking Typescript checking can be disabled until the project is updated to React 16. Remove or comment out these lines of code: ```javascript 30 const verifyTypeScriptSetup = require('./utils/verifyTypeScriptSetup'); 31 verifyTypeScriptSetup(); ``` #### `script/utils/createJestConfig.js` Modify the `config` object in this file as follows: ##### Ignore transform Replace the `transformIgnorePatterns` key: ```json transformIgnorePatterns: [ "/node_modules/(?!@)", "/src/node_modules/(?!@)" ], ``` ##### moduleNameMapper Add the third key to `moduleNameMapper`: ```javascript moduleNameMapper: { '^react-native$': 'react-native-web', '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy', "\\.(css|less|scss|sass)$": "identity-obj-proxy" }, ``` ##### Ignore files Add the following object to `config`: ```json testPathIgnorePatterns: [ "[/\\\\](build|docs|node_modules|scripts)[/\\\\]", "/src/lib/models", "/src/lib/vspk", "/src/lib/vis-graphs", "/src/lib/test-utils", "/src/lib/service", ], ``` ## Built with This package includes scripts and configuration used by [Create React App](https://github.com/facebook/create-react-app).
Please refer to its documentation: - [Getting Started](https://github.com/facebook/create-react-app/blob/master/README.md#getting-started) – How to create a new app. - [User Guide](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App. - [`react-scripts`](https://github.com/facebook/create-react-app/tree/v2.1.1/packages/react-scripts) – Original source code used at **v2.1.1**. ## Versioning This library follows the same versioning as facebook's `react-scripts` package. At the time of writing this, `react-scripts` version was [2.1.1](https://github.com/facebook/create-react-app/tree/v2.1.1/packages/react-scripts), which is the original source used. ## License This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details --- _Source: https://npm.io/package/@niveditn/react-scripts · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._