I installed html5-boilerplate and the lite-server modules using npm install html5-boilerplate --save-dev and npm install lite-server --save-dev respectively.
I had to copy index.html from the node_modules folder in order to serve up the content using npm start. All I see is the <p> tag being rendered as shown in this image.
This is how my working directory looks like.
Directory of D:\Full_Stack_Web_Development
27-02-2019 09:58 <DIR> .
27-02-2019 09:58 <DIR> ..
27-02-2019 10:05 1,871 index.html
27-02-2019 09:55 <DIR> node_modules
27-02-2019 09:55 125,319 package-lock.json
27-02-2019 09:57 739 package.json
3 File(s) 127,929 bytes
3 Dir(s) 213,613,010,944 bytes free
D:\Full_Stack_Web_Development>
and this is how my package.json file looks like. index.html can be viewed here
{
"name": "full_stack_web_development",
"version": "1.0.0",
"description": "beginning front end development using html5 boilerplate",
"main": "index.html",
"scripts": {
"start": "npm run lite",
"test": "echo \"Error: no test specified\" && exit 1",
"lite": "lite-server"
},
"repository": {
"type": "git",
"url": "git+https://github.com/alokananda-y/Full_Stack_Web_Development.git"
},
"author": "alokananda y",
"license": "ISC",
"bugs": {
"url": "https://github.com/alokananda-y/Full_Stack_Web_Development/issues"
},
"homepage": "https://github.com/alokananda-y/Full_Stack_Web_Development#readme",
"devDependencies": {
"html5-boilerplate": "^7.0.1",
"lite-server": "^2.4.0"
}
}
H5BP is pretty flexible, so there are a few ways to do what you want to do. You can:
Copy the entire contents of node_modules/html5-boilerplateup to the root level of your folder, not just the index.html. The basic folder structure you're aiming for is what we have in our dist folder.
You can change all of the links in the index.html to point to the h5bp resources in node_modules/html5-boilerplateSo, instead of <link rel="stylesheet" href="css/main.css"> you would do <link rel="stylesheet" href="node_modules/html5-boilerplate/css/main.css">
The easiest is actually to download the latest version, unzip the folder and then run npm install --save-dev lite-serverinside that folder. That way the only dependency would be lite-server and h5bp would be ready to go. This is what I would do. We offer the project via npm but it's not really a dependency in the way that other packages are it's the starting point for a whole site or application.
Related
Following folder structure and files are given:
.
├── package.json
└── scripts
├── hello-word.js
└── package.json
// package.json
{
"name": "yarn-bin",
"version": "1.0.0",
"private": true,
"license": "ISC",
"workspaces": [
"scripts"
]
}
// scripts/package.json
{
"name": "#yarn-bin/scripts",
"version": "1.0.0",
"license": "ISC",
"bin": {
"hello-world": "./hello-world.js"
}
}
// scripts/hello-world.js
#!/usr/bin/env -S npx node
console.log("Hello World")
This is a very simple yarn workspace setup where an executable is specified in a workspace package ("bin" in scripts/package.json).
Executing ./hello-world.js works just fine (with prior chmod +x hello-world.js).
Question
Is it possible to install this executable in the workspace itself?
(To break it down: I would like to execute the script from anywhere in the workspace e.g. with npx hello-world)
Like I said in the comments what you got here is almost complete.
You did have a typo in your file name but I assume that's a typo that happened while you copied this over to SO.
I did change the hash bang to make sure you run this via node.
You cannot run this via npx as npx will go online and look through the registry.
.
├── package.json
└── scripts
├── hello-world.js # not "hello-word.js"
└── package.json
Root package.json:
{
"name": "yarn-bin",
"version": "1.0.0",
"private": true,
"license": "ISC",
"scripts": {
"hello": "yarn hello-world"
},
"workspaces": [
"scripts"
]
}
scripts/package.json
{
"name": "#yarn-bin/scripts",
"version": "1.0.0",
"license": "ISC",
"bin": {
"hello-world": "./hello-world.js"
}
}
And script/hello-world.js
#!/usr/bin/env node
console.log("Hello World")
With that setup running yarn hello in the root folder will yield:
$ yarn hello
yarn run v1.22.10
$ yarn hello-world
$ /path/to/folder/node_modules/.bin/hello-world
Hello World
✨ Done in 0.25s.
While I added an npm script into the root package.json you can also execute bins via just running yarn hello-world anywhere from within your project.
When running npm install, when will it produce a package-lock.json file and when will it not?
This is the version of npm that I am using:
$ npm --version
3.10.10
And this a simple package.josn that I am testing with:
$ cat package.json
{
"name": "invoices_svc",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node index.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.16.2"
},
"repository": {
"type": "git",
"url": "git#.../TotalInvoiceDemoApp.git"
},
"description": "..."
}
For some reason, I don't see a package-lock.json that is created after running npm install.
I also tried building a docker image with this, where I notice the warning:
npm notice created a lockfile as package-lock.json. You should commit this file.
...
Step 4/7 : RUN npm install
---> Running in f4c48bbcc52a
npm notice created a lockfile as package-lock.json. You should commit this file.
...
There may be some obvious configuration that I missed in my local dev environment? Why it won't produce the lock file locally?
lock-file was introduced in npm version 5.0.0, you need to update npm to generate lock files
All our server projects contain a git submodule folder (let's say modules), which contains our custom modules/components.
Such module dependencies are installed locally (see serverApp/package.json) so that we don't have to include the whole submodule folder to the final rpm. What I'm having trouble with is limiting the number of files included in node_modules.
The submodule structure looks like the following:
modules
|--loader
|--dist => compiled js files here that are created when installing the module
|--ts => contains typescript files that shouldn't be included in node_modules
|--package.json
|--tsconfig.json
|--more modules
|--.gitignore
Adding an .npmignore file inside modules/loader doesn't seem to help as the whole folder is copied.
modules/loader/tsconfig.json:
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"declaration": true,
"outDir": "./dist",
"strict": true
}
}
modules/loader/package.json:
{
"name": "loader",
"version": "1.2.0",
"private": true,
"description": "",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"scripts": {
"preinstall": "npm run build",
"build": "../../node_modules/typescript/bin/tsc",
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"#types/lodash": "^3.9.3",
"#types/nomnom": "0.0.28",
"#types/yamljs": "^0.2.30",
"lodash": "^3.9.3",
"nomnom": "^1.8.1",
"yamljs": "^0.2.1"
},
"devDependencies": {
"typescript": "~2.3.4"
}
}
serverApp/package.json:
{
"name": "my-server-app",
"version": "2.3.0",
"description": "",
"main": "myServerApp.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"license": "private",
"dependencies": {
"loader": "file:modules/loader"
},
"devDependencies": {
"grunt": "^0.4.5",
"grunt-cli": "^0.1.13"
}
}
I'm not sure if it has to do with the fact that we have a .gitignore file or because the module is not published and installed locally.
npm version => 5.3.0
EDIT
Doesn't work with specifying the "files" in modules/loader/package.json either
As after checkout the issue I found out below useful points which need to mention out :
We use a .npmignore file to keep stuff out of your package.
If there's no .npmignore file, but there is a .gitignore file, then npm will ignore the stuff matched by the .gitignore file.
If you want to include something that is excluded by your .gitignore file, you can create an empty .npmignore file to override it.
Like git, npm looks for .npmignore and .gitignore files in all subdirectories of your package, not only the root directory.
Similar to .gitignore file .npmignore also follow these rules
Blank lines or lines starting with # are ignored & Standard glob patterns work.
You can end patterns with a forward slash / to specify a directory.
You can negate a pattern by starting it with an exclamation point !.
By default, the following paths and files are ignored, so there's no need to add them to .npmignore explicitly
Additionally, everything in node_modules is ignored, except for bundled dependencies. npm automatically handles this for you, so don't bother adding node_modules to .npmignore.
Testing whether your .npmignore or files config works
If you want to double check that your package will include only the files you intend it to when published, you can run the npm pack command locally which will generate a tarball in the working directory, the same way it does for publishing.
And you can also checkout same issue here Consider methodologies for reducing the number of files within node_modules #14872
Thanks.
Did you checked with node 0.6.13 / npm 1.1.9? This issue is common in npm 1.1.4 .
have a look on this link
You mentioned that you do not want to include "whole submodule" into the "final rpm", by which I presume the package you will finally prepare. I reproduced similar setup and added a '.npmignore' to ignore "submodule" which I installed using npm install --save ./task_in where 'task_in' was my module kept along side of the main package's('task') 'package.json'.
And when the final package was prepared using npm pack while being in the 'task' folder, I got a package(a tar file) without the folder('task_in') as indicated in the '.npmignore'.
While working, though, I found that the module 'task_in' folder was copied to 'node_modules' which is automatically not included in the final package( refer here). Also, while the package is prepared, ".gitignore" is over-ridden by ".npmignore".
So, this is my "two cents" and I hope it helps you.
I am using npm precommit hook, but it is not stopping a file with issues to be committed, nor am I getting the message "Pre commit checks" when I try to commit a file.
Package Json:
{
"name": "myfolder",
"version": "1.0.0",
"description": "",
"main": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 0",
"precommit-msg": "echo 'Pre-commit checks...' && exit 0",
"lint": "csslint global/css"
},
"author": "SR",
"license": "ISC",
"dependencies": {
"csslint": "^1.0.4",
"jshint": "^2.9.4",
"pre-commit": "^1.2.2"
},
"pre-commit": [
"precommit-msg",
"lint"
],
"devDependencies": {
"pre-commit": "^1.2.2"
}
}
Please, make sure that your 'package.json' file is in the same folder, where '.git' folder is (where git repository was initialized). When you install 'pre-commit' package, 'pre-commit' file should appear under '.git/hooks/'.
Just FYI I had this issue because the pre-commit file was missing in the hooks folder.
Running npm i pre-commit --save-dev again created the file and solved it for me.
Have't managed to implement it with few "pre-commit" NPM modules (#fastify/pre-commit, monorepo-staged-precommit) so implemented it "manually" with adding tools/pre-commit.sh file into repo with content like:
#!/bin/sh
DIR='web'
echo "Pre-commit actions (NPM tests for $DIR)..."
cd $DIR && npm run test
and updating package.json with:
"scripts": {
"test",
"install-precommit": "cp ../tools/pre-commit.sh ../.git/hooks/pre-commit"
This solution has some limitations (like instead of automatic installation need to ask somewhere in "README" about npm run install-precommit and I'm not sure how it would work on Windows especially without Git Bash) but it worked for me.
Notes:
Other pre-commit NPM packages either didn't work as well or asked for NVM and other extra tools which I don't want devs to install for such small task.
pre-commit.sh may has any name and don't be executable - "install-precommit" task and git care about.
I'm a big fan of bower. I don't need to put a stack of packages in my repository, I just commit bower.json each time and I'm done.
So my question really is, can I make npm read from a json file in the same way that bower does?
npm has package.json. This file has dependencies and devDependencies parts. You can use this file similar to bower.json.
npm install
will install necessary dependencies to your project's node_modules directory.
See sample package.json below.
{
"name": "SampleMobileApp",
"version": "0.0.1",
"description": "Sample App",
"dependencies": {
"grunt": "~0.4.2",
},
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-jshint": "~0.8.0",
"grunt-open": "~0.2.3",
"grunt-contrib-copy": "~0.5.0",
"grunt-bowercopy": "~0.7.1",
"grunt-contrib-watch": "~0.5.3",
"grunt-phonegap": "~0.12.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"grunt",
"javascript"
],
"author": "Atilla Ozgur",
"license": "MIT",
}
dependencies are your runtime dependencies that your users need to download while devDependencies are your developer dependencies like your test runtime, grunt helper packages etc.