I have started to use angular with bower to manage some dependencies and gulp as a task runner. I asked a friend to clone and test my app today and he ran into some issues with setting up my app when it comes to installing dependencies.
I had him npm install and bower install but I was assuming that he had bower and gulp installed globally.
Do bower and gulp need to be installed locally and added to the package.json?
given the fact that if you install it via package.json, it puts the executable in ./node_modules/.bin/bower
so you cant type bower install.
What is the best way of handling this.
Thanks
Related
I'm going in circles with npx trying to start a new project. Here's what I get:
"PS C:\Users\John\Documents\WebSites\react_projects> npx create-react-app material-ui
Need to install the following packages:
create-react-app
Ok to proceed? (y) y
"You are running create-react-app 4.0.3, which is behind the latest release (5.0.0).
"We no longer support global installation of Create React App.
Please remove any global installs with one of the following commands:
npm uninstall -g create-react-app
yarn global remove create-react-app
The latest instructions for creating a new app can be found here:
https://create-react-app.dev/docs/getting-started/"
When I type npm uninstall -g create-react-app, I get "up to date, audited 1 package in 495ms. found 0 vulnerabilities."
So I try to create the app again with npx, and I get this:
"Need to install the following packages:
create-react-app
Ok to proceed? (y)"
So I press y, and I get the first error message again. I just go in circles. How can I fix this?
Refer to official reactjs website you need to have ""Node >= 14.0.0 and npm >= 5.6"" on your machine. https://reactjs.org/docs/create-a-new-react-app.html .
Also yarn create is available in Yarn 0.25+
so you might want to check these versions
npm
stands for node package manager. It helps to install, migrate apps by adding dependencies in package.json file. You only need to run npm i. For example in react API call npm i axios you should run and import in file in order to use axios features. Also all you need to have is package.json following dependencies and packages will be added(except node_modules folder as it comes with packages and more in size).
You can use npm to start, build, eject, watch and test.
npx is a CLI tool which provide way to install and manage dependencies hosted in npm registry. It is bundled with npm since 5.2.0v. It is helpful in installing and getting started with frontend JS libraries like reactjs, angularjs, vuejs, Sveltejs or boilerplate apps.
I want to install blur admin theme with angular js
I have follow steps to install blur admin theme from below site
https://akveo.github.io/blur-admin/articles/002-installation-guidelines/
I got the error as below ,
I find for solution for that and found below commands to run
npm update
npm install gulp-sass
then again run
gulp serve
but still same error I got
In my system git is installed and my nodejs version is 8.9.4
Please help me to resolve this issue.
Seems like you have not installed gulp-sass module.
Install it by running npm following command
npm install gulp-sass#latest --save-dev
Make sure you have deleted node_modules folder before install module.
I am generating a monolithic application with Jhipster with Oracle as the database with Yarn and generate-Jhipster. Below are the commands we executed and attached the package.json, bower.json, yo-rc.json and .bowercc files.
yarn add global bower
yarn add global gulp-cli
yarn add global generator-jhipster
jhipster (Throws exception while bower install as below)
Gulp (Throws the same above exception)
The bower_Components folder is not present as a result of the above without which the application is not working.
Bower requires git. https://bower.io/#install-bower
If you don’t want JHipster to initialize a git repository, use the -—skip-git flag when generating
This is my first time developing an AngularJS app and using the scaffolding tool Yeoman (http://yeoman.io/). I wanted to use fontawesome for some of my icons (http://fortawesome.github.io/Font-Awesome/) and I know I should use the command
bower install fontawesome
However, I also saw this article (https://www.npmjs.org/package/grunt-font-awesome-vars) that talks about npm grunt install command below
npm install grunt-font-awesome-vars --save-dev
What is the difference there? I'm still a little fuzzy on how the variety of tools work and flow together. Could any Yeoman experts give me a low down when to use bower install, npm install, and the grunt commands so I would know the differences clearly and understand the flow? Thanks.
Grunt is a task automation tool that does very little straight out of the box. It does most of its work through plugging in grunt modules that perform specific tasks.
grunt-font-awesome-vars is a module for grunt (useless without grunt)
bower is a package manager.
npm is a package manager.
(I don't use Yeoman. It's a scaffolding tool for setting up your project structure. I don't agree with its opinions on where things should go, so I don't fool with it. I configure grunt and bower manually)
Quick and dirty:
install node with npm.
Then from your console, (Developer Command Prompt for VS2013, Bash, or whatever you use)
run the following commands
npm install grunt --save
npm install bower --save
npm grunt-font-awesome-vars --save
bower doesn't need grunt. grunt doesn't need bower. grunt doesn't need grunt-font-awesome-vars but grunt-font-awesome-vars needs grunt.
With the way my work flows, I use npm to manage package dependencies that I want to automate with grunt. I use bower to manage the versions of my client dependencies.
More information:
There's a "Yo, Dawg" to describes bower that comes to mind when someone asks the difference between it and npm.
"Yo, Dawg. We heard you really like packages so we installed a
package manager inside your package manager."
Basically, bower is just another package manager. It is installed with npm (which is a separate package manager)
I use npm for managing tooling and server dependencies (like grunt, grunt modules, sass, etc...things I potentially want to be automated) and bower for functional, client specific dependencies (like angular, jquery, etc...things that I potentially want to keep up to date with current version)
Installing through bower will utilize your bower.json. Installing through npm will utilize your package.json.
npm install grunt-font-awesome-vars --save-dev
will install grunt-font-awesome-vars as well as update your package.json with a devDependency(the --save-dev flag does that) so that it is automatically installed any time you perform an
npm install
if you change that command to
npm install grunt-font-awesome-vars -g
it will install grunt-font-awesome-vars to your node install location (indicated by your PATH system variable) and be available to all node instances.
Edit to answer question from comments
Asked: Also, why is there the need to have the install command as 'grunt-font-awesome-vars -g'
grunt-font-awesome-vars is the name of a module for grunt that is deployed as a node package. You install grunt modules with the "npm install" command. -g is a flag that instructs npm to install the requested package to global space, by making it available through your PATH variable. The only things that I currently have installed globally are http-server, bower, and karma. If you don't have packages installed globally, then you will have to have performed an "npm install" of that package at the current working directory in order to execute the commands of that package. For instance, http-server is a node module and is executed command line just like any other console application. In this case, the command "http-server" will start a local http server anywhere you want to serve a site from. If I install it to my PATH, I can run http-server from anywhere I want without having to do anything special. If you don't install it to your PATH, then the http-server executable must be in the directory in which you are wanting to run it. I install it globally so that I never have to "npm install" it again. Most things you will want to package with your project and that you can do with the --save flag rather than the -g (or --global ...they do the same thing) flag.
I am trying to clone a project from github then set up the bower dependencies and grunt build / dev tools. When angular projects are initialy pushed to github, certain directories and files have been shed (since they are listed on the gitignore file). I am trying to figure out how to resurrect all these files necessary to locally run a project (that I find from browsing on github).
After cloning the project, I run the bower command so that it reads through bower.json:
% bower install
Then I run the grunt commands:
% npm install -g grunt-cli
% npm install grunt --save-dev
Why is the Gruntfile.js not automatically created when I run these terminal commands?
It also hangs up on an issue related to livereload but that evaporates after I run these:
% npm install --save-dev connect-livereload
% npm install
When I start a project from scratch with these yeoman and grunt commands, it automatically creates the Gruntfile.js and I can successfully get the project to auto-load in the browser:
% npm install -g generator-angular
% yo angular
% bower install angular-ui
% npm install --save-dev connect-livereload
% npm install
% grunt test
% grunt server
% grunt
But I am trying to master the technique of cloning a project from github and then setting up the project locally. I am close but currently I am also experiencing an issue with a missing Gruntfile.js. I would be very grateful for any direction you could provide. All the best,
Ben
Using Yeoman
You don't need to clone the project from GitHub.
You simply need to make a new (clean) project directory.
cd /new/project/directory
(Optional) Update NPM
npm update -g npm
Install angular scaffold
npm install -g generator-angular
Run yeoman scaffold
yo angular
Fire up a server
grunt server
Start building your app, perhaps with Angular sub-generators
yo angular:controller myController
yo angular:directive myDirective
yo angular:filter myFilter
yo angular:service myService
Using bower to install front-end dependencies
Search for repos to install
bower search dep-name
or, http://sindresorhus.com/bower-components/
See what all has been installed
bower list
or, see your bower.json file
Installing dependencies
bower install dep-name
or, add it to bower.json file then simply run bower install(Preferred)
Most of all, Read Documentation
Yeoman Getting Started
Bower
Grunt
I would recommend reading through Yeoman first. Get the hang of it, then move on to the other docs once you need more advanced customization for your project. Generally, the Yeoman docs cover bower and grunt well as it relates to your Yeoman project.
I get it working after do the following:
brew install nvm
source $(brew --prefix nvm)/nvm.sh
It will install nvm then you can controll your npm version (may you have problem with this with yo:angular project)
Then you should make sure that you are using npm 0.10
nvm install 0.10
nvm use 0.10
To avoid problems with previous npm installations cached you should use:
sudo npm -g cache clean
Now you are ready to get your yo:angular project working in your machine:
git clone <yourproject>
cd <your-project-directory>
npm install
It will install grunt and karma for you, then you should install all bower packages before start your dev server:
bower install
Then, finally, your project are done to be working so you can use:
grunt serve
:)