How to start http-server locally - npm

I cloned angular seed which is using node http-server and it is working perfectly using following configuration.
Command : npm start (from root of project)
Following configuration in package.json file:
"start": "http-server -a localhost -p 8000 -c-1",
Link to file
However I'm unable to start this server directly. eg: from root of the project, none of these commands work:
> angular-seed npm http-server
> angular-seed node http-server
> angular-seed http-server
Shouldn't this(http-server) be available here(root, where it got installed from)? Could someone please explain me how it is working and how I can use it directly from root of the project.
I'm sure it will work fine if I install it globally but I'm not interested in that.

When you're running npm install in the project's root, it installs all of the npm dependencies into the project's node_modules directory.
If you take a look at the project's node_modules directory, you should see a directory called http-server, which holds the http-server package, and a .bin folder, which holds the executable binaries from the installed dependencies. The .bin directory should have the http-server binary (or a link to it).
So in your case, you should be able to start the http-server by running the following from your project's root directory (instead of npm start):
./node_modules/.bin/http-server -a localhost -p 8000 -c-1
This should have the same effect as running npm start.
If you're running a Bash shell, you can simplify this by adding the ./node_modules/.bin folder to your $PATH environment variable:
export PATH=./node_modules/.bin:$PATH
This will put this folder on your path, and you should be able to simply run
http-server -a localhost -p 8000 -c-1

To start server locally paste the below code in package.json and run npm start
in command line.
"scripts": {
"start": "http-server -c-1 -p 8081"
},

Related

VueJS change links of script files in index.html

I created a simple app with VueJS and run it on a plattform.
Unfortunately the JS files can not be found.
The index.html searches here:
http://homepage.de:8080/static/js/app.b22ce679862c47a75225.js
But the files are here:
http://homepage.de:8080/app_direct/vue/static/js/app.b22ce679862c47a75225.js
Is there a way to change some parameters in a file to link to the correct source?
I used this old way to create my vue app if it matters (I do not have a vue-config.js).
$ npm install -g vue-cli
$ vue init webpack my-project
I then dockerize it with this Dockerfile:
FROM node:lts-alpine
# install simple http server for serving static content
RUN npm install -g http-server
# make the 'app' folder the current working directory
WORKDIR /app
# copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./
# install project dependencies
RUN npm install
# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY . .
# build app for production with minification
RUN npm run build
EXPOSE 8080
CMD [ "http-server", "dist" ]

Where can I find a list of all npm flags / tags / options?

I am looking for the meaning of the flag --u as in "npm run test --u" but I don't know where all the flags are documented.
Here are the bottom are some shorthands, but besides "gangster" and other cool ones, I couldn't find --u
https://github.com/npm/npmconf/blob/master/config-defs.js#L405
"npm run test --u" ("--u") belongs to jest flag --updateSnapshot. If you run npm run test help or npm test help you will get all the flags of jest.
Inorder to get npm flags list or npm commands you can run this command npm -l
Here are the list of other npm flags that you might need:
-u or --update: Updates the packages installed in you current working directory
-g or --global: Installs the package globally rather than in your local working directory.
-v or --version: Displays the version of npm.
-h or --help: Displays help information for the npm command.
-l or --long: Shows extended information for the installed packages.
-j or --json: Outputs the npm registry data in json format.
-S or --save: Saves the package as a dependency in your package.json file. As of npm version 5, you might not need this anymore as packages will be saved by default into the package.json file
-D or --save-dev: Saves the package as a dev-dependency in the package.json file.
-O or --save-optional: Saves the package as an optional dependency in the package.json file.
-E or --save-exact: Saves the package at the exact version specified in the package.json file.
-P or --save-prod: Saves the package as a production dependency in the package.json file.
-B or --save-bundle: Saves the package as a bundled dependency in the package.json file.

Problem with installing and running aws-amplify cli and global npm packages in general

I'm trying to install the aws amplify cli on my Mac. It seems to install ok, but when i run it afterwards is responds with
bash: amplify: command not found
I was thinking that it probably had something to do with the directory of the global npm packages, so i ran
$ npm -g root
Which returned:
/usr/local/lib/node_modules/node/lib/node_modules
It seems very odd that my node_modules are placed inside another node modules folder.
When i run:
$ which npm
it returns:
/usr/local/bin/npm
I also tried listing my global packages with the command
$ npm list -g --depth=0
Which returned:
/usr/local/lib/node_modules/node/lib
├── #angular/cli#7.3.1
├── #aws-amplify/cli#1.5.1
├── ng#0.0.0
├── npm#6.9.0
├── npm-check#5.9.0
├── tsc#1.20150623.0
├── typeorm#0.2.16
└── typescript#3.2.2
Can somebody please help me sort this mess out?
I ran into the same issue following the AWS Tutorial for deploying a React App: https://aws.amazon.com/getting-started/hands-on/build-react-app-amplify-graphql/module-two/
I used the command below as stated in the tutorial to install the Amplify CLI:
npm install -g #aws-amplify/cli
The packages installed successfully but after moving to the next step of the tutorial I got the same error:
amplify: command not found
The issue was the package was being installed outside my path and could not be found. However running the curl command below added the necessary line to my zshrc file and configured my $Path correctly.
curl -sL https://aws-amplify.github.io/amplify-cli/install | bash && $SHELL
(https://docs.amplify.aws/cli/start/install)
This is the result of running the curl command above
The line below was automatically added to my .zshrc file:
# Added by Amplify CLI binary installer
export PATH="$HOME/.amplify/bin:$PATH"
In case if someone is installing amplify using curl on Mac, then you need to edit your .zprofile (if you are using zsh terminal) or .bash_profile.
Open your terminal
1. cd
2. vim .zprofile
3. Press i, then paste this line
export PATH="$HOME/.amplify/bin:$PATH"
4. Press Esc and :wq to save this file
5. Restart your terminal

How to run the official vue.js examples?

I git cloned vue, cd'ed into one of the examples folder and ran npm install. Everything went fine, then I ran npm run dev and it gets stuck at this stage. Is there anything else I should do to run this locally?
npm run dev
> vue#2.4.2 dev /vue
> rollup -w -c build/config.js --environment TARGET:web-full-dev
bundling...
bundled in 2456ms. Watching for changes...
You need to run a local web server.
Try this:
Install http-server package with npm:
$ sudo npm install -g http-server
Run it in the root of the vue cloned folder:
$ git clone git#github.com:vuejs/vue.git
$ cd vue
$ http-server -o -c .
In yout browser, navigate to the examples folder, for instance:
http://127.0.0.1:8081/examples/select2/
They are the same from here:
https://v2.vuejs.org/v2/examples/

Webpack command not found

I have installed webpack using
npm install -g webpack
and
npm install webpack
I also installed webpack-dev-server
npm install -g webpack-dev-server
After completion of installation, I ran the command webpack but, it shows below error
webpack: command not found
I am not getting what is the error.
Your webpack exists in ./node_modules/.bin/ folder . So you should execute this command :
./node_modules/.bin/webpack
Check out the answer in this thread .
webpack command not working
As a good practice is recommended to install webpack and webpack-dev-server locally, more info here.
yarn add webpack webpack-dev-server --dev
# or
npm install webpack webpack-dev-server --save-dev
Then you can add these lines to your scripts section in your package.json file.
"scripts": {
"build": "webpack --progress --colors",
"start": "webpack-dev-server --progress --colors"
}
and finally
npm start
npm run build
Note: You need to have a webpack.config.js in the root folder to make it run correctly.
I needed to manually install:
npm install --save-dev webpack-cli
I guess its needed so that Angular CLI actually understands the commands related to Webpack.
In ubuntu u can try sudo apt install webpack
If you want to use global installation, you can find webpack script in [node_installed_path]/lib/node_modules/webpack/bin/, you can use with absolute path, adding to PATH environment variable, or symbolic link, etc.
If you want to use local installation, find it in ./node_modules/.bin/.
I recommand using local installation (for same reason about babel).
You need to be in proper folder to run webpack command.
What I mean by proper folder is folder in which you placed your installed module and module's package.json file.
Cause you installed it with -g parameter it is installed globally and you should find it in: ./node_modules/.bin/webpack.
Best practice is to install modules per project ( folder in which is project) not globally.
webpack -v: webpack command not found
node -v: v16.14.2
npm -v: 8.5.0
Tried to install webpack globally or locally and a lot of other ways to fix this issue but failed, below solution fixed my case (my case is a little bit special, I reset the prefix as below)
npm config set prefix "C:\Program Files\nodejs\npm_modules"
Solution: add the folder path xxx/npm_modules/ which included webpack.cmd to the System variable Path
How to find the folder path xxx/npm_modules/ which included webpack.cmd?
npm config ls
webpack.cmd in folder npm_modules, you will need this path to be added to System variable Path