I just got started with Node.js and found that we need to RequireJS library on the backend. Also, we need to include it in view if we want to use it there. So, if I want to use d3 to manipulate some data I will specify require in backend and send the result only to front end? Or should I include it in both server side and HTML page? So is it redundant that using same library on both sides?
For jQuery: I did
npm install jquery
For Bootstrap:
npm install bootstrap
Now as the version does not match, I am including different jQuery in HTML file. Again I added d3 from scripts. Although it works, is this the proper way to design a Node.js app?
You do not want to use npm for the client side part of the application (bootstrap included). I would recommend installing bower.
npm install bower
bower init
Create a .bowerrc file and put in it { "directory" : "public/components"}
bower install bootstrap --save
Include the script in the html file.
Related
I have been installing React into Meteor projects using
npm install --save react react-dom
What is the difference between doing that and using a package from Atmosphere:
meteor add reactjs:react
It's more like a consistency assumption rather a real deal.
You may install react via bower , NPM , Atmosphere or even by cloning the repository.
In my projects, I had clarified dependency management as:
Use NPM for backend dependencies ( using Node.js ) or frontend dependencies that require a building / piping / bundling system like Babel, Webpack or Gulp.
Use Bower for "presentation" dependencies like Bootstrap, jQuery or prebuilt modules used as is.
Use any additional package management tool for any further dependency injection.
TL;DR
There are no differences between the two approaches ( although Atmosphere is not mentioned as a proper way to install / build React into the official docs)
If you prefer to keep React rendered in the browser use NPM or Bower. If you need to use React mapped into Meteor backend's code as an isomorphic app you may use Atmosphere as it is semantically used as a dependency.
I install bootstrap with
npm install bootstrap --save
in my express project, then bootstrap is installed in node_modules, but how can I access the js and css in my jade file?
Node_modules is meant to use for server modules. NPM is server package management system.
You should use client package management system like bower for your client side modules i.e. Bootstrap.
Once you set up bower, you'll be able to reference bower_components in your html files.
It depends on how you configure your static server, e.g.:
app.use(express.static('public'));
So if node_modules is placed into public folder, your jade file will be:
script(src='/node_modules/bootstrap/js/file.js')
But better approach is use bower_component instead of node_modules on the client-side
I declare dependencies in my app.js (ember) file, such as:
var _ = require('underscore');
Since my app.js file will be sent to the client and need to execute in a browser, how would this code be made available to the client?
Currently I'm using lineman to concatenate and uglify all my js files, and inside my vendors folder I did include underscore.min.js (all of this get bundled up into app.js) - yet my app isn't working.
Could someone kindly explain the process of adding npm packages to an ember app and the resulting requirements on the client side?
You can use Ember Browserify to use node packages in your ember app.
See this answer for specific usage.
To install Ember Browserify:
npm install --save-dev ember-browserify
and utilize something from a package isntalled through NPM:
import Xyz from 'npm:xyzPackage';
I don't really know where the bower_components directory came from in my Node Express app but it seems to be competing for attention with my node_modules folder since both contain jquery and bootstrap.
I am using Browserify and am trying to bundle up jquery, bootstrap and some other components. What exactly is going on here with Bower? Do I need Bower for anything?
For instance, when I do a require('jquery') in my application code how do I know if it's coming from the NPM node_modules or Bower bower_components?
Basic browserify can only use node_modules.
To use with bower, it can use transform before import node_modules.
If you use debowerify transform, it will import bower_components before node_modules. So if your bower.json has jquery and bootstrap, it will use bower_components'.
If you use browserify-shim transform, it will search your package.json's browser field. So if your browser field has jquery and bootstrap, it will use it.
I'm totally new to Node.js meteor and all development outside of visual studio.
When I go in the console and add bootstrap like this :
npm install twitter-bootstrap
It gets installed and adds all the bootstrap files in my solution but when I run my application with meteor it says
Process finished with exit code 254
No more information. No errors. If I delete all the bootstrap files, it builds and run just fine. Any idea what might be causing this?
I've tried looking for the exit code meaning but I can't find it for my IDE and I'm a bit clueless as for why simply adding those packages without even referencing them anywhere in the project might cause my application not to run at all.
You can't add npm packages in your project folder like that. It will create a node_modules sub-directory that meteor will treat like any other project folder, i.e., it will interpret all the files in it. That's not what you want. Either do the npm install in a super-directory, or, better yet, use the meteor meteorhacks:npm package (https://atmospherejs.com/meteorhacks/npm):
meteor add meteorhacks:npm
and then add the npm dependency to your packages.json file.
{
"twitter-bootstrap": "2.1.1"
}
But the real question is: why do you need this package? bootstrap3 is already part of the standard meteor packages, i.e., you already have full access to bootstrap, incl. javascript.
You can use atmosphere meteor packages called mizzao:bootstrap-3 by running the commend
meteor add mizzoa:bootstrap-3
Alternatively if you want to use npm packages you must add meteorhacks:npm packages.
meteor add meteorhacks:npm
npm install twitter-bootstrap
You can specify all the required npm packages inside a packages.json file.
{
"gm":"1.16.0",
"twitter":"0.2.12",
"twitter-bootstrap":"2.1.1",
}