We Keep Coding

How to extend react-scripts linter to include directories outside of src/?

When running react-scripts start eslint will run, but only lints files in the src/ directory. Files outside of src can be linted manually of course, but it is better if the lint warnings generated from the backend are displayed with those coming from the frontend code. My directory structure looks like this
root
amplify/
backend/
src/
Components/
.eslintrc
package.json
Similar questions asked here have not fixed this problem.
I have tried adding the following object to .eslintrc:
"overrides": [
{
"files": ["amplify/**/*.js"],
"rules": {
"react/prop-types": 0,
"react/no-unescaped-entities": 0,
"prefer-const": "error",
"no-await-in-loop": "warn"
}
}
]
But that didn't work. How can I ensure that the lint warnings from amplify are displayed?

How to explicitly share files part of a NPM package? [duplicate]

I would like to publish a npm package that contains my source as well as distribution files. My GitHub repository contains src folder which contains JavaScript source files. The build process generates dist folder that contains the distribution files. Of course, the dist folder is not checked into the GitHub repository.
How do I publish a npm package in a way that when someone does npm install, they get src as well as dist folder? Currently when I run npm publish from my Git repository, it results in only the src folder being published.
My package.json file looks like this:
{
"name": "join-js",
"version": "0.0.1",
"homepage": "https://github.com/archfirst/joinjs",
"repository": {
"type": "git",
"url": "https://github.com/archfirst/joinjs.git"
},
"main": "dist/index.js",
"scripts": {
"test": "gulp",
"build": "gulp build",
"prepublish": "npm run build"
},
"dependencies": {
...
},
"devDependencies": {
...
}
}

When you npm publish, if you don't have an .npmignore file, npm will use your .gitignore file (in your case you excluded the dist folder).
To solve your problem, create a .npmignore file based on your .gitignore file, without ignoring the dist folder.
Source: Keeping files out of your Package

Take a look at the "files" field of package.json file:
package.json, files
From the documentation:
The "files" field is an array of files to include in your project. If you name a folder in the array, then it will also include the files inside that folder. (Unless they would be ignored by another rule.)

Minimal example of how to use data files from a script
Another common use case is to have data files that your scripts need to use.
This can be done easily by using the techniques mentioned at: How can I get the path of a module I have loaded via require that is *not* mine (i.e. in some node_module)
The full example can be found at:
Source: cirosantilli/linux-kernel-module-cheat/npm/data-files/
Published: cirosantilli-data-files
With this setup, the file mydata.txt gets put into node_modules/cirosantilli-data-files/mydata.txt after installation, because we added it to our files: entry of package.json.
Our function myfunc can then find that file and use its contents by using require.resolve. It also just works on the executable ./cirosantilli-data-files of course.
package.json
{
"bin": {
"cirosantilli-data-files": "cirosantilli-data-files"
},
"license": "MIT",
"files": [
"cirosantilli-data-files",
"mydata.txt",
"index.js"
],
"name": "cirosantilli-data-files",
"repository": "cirosantilli/linux-kernel-module-cheat",
"version": "0.1.0"
}
mydata.txt
hello world
index.js
const fs = require('fs');
const path = require('path');
function myfunc() {
const package_path = path.dirname(require.resolve(
path.join('cirosantilli-data-files', 'package.json')));
return fs.readFileSync(path.join(package_path, 'mydata.txt'), 'utf-8');
}
exports.myfunc = myfunc;
cirosantilli-data-files
#!/usr/bin/env node
const cirosantilli_data_files = require('cirosantilli-data-files');
console.log(cirosantilli_data_files.myfunc());
The is-installed-globally package is then useful if you want to generate relative paths to the distributed files depending if they are installed locally or globally: How to tell if an npm package was installed globally or locally

just don't mention src and dist inside the .npmignore file to get the scr and dist inside the node_modules ... that's it
Another point is if there is a .gitignore file, and .npmignore is missing, .gitignore's contents will be used instead.

Angular Doesn't Recognize karma.conf.js

In a commercial project, tests have been running fine for some time. We cut a release in Angular 8. On master, we upgrade to Angular 9. Now the release needs a hotfix, so I check the branch out and run tests. This is all in the same repo / file system directory.
It fails like Angular core has no exported member ɵɵFactoryDef and I quickly determine that the error is due to CLI version incompatibility.
So I uninstall ng CLI globally and reinstall npm i -g #angular/cli#8.2.0, in line with the release branch package.json. Now the above error is gone, but when I try to ng test the CLI insists that karma.conf doesn't exist. The only issue is that, like, it totally does exist.
Other things I have tried:
rm -rf and npm i from scratch
npm cache verify
close and re-open terminals
restart computer
create a new karma.conf with a different name and point angular.json to that
ng cli does respect angular.json in that the below error will change depending on my karma file name and path, but it still continues to insist, on MacOS, that the below file doesn't exist:
On Mac, I still get:
ERROR [config]: File /Users/<various paths that totally exist>/src/karma.<tried different things here>.js does not exist!
Any ideas? Thanks!!
--- Edit: adding some technical info below per request.
test block from angular.json:
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"codeCoverage": true,
"karmaConfig": "src/karma.conf.js",
"scripts": ["node_modules/jquery/dist/jquery.js", "node_modules/jquery-mockjax/dist/jquery.mockjax.js"],
"assets": [
"src/favicon.ico",
{
"glob": "**/*.html",
"input": "./src/legacy",
"output": "./"
}
]
}
}
Partial client folder structure. Notice that storybook/ and test/ are siblings of src/, and angular.json is one level above `src/. I have already tried some karma path mutations including:
"karmaConfig": "./src/karma.conf.js",
"karmaConfig": "../../<correct folders>src/karma.conf.js",
"karmaConfig": "src/karma.<change this>.js",

You might have gone through this check already but have you tried updating your package.json to have the path of karma.conf like so...?
"scripts": {
"test": "karma start ./path_to_karma.conf.js"
}

This ended up solving it for me, after steps mentioned in the question:
Delete the entire repo
Re-clone (actually, I did a shallow clone git clone <repo-url>.git --branch <ng8-branch> --depth 5
Install again npm i
Now ng test works as expected.

Run Jest tests only for current folder

I have Jest installed on my machine and typing jest from terminal results in tests from parent folers also getting executed. I want to run tests only from the current folder.
For e.g. if I go to c:/dev/app in terminal and type some-jest-command, it should only run files with .test.js present in the app folder. Currently, running jest command from app folder runs tests in parent folders too, which is not my desired behaviour.

By default, Jest will try to recursively test everything from whatever folder package.json is located.
Let's say you're in c:/dev/app, and your package.json is in c:. If your basic command to invoke Jest is npm test, then try with run npm test dev/app.

If you want to run the tests from a specific folder user the --testPathPattern jest flag. When setting up the npm script add the path to the folder as well. In your package.json add the flag in you npm scripts. Check the bellow code for an example.
"scripts": {
....
"test:unit": "jest --testPathPattern=src/js/tests/unit-tests",
"test:integration": "jest --testPathPattern=src/js/tests/integration"
....
},
If you want to watch as well for changes, use the watch flag:
{
...
"test:unit": "jest --watch --testPathPattern=src/js/tests/unit-tests",
...
}
After that open, the command line, change the directory where your project is and run the unit test.
npm run test:unit
or integration tests.
npm run test:integration

To only run testing in a specific directory and to coerce Jest to read only certain type of files(my example: 'ExampleComponent.test.js' with new Jest version #24.9.0 you must write exact "testMatch" in jest.config.json || package.json in "jest" part next "testMatch": [ "<rootDir>/src/__tests__/**/*.test.js" ],
This testMatch in my case hits all files with the prefix .test.js in tests/subdirectories/ and skips all other files like 'setupTest.js' and other .js files in 'mocks' subdirectory which is placed inside of 'tests' directory,so,my 'jest.config.json' looks like this
{
"setupFiles": [
"raf/polyfill",
"<rootDir>/setupTests.js"
],
"snapshotSerializers": [
"enzyme-to-json/serializer"
],
"moduleNameMapper": {
"^.+\\.(css|less|scss|sass)$": "identity-obj-proxy"
},
"testMatch": [
"<rootDir>/src/__tests__/**/*.test.js"
]
}
Just adapt to your needs 'testMatch' regex.
A little note: This is for jest#24.9.0 && enzyme#3.10.0 if it matters to anyone.
I hope it will be useful to someone, cheers all.

--package.json
"scripts": {
"test": "jest"
}
--jest.config.js
module.exports = {
"testMatch": [
"<rootDir>/tests/unit/*.test.js"
]
}

From the root of your project, you can run jest <substring of files> and it will only run the test files which have the substring you added.
$ jest /libs/components
> [PASS] /libs/components/button.tsx

yarn:
yarn test nameoffolder
npm:
npm test nameoffolder
For example, if you have a folder named widget and you only want to run the tests in the widget folder you would run this command.
yarn:
yarn test widget
npm:
npm test widget

How to expose package.json in angular app

I'm running my app with ng serve and am wondering if there is a way to fetch the package.json file inside my app.
My initial idea was to copy package.json to the folder ./dist and read it from there but this seems to not be an option when using ng serve, which works in-memory and doesn't use the dist folder.
Is there a way to get the file when using ng serve or alternatively to make ng serve use the dist older instead of running in in-memory mode?
I am using Angular 4 and angular CLI version 1.3.2 (together with npm 4.3.0).
Thanks!

What build mechanism are you using? If you're in something like webpack, with the appropriate loader you can do
import package from '../package.json'; //es6, or
var package = require('../package.json'); //commonJS
console.log( package.version );
This will bundle up the package.json file as part of your build step. This can also be done using Browserify (but you'll probably need a transform).

I was able to solve it by setting the glob property in the project assets configuration inside .angular-cli.json
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico",
{ "glob": "package.json", "input": "../", "output": "./assets/" }
],
}
The solution allows the file to be available from the outside therefore making GET requests possible.