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 to install a npm package from github requiring a build step, e.g. when forking a library?

Assume you use a library like vue3-datepicker. You realize you need to customize something, and as as first step you want to use a custom fork of it.
The issue is, there is a build step when the package is pushed to npm's registry since the project doesn't use plain JavaScript, but may have vue or typescript files.
In this case, that would be npm run build:component, though that depends on the project.
Just installing the fork from github via:
yarn add <GitHub user name>/<GitHub repository name>#<branch/commit/tag>
hence doesn't suffice as then the ./dist folder doesn't exist.
You'll get really strange errors like:
error: [plugin: vite:dep-scan] Failed to resolve entry for package "vue3-datepicker". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "vue3-datepicker". The package may have incorrect main/module/exports specified in its package.json.
As a quick and dirty solution, I removed in my fork the ./dist/ folder from the .gitignore, ran the npm i && npm run build:component in my fork, and pushed it.
Huge downside is, the ./dist/ folder is now part of that repository, after each change in my fork I also have to build the files again and push those as well.
I rather have the build process triggered in my application using my fork. Is there a way from my application to say:
When you install that library, you have to run a certain script once you downloaded all the files?
The solution should be usable for both npm and yarn, in the sense that the fork my be installed by either one in different applications.

A quote from npm-install Docs
If the package being installed contains a prepare script, its dependencies and devDependencies will be installed, and the prepare script will be run, before the package is packaged and installed.
so in your fork's package.json you can add
"scripts": {
// ...
"build:component": "rollup -c build/rollup.config.js",
"prepare": "yarn build:component || npm run build:component"
}

If you want to trigger builds after installation, you can use the postinstall or a build script in your package.json. In this script, you can create directories and do other setups, using shell commands or javascript programs:
{
"scripts": {
"build": "mkdir dist && npm run build:component",
"build:component": "some command"
}
}

Can I include bash/sh files as dependencies in package.json?

I have a bash script which I wrote for publishing modules to npm: publish.sh
As I still work on tweaking this script a lot, every time I change it, I need to make the changes in every copy of it in every npm module I am managing.
Is there a way to include this as a dependency in my package.json file so that I just need to run npm update; npm install in order to update it? Maybe the sh file would need to be executed by some wrapper javascript or something like that..?

"scripts": {
"start": "sh ./scripts/publish.sh",
...
}

If you need access to the script in a single project, you can put it in the "scripts" object in package.json.
"scripts": {
"publish": "/bin/sh publish.sh"
}
The above can be run with npm run publish. See npm run-script docs for more information.
If you literally want to add the shell script as a dependency that can be installed (from the public registry or a private registry) with npm install, you can absolutely do that. Lots of not-JavaScript executable things are available in the npm repository. You'll want to create a package.json for the dependency and specify the location of your shell script with the "bin" entry.
An example package you can look at if you get stuck is notes.sh. The source code is on GitHub. Look at the package.json to see how they specified the scripts to run in the "bin" entry. You'll still need to create a "script" entry in your other project to run the installed shell script (or you can run it as an npm hook) though, unless you're running it manually or spawning a child process in your code or something.

how to use webpack on a website project and app

One part of my project (call it an app) is using react which utilizes webpack. Now, I'd like to use webpack on other parts of the site which do not use react. I tried to install webpack in the root folder of the project, but get the errorno -4048, code: 'EPERM' I suspect it has something to do with the fact that webpack is already installed. So, the question is if I can use webpack that is already installed to manage other parts of the site? If yes, I assume that I have to add some key-value pair such as "buildSite": "webpack src/js/site.js dist/bundle.js" Is this the way to go?

Sure you can. running webpack command from npm scripts will search webpack in node_modules.
Assuming you are referring to a Monorepository with server and app project you can have a webpack.config.js for each one of your projects. They can even share common configuration.
Given this folder structure:
root_folder:
-node_modules
-package.json
-src
--server_project
---server.index.js
---webpack.config.js
--app_project
---app.index.js
---webpack.config.js
You can define the correlating npm scripts in package.json:
"scripts": {
"build_server": "webpack ./src/server_project/webpack.config.js",
"build_app": "webpack ./src/app_project/webpack.config.js",
"build": "npm run build_server && npm run build_app"
}
And run:
npm run build

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