Bower Please Try Running This Command Again as Rootadministrator
We, at Cloudways, constantly try to add more than features to our growing number of services. As such, nosotros are enabling NodeJS as a service. Users now have admission to the Node Package Manager (NPM).
Getting Started
Before proceeding further, nosotros think it is important that the readers sympathize some mutual terms:
NodeJS
NodeJS is a server-side JS environment for web apps. For those who want to kickoff writing server-side lawmaking using JS instead of PHP, Python, and Ruby, this is peachy news.
NodeJS Package Manager (NPM)
NPM is the dependency management tool that comes with NodeJS. NPM is to NodeJS what pip is to Python or ruby-gems is to Ruby-red. It makes information technology easy to download and manage NodeJS modules, removing a lot of hassle for the users.
Bower
Bower is another dependency direction tool used to manage front-end (HTML/JS/CSS) packages/dependencies. It could be downloaded through NPM.
Grunt
Grunt is a JS task runner tool used for, among other things, linting, unit testing, and compiling JS.
AngularJS
AngularJS is an MVC framework for the frontend (HTML/JS). AngularJS extends HTML tag attributes with Directives. The best clarification of Angular JS is given on its website that says that Angular is "what HTML would have been, had information technology been designed for building spider web-apps".
Annotation that AngularJS has nothing to do with NodeJS. One could brand a fully functioning web app using AngularJS and PHP/Python/Crimson on the server-side.
So let's become started.
Launch a New Project
Go ahead and launch a Cloudways server with a simple PHP stack application. SSH into the server with the master credentials and cd into the project's public_html directory.
Run the following commands to verify that NodeJS and NPM are indeed installed.
nodejs -v npm -v
Now, let's build a basic posts app, where anyone can come up and write a post. The posts will not be saved anywhere considering the app will focus on the frontend exclusively.
Create post_controller.js
var post = athwart.module('PostApp', []); mail.controller('PostController', function() { var pc = this; pc.post_list = ['Hullo Globe', 'Testing']; //Form variable pc.addPost = role(){ pc.post_list.push(pc.post_text) pc.post_text = "" }; }); This app is created in AngularJS and this is the controller for the app. Using the angular module, nosotros create an app, from which nosotros create a controller ( that is a course as well). Delight annotation that I take declared one function and ane variable (var pc = this; this is the handle which is used to access the class itself.).
These functions and variables could be straight called from the HTML code:
- The post_list variable stores all the posts. I will bind it to an HTML element afterward on and then that whatever changes to this list will result in instantaneous results in the UI.
- addPost part reads the post from the post_text (which will be passed from the HTML form) and appends it to the post_list
Update index.html
<!DOCTYPE html> <html> <caput> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/one.5.7/angular.min.js"></script> <script src="angular/post_controller.js"></script> </head> <body> <div ng-app="PostApp"> <div ng-controller="PostController as pc"> <course ng-submit="pc.addPost()"> <input blazon="text" ng-model="pc.post_text" size="30" placeholder="New post..."> <input form="btn-primary" type="submit" value="add"> </class> <p> Full posts: {{ pc.post_list.length }} </p> <li class="animated flash" ng-repeat="post in pc.post_list"> <p>{{ post }}</p> </li> </div> </div> </torso> </html> - ng-app="PostApp": I declared the app inside a div using this aspect.
- ng-controller="PostController every bit pc": This declares the Controller and assigns it an alias for easy access.
- ng-submit="pc.addPost(): This is a trigger. When the course is submitted, the addPost office defined in the js file will exist called. This telephone call will append the post to the post_list variable.
- ng-model="pc.post_text": This variable maps the input box's text with the post_text variable in the addPost function, defined in the js file.
- {{ pc.post_list.length }}: The "post_list" variable is being directly read by PostController class and calculate the length to display.
- ng-repeat="mail service in pc.post_list": This directive will loop through each of the posts in the post_list variable so that I tin can display them using the just created post
- {{ post }}: Variable provided past the loop discussed in a higher place.
The bones app is now complete. Let united states of america examination it out.
At this point, I will initialize NPM and NodeJS in the project's directory.
NPM
Make sure you are in the <app_name>/public_html and run the following:
npm init npm install --relieve bower npm list
- The first control initializes NPM in the project. This creates a JSON, which will hold a listing of all the dependencies.
- The second command installs bower. The –salvage switch adds the bower bundle to the JSON file created with the first control
- The third command lists the currently installed dependencies. This list should be similar to the packages listing inside the JSON file.
The idea is that anyone who runs the project could simply get things going by running:
> npm install
This volition install all of the dependencies listed in the package.json file.
Bower
At this betoken, y'all will have admission to the bower binary within the node_modules directory. Run the post-obit commands.
> node_modules/bower/bin/bower bower init > node_modules/bower/bin/bower bower install bootstrap --save > node_modules/bower/bin/bower bower install animate.css --save > node_modules/bower/bin/bower list bower bank check-new Checking for new versions of the projection dependencies... posts public_html ├── animate.css#3.v.2 └─┬ bootstrap#3.3.vii (latest is 4.0.0-alpha.3) └── jquery#3.1.0
- The first command initializes bower in the directory only equally with "npm". A "JSON" file will be created which will concur bower dependencies.
- The 2nd and 3rd commands install ii dependencies which we'll use to spice up our app. The "–save" switch tells bower to shop these dependencies in the "JSON" file.
- Bootstrap: Used to testify custom themes for the UI
- CSS: Basic animation classes
- The final commands list the currently installed dependencies.
As with npm, the "bower.json" file will be used by others to automatically install dependencies from your project using:
> bower install
Add together the following lines inside the head tags in index.html:
<link rel="stylesheet" blazon="text/css" href="bower_components/breathing.css/breathing.css"> <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css"> <script src="bower_components/jquery/dist/jquery.min.js"></script> <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
Also, replace:
<li ng-repeat="post in pc.post_list">
with:
<li class="animated wink" ng-echo="postal service in pc.post_list">
Reload the page, and add a few posts. The changes should exist evident (newly added posts will flash for a couple of seconds, and the submit button will exist blueish). This was non impressive, but the point was to show how piece of cake information technology is to install and manage dependencies using bower and NPM. For a big project, NPM and bower are invaluable.
Possible Workflow Strategy
- Commit JSON and bundle.json using your preferred SCM.
- Ignore bower_components and node_modules
- After cloning a projection, users should run npm install and later bower install
Existing PHP Projects
Launch a new PHP Cloudways app and clone your project into your <app_name>/public_html using either the SFTP access or via the Git Deployment feature that Cloudways offers.
Finally, cd into your project'south public_html directory and simply run,
<app_name>/public_html> npm install
If your project has a package.json file, all dependencies will exist automatically installed. If the project too has a bower.json file, and so additionally, run the post-obit command to see if thebower was installed through NPM.
<app_name>/public_html> npm list
If information technology was, go ahead and install bower dependencies.
<app_name>/public_html> node_modules/bower/bin/bower install
Finally, you may need to recheck your includes and confirm the paths to the dependencies.
That's information technology, you're good to go.
Q: Should I install NPM for every single project?
A: Yous don't accept to do "npm install" every time you want to compile. You only need to practice this when changing your project'due south dependencies. NPM is essentially a node package manager. Installing different packages and resolving their different dependencies helps.
Q: Why is NPM installation not working?
A: The trouble may exist with installing the package in your global npm. While all things work just fine with running a local project with its dependencies, there may exist a problem with global package installation that might not be installed or that last fustigate command can't access the installed parcel.
Q: How to fix the NPM installation fault?
A: Some strange issues can exist resolved by just running npm cache clean and trying again. If you lot are having problem with npm install, use the -verbose option to see more details.
Q: What is the full form of NPM?
A: Npm, short for Node Package Manager, is two things: get-go of all, it is an open-source repository. Js projects; second, it is a command-line utility to collaborate with the repository that supports bundle installation, version direction, and dependency administration.
If you need to add together to the word or have a question, please get out a comment below.
Share your opinion in the comment section. COMMENT NOW
Share This Article
Start Growing with Cloudways Today.
Our Clients Love united states of america considering we never compromise on these
Fahad Saleh
Fahad Saleh is a DevOps Engineer at Cloudways
Source: https://www.cloudways.com/blog/installing-npm-based-projects/
0 Response to "Bower Please Try Running This Command Again as Rootadministrator"
Post a Comment