While dealing with a very immature team, I want the react-typescript build to fail when ESLint gives warnings.
src/modules/security/components/ForgotPasswordBox/index.tsx
Line 8:18: 'FormikHelpers' is defined but never used #typescript-eslint/no-unused-vars
src/modules/security/components/OTPVerificationBox/modalverficationcode.tsx
Line 54:18: Expected '!==' and instead saw '!=' eqeqeq
Line 63:29: Expected '===' and instead saw '==' eqeqeq
But on the net I only find the reverse where people would want to turn off warnings or build to continue even with warnings which is the exact opposite of what I'm looking for.
I do not use build pipeline or any such thing. We have a react -typescript app with NPM as package manager.
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint . --max-warnings=0"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
kindly let me know how can I achieve this behavior?. Please note that typescript compiler settings strict is already set to true.
Instead of having your build script fail, you can either update your CI to run npm run lint && npm run build or create a new script to use in your CI (e.g. "production": "npm run lint && npm run build").
This way the CI build will fail on the lint script before even starting the build script. This exposes the logic, instead of hiding it within the build script.
In the future you could consider running these in parallel and cause either one failing to fail the CI build and/or require a passing GitHub status check (based on success/fail of each script).
Related
I want to try the serve package with a React App by doing the following step:
npm install serve --s
then replace the npm start command in package.json like this:
scripts": {
"start": "serve -s build",
"build": "react-scripts build",
"test": "react-scripts test",
...
},
and then I run npm start i got the error in the console "Uncaught SyntaxError: Unexpected token '<'" etc
however if I uninstall serve --s and put back the package.json like this :
scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
...
},
and then run npm start again it work fine on my local machine, so i think i am doing something wrong in the process and i would like to know why I have issue with the serve package.
Looks like you haven't built your /build folder with app bundle. It must be like this:
npm start - to run and edit code
npm run build - to build a bundle(creates/rebuild a /build folder)
serve -s build - serve/start the /build folder
I am new to tailwind I have a simple react shopping cart project with basic CSS and I want to convert it with Tailwind.
I have install tailwind using the tutorial below.
https://www.youtube.com/watch?v=v6Sy6VP2yOc
But I am stuck when in tutorial he use npm run build:css command.
Video Time lap -- https://youtu.be/v6Sy6VP2yOc?t=286
In tutorial it compile successfully but on my side it did not.
Can anybody tell me why?
Can you please check the below code? Hope it will work for you. You can try this way, it might be helpful for you.
"scripts": {
"start": "react-scripts start",
"build": "npm run build:css && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"build:css": "postcss src/your-path -o src/your-path",
}
After that, you need to restart your project using the below command so that this will build your tailwind file automatically.
npm start
How to run jest in create react app before commit? I have found couple articles but they are too complicated , without explaining what to do step by step. Could you please explain me how to make it work
You need to use husky package. Here is basic configuration (put it in package.json). It adds pre-commit hook to your git configuration.
"husky": {
"hooks": {
"pre-commit": "CI=true npm run test",
}
}
You can also consider using lint-staged to lint files which you commit. You can see full configuration here.
Maybe you can utilise some npm packages for this.
So, this is not a direct solution but you can include as many things you want instead of using git commands, shells and yml files
Install package Pre-Commit and install git-cz from npm. Using these you can make use of pre-commit and commit in package.json and desired things to them.
Now you can make use of these packages in your packages.json like below
{
"start": "node index.js",
"pre-commit": "lint-staged",
"commit": "git-cz",
"lint": "eslint . --ext .js,.jsx",
}
For example you want to run test cases then pre-commit: npm run test && lint-staged
Because in our project we needed to update documents, checking style-lint, eslint and test cases, so we were using these combination.
But you should not commit directly using git commit -m "message" but with npm run commit.
Hope, this helps.
To do locally you can just write a script which first runs the tests and pipes the exit code and decides whether to really push or not based on the exit code.
By default npm test runs in interactive mode
To exit after running the tests use CI=true
i.e. CI=true npm test
This worked for me:
npm install --save-dev pre-commit
https://www.npmjs.com/package/pre-commit
Then, in package.json:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "CI=true react-scripts test", //<-- update
"eject": "react-scripts eject",
}
Adding CI=true runs all tests without making it interactive
Finally,
"devDependencies": {
"pre-commit": "test"
}
I'm developing project in ASP.NET Core and React. In testing, I came across one big security issue. Source files of react get expose in google developer tools. I have tried to remove webpack source maps but that thing didn't work for me and the reason is they have not mentioned in which webpack folder do we need to make change as there are 6 folder containing webpack. I'm new to this stack and not getting how to deal with this flaw. How can I fix this issue?
Its very easy and its possible to hide complete source code which gets expose to end user in developer tools. You need to update package.json file from ClientApp folder.
Before updation
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build", //UPDATE THIS LINE
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
You need to use following code instead of above code:
After updation
"scripts": {
"start": "react-scripts start",
"build": "rimraf ./build && react-scripts build && rimraf ./build/**/*.map",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
Above code worked for me. This thread helped me in achieving my goal. For more details you can check that as well.
I had the same issue. This is how I fixed it.
Create a file called .env in the src folder then add this code GENERATE_SOURCEMAP=false. Then run npm run build or yarn run build. This solved the issue for me
You can never hide your code on the browser. The best you can do is obfuscate your code. Here is a very useful video that explains your concern: https://www.youtube.com/watch?v=hOtZhNb4TKg
Also, use this as your reference: https://reactjs.org/docs/optimizing-performance.html#use-the-production-build
The crux of the above video is to keep your business logic and secrets on the server which is always secure.
if you are using craco to build your project, use this
"scripts": {
"start": "craco start",
"build": "rimraf ./build && craco build && rimraf ./build/**/*.map",
}
Hope this helps
I'm working on a React.js project using node. I usually run the unit tests with npm test to make sure all of them pass, then I create an optimized build using npm run build. The optimized build is minimized and bundled.
Because it's a React.js project, the package.json uses the react-scripts under the hood:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"lint": "standard"
},
I'm wondering if it is possible to run the tests on the optimized build, so when I give this build to a user, the user can also run the tests to make sure everything works on his/her environment.
I'm using an earlier version of node (v8.11.4) and npm (5.6.0).