Develop Reference

How do I use NPM in my vanillaJS, html, css project?

I have a project that has 3 html files namely index.html, about.html and resource.html.
It has two css files, style.css and style1.css. It has two javascript files, script.js and script1.js. Index.html uses style.css and script.js. about.html uses style1.css and script1.js. resource.js also uses style1.css and script1.js. I wanted tried initializing a NPM project, but it asks for an entry point. What do I do?
I want to use webpack to bundle my project, and for that I need to use NPM. This project is fully vanilla.

Your question seems to be specifically related to the entrypoint question asked when you run npm init. The value you specify there will be set to th property main, in package.json.
That property specifies what file/module will be loaded when someone imports or requires you package. As it doesn't look like you are creating an npm package that will be imported and simply wants to use npm to install dependencies, you don't need to care about it. You can use the default value provided: index.js, even if it doesn't exist.
You can read about it here: https://docs.npmjs.com/cli/v9/configuring-npm/package-json#main

As it mentioned in the comments, you should download Node.js first.
Node js come with its package manager called npm.
In my opinion for your project, the webpack bundler could be confusing at first, so I think you should use Parcel instead.
Steps for your project:
step1
After you installed node with npm in your project directory folder run the following script in a terminal:
npm init -y
It will create a package.json file int the root directory of your project.
step2
run the following script in the terminal which will install parcel bundler
npm install --save-dev parcel
step3
in the package.json file you will find a line with"scripts".
add the following lines to it:
"scripts": {
"start": "parcel ./*.html",
"build": "parcel build ./*.html"
},
After you done it, you should just run the following script in your terminal, which will start a dev server on your local machine with automate reload on localhost:1234
npm run start
If you want to bundle your html project, then just run the following script:
npm run build
For better understanding how Parcel works, here is the tools documentation.
Hope it will helps!

The entry point is usually the JavaScript file that is responsible for loading and executing the rest of your code.
In your case, you can use any js script you use or create a main script to which you will attach all the necessary scripts. This will also be helpful when building applications with webpack.
{
"name": "your-project-name",
"version": "1.0.0",
"description": "Your project description",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Your Name",
"license": "MIT"
}
After specifying the entry point in your package.json file, you can then install and configure Webpack to bundle your project.

How can I serve an instrumented folder to run my Cypress tests against?

Viewing the instrumenting code section in the Cypress documentation: https://docs.cypress.io/guides/tooling/code-coverage.html they state that you can serve the instrumented folder. 'We can see the counters if we serve the instrumented folder instead of src and open the application.'
What is the best approach for serving this? My understanding is that instrumented code only contains files where instrumentation can be added such as .js, and many files such as .html will not included in the folder, how can I serve the application with instrumentation so that I can test against it using Cypress?

Instrumenting the code is dependent on the way you serve the app, but for plain javascript (not bundled) see this blog Code Coverage for End-to-end Tests
The cp command answers your question about how to handle non-js file. Essentially everything ends up (duplicated and instrumented) in build/src.
package.json
{
"scripts": {
"build": "npm run instrument && npm run cp",
"preinstrument": "npm run clean",
"instrument": "nyc instrument --compact false src build/src",
"cp": "cp src/*.css build/src && cp src/*.png build/src && cp index.html build",
"clean": "rm -rf build .nyc_output || true",
"report:coverage": "nyc report --reporter=html"
}
}

create-react-app is showing all my code in production, how to hide it?

In my chrome sources tab, I am able to view all my files by exact folder location. How can I hide them?
These weren't the problem in my previous project, which were made without using create-react-app.

It seems to be correct behaviour in create-react-app according to Issue #1632.
Gaeron:
This is expected. You can delete .map files from the build output if
you want to disable it, although you'll get console warnings about
them missing.
There is no harm in leaving them in though in my opinion. Client code
is already available to the user’s machine so there’s no secrets in
it.
Also ensure you have proper production build, the output of npm run build/yarn build is the one which should be deployed to your server.
If you want to completely disable generation of source maps use:
scripts: {
"build": "GENERATE_SOURCEMAP=false react-scripts build"
}
You can also specify GENERATE_SOURCEMAP=false parameter via .env configuration files or use in plain console command GENERATE_SOURCEMAP=false react-scripts build.

Make this change in package.json file and you are good to go.
scripts: {
"build": "GENERATE_SOURCEMAP=false react-scripts build"
}

Here are three ways to hide code.
1. Using .env File.
GENERATE_SOURCEMAP=false
2. Using command line.
GENERATE_SOURCEMAP=false react-scripts build
3. Using package.json
scripts: {
"build": "GENERATE_SOURCEMAP=false react-scripts build"
}

Or you can use GENERATE_SOURCEMAP=false react-scripts build on linux/mac

In in package.json (Windows)
"scripts": {
...
"cleanBuild": "rimraf ./build/*",
"build": "npm run cleanBuild && set \"GENERATE_SOURCEMAP=false\" && react-scripts build ",
...
}

Delete all the .map files (from js/ and css/ folder) before uploading to the production server

On a windows machine, this helped me
"build": "set 'GENERATE_SOURCEMAP=false' && react-scripts build",
Incase you are using react-app-rewired you can try the below.
I have used a package called as cross-env. It can inject your environment variables.
"build": "cross-env GENERATE_SOURCEMAP=false react-app-rewired build"

in package.json put the following code
scripts: {"build": "GENERATE_SOURCEMAP=false react-scripts build"}
More information follow this blog

I found a very simple solution that is:
npm run build nosources-source-map
For more information about differents ways: this is the link

you cant remove access to your code.
You can use https://obfuscator.io to give headhash to hacker or code leecher.

On Windows, using package.json:
scripts: { "build": "set 'GENERATE_SOURCEMAP=false' react-scripts build" }

For those who tried to add the variable and it still generates the map files:
It's important to be aware that
the build command for windows users should be this:
"build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build"
As said #Gangula at the comments.
If not - it can cause the the map files will be generated.
See here

Among below three methods, I prefer the last one because I don't want to worry about OS.
1 - Delete the map files and then deploy the build folder(not a professional way).
2 - Change the build command in the package.json as:
// For the Windows OS
"build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build"
// For Linux OS
"build": "GENERATE_SOURCEMAP=false react-scripts build"
3 - Create or update .env file by adding
GENERATE_SOURCEMAP=false

overriding package.json scripts - NPM

Is there a way to override package.json scripts? I can't change package.json because it will change it for everyone. i.e in our package we have
"script": {
"dev": "yarn dev:build"
}
I would like to add extra memory for this step as it keeps crashing on my computer. i.e
"scripts":{
"dev": "\"node --max-old-space-size=9000 yarn dev:build\""
}

You can't "override" package.json because the filename is hardcoded in NPM. You can create another script entry like:
"scripts":{
"dev": "yarn dev:build"
"devlocal": "\"node --max-old-space-size=9000 yarn dev:build\""
}
Exclude package.json while committing to whatever SCM you are using, and the modified file would remain local to your machine only.
Having said that, what you are asking for (having another file to do the work of package.json), is not possible.

It's not technically overriding a script, but you can execute what would be a script without actually adding it to package.json by calling npm exec in your terminal:
npm exec --max-old-space-size=9000 yarn dev:build

Using npm as a task runner/build tool - having problems with some cli modules

I'm trying to use npm as a task runner/build tool after reading this article:
How to use npm as a build tool
and while I'm having some success, I'm stuck on one thing. When running a command-line global tool like JSLINT, JSHINT, or ESLINT, npm will always show the Exit 1 code in the console window:
As you can see, the command works fine, but npm sees it as an error and displays the error log info. Is this normal and/or is there a way to turn it off for specific commands?
Additional info: this is script block in my package.json config:
"scripts": {
"start": "node ./src/server/index.js",
"test": "",
"lint": "eslint index.js"
}
then from npm cli I type:
npm run lint
This will execute the script found in the package.json file with the label: 'lint'

I use this:
"scripts": {
"start": "node ./src/server/index.js",
"lint": "eslint index.js || exit 0"
}
Regards!

Since there are validation errors, eslint exists with an Exit code 1, which makes npm believe that there was an error during it's execution.
If you're using linux, you can use this trick to always return an Exit code 0 :
"scripts": { "start": "node ./src/server/index.js", "test": "", "lint": "eslint index.js; true" }

NPM scripts are designed to work this way on purpose, so that an exit code of 1 or 2, (anything other than 0), will prevent post tasks from running, in the same way it would operate on your operating system.
Using the --silent flag is an option, but can become an issue where there are other problems with the script, and you will wind up banging your head against a wall when your builds start failing without any lint/test errors.
The best thing to do here... is to configure your process so that it doesn't output an error exit code in situations where you don't want it to. In this case... you have some errors popping up legitimately based on your eslint config. This will cause an error exit code, and (rightfully so) prevent the next task from running. This is actually very useful when you're using npm scripts, because you can prevent testing/build steps to be run unecessarily when you know there are errors.
So, in this case, you want to add an .eslintrc file to your project, and specify some rules that will both take care of the linting errors, as well as the npm errors.
I've posted a quick sample .eslintrc file below. When running eslint on the command line, it will automatically detect any .eslintrc or .eslintignore files, and abide by their configurations.
That sample below will clean up your linting erros, but keep in mind, it changes the exit code that would be thrown when eslint picks up that "trigger". When I change a rule to 0, it means that it won't alert you when it recognizes that pattern.
You can read more about utilizing and configuring rule codes, or... check out a seed project I have created that uses npm as a build tool, and includes eslint usage: react-flux-npm-automation
// /path/to/project/.eslintrc
{
"parser": "babel-eslint",
"env":{
"browser":true,
"node":true,
"es6":true
},
"rules": {
"strict":0,
"quotes":0,
"no-unused-vars":0
}
}

I've found a work-around for this problem. In the scripts block, I use the test script to call the npm command for lint with the --silent flag:
"scripts": {
"start": "node ./src/server/index.js",
"test": "npm run-script --silent lint",
"lint": "eslint index.js"}
Then on the command-line I can type:
npm run test
Now it's working without showing the error log.