I'm writing an application using Grunt as my build tool. I used the Yeoman generator angular-fullstack. The app is a Node.js app with Express on the backend. While developing, things work fine. If I build the distribution though, I can't deploy it to my server because none of the required npm dependencies are available, like Express for example. It's the first time I build this kind of app, so I assume I'm missing a step since the Gruntfile.js is still all defaults.
The "node_modules" folder is traditionally not included into source code repositories, for various reasons.
If you set up your node application correctly, however, and you have a "package.json" file where all dependencies are listed, then you just need to run npm install to download and install npm modules.
Related
When installing anything via npm, it downloads dozens of not needed files. Usually I am looking for a library final build, a *.min.js file or anything like that but the rest is useless.
How do you handle all these useless files? Do you remove them by hand or generate the final app with any build tool like gulp or grunt?
I'm quite confused as I have plenty of npm modules installed in my webapp and the folder size is about 50 megabytes but it could be 2mb only.
npm install --production
Just doing an npm install brings in both development and runtime dependencies. You could also set the ENV to production globally for the server: npm config set production.
See this github issue. Note that this won't get you only the final minified build of everything, but will greatly reduce the bloat. For instance, a library might rely on babel-cli, babel-preset-es2015, and uglifyjs to be built (devDependency), but you don't need any of that if it also includes the transpiled minified file.
Managing Packages
For front end non-development packages I prefer Bower. It maintains the minified and non-minified version of your packages.
Build Tool
Use either Gulp or Grunt. Gulp would be my tool of choice.
Gulp task that will greatly improve your code are:
minification of both css and js
optimization/compression of images
concatenation and caching to reduce the number of calls to the server
package versioning
automatic injection of project dependencies
automatic injection of external dependencies
static analysis of js and css
automatic builds on code changes
deployment
testing
Node
If you can, leave to node all your development tools and leave to bower all your release plugins. Most node packages that are used in released apps have a bower installation counterpart.
Edit
Don't delete anything from Node manually as you don't know which packages have other packages as dependencies. If you are afraid that you may have junk in there, use npm rimraf to delete the node_modules folder, and then run npm install. Most importantly check your package.json for unnecessary saved packages.
this is probably a silly question but am new to Meteor and struggling a bit. I want to build a stellar app that tweets when you get stellar. There is a nice Javascript API stellar-lib that works on node, but im unsure how to access the modules in Meteor...
I'm also building an app with Meteor and stellar-lib and have found two options:
1) You can manually copy over the built stellar-lib.js or stellar-lib-min.js from the build/ directory from either the github repo or the node_modules folder you installed it to when you ran the npm install command.
If you do this, you will have to copy the .js file to client/compatibility, otherwise stellar-lib will not work (note: this means you can only use Stellar on the client).
2) If you need it on the server, you can also have browserify wrap stellar-lib for you, then copy the output to lib/ in your Meteor app's root directory. I did this in my repo here with gulp.
Here's a short explanation to how 2) works:
.gulp is where I'll install my NPM modules where they will be ignored by the Meteor build environment (because the folder is hidden).
In deps.js, I require the modules I would want to use in my Meteor app as I would if I was using them in a traditional node.js app. package.json defines the modules I'll install with NPM and the gulpfile.js describes a build task that will resolve my require statements and output a single deps.js file that includes my dependencies to my Meteor app's lib/ folder.
I added highlight.js to bower.json and installed it.
But there are only sources of highlight.js, how can I compile it using bower?
Bower is just download the dependencies. Installation is depends on what development environment are you at? Single page application with Yeoman? Node.JS web application with Express? Or something else.
There are some JS task runners like grunt or gulp. I prefer grunt. If you are using grunt, there is exist grunt's task runner for it called grunt-bower-task that will install your downloaded bower components into specific folder that meets our need.
I recommend you to use/ learn Yeoman that is included yo the scaffolding, bower the dependencies manager, and grunt the task runner if you are starting single page application development.
So basically bower is just front end dependency manager unlike NPM which is NodeJS dependency/ package manager that we usually use at backend/ web server.
since you are using bower to install highlight.js, i believe it's used at client side.
you don't need to compile javascript at all, you just need to load it and use it globally.
there are several ways to load it into global execution context:
inline script in html <script src="path/to/bower/component/highlight.js"></script>
using front-end AMD modularization tool like requirejs
use front-end CMD modularization tool like browserify, webpack
What is the best way of sharing code between frontend and backend using javascript, specifically saying between nodejs and angularjs?
Thing is that we are using same enums and constant values such as error codes in both backend and frontend. Right now we just copy&paste each change to both platform which isn't a good solution. There are also some services that could be shared.
I have seen libraries such as browserify; but thats not exactly what I am looking for. I am looking for a solution similar to maven dependency in java. In java, libraries can be shared easily using maven, whereas I can't find a similar way of doing that in javascript.
Is there a way to isolate these services and give them as dependency to nodejs using npm and to angularjs using bower independently? Or what are the ways for sharing the same code between frontend and backend?
There are several ways to do this. The first is that you can make a new package which is required via bower for the front-end code and via npm for the backend code. I have several packages published to both systems.
Install with Bower -- information on how to install modules that aren't in the registry
NPM Install docs -- all the ways to install with npm (private github with auth: git+ssh://git#github.com/[org]/[repo])
Just create a new module with your shared data and install it using both package managers. Both of them allow you to install an unpublished module so if it's private data you can keep it as such.
If your front end requires require.js you can use something like amdefine to make it available to your node backend, or if you're just using legacy window code you can do something like:
var mydata = {};
if(typeof window !== 'undefined'){
window.mydata = mydata;
} else {
module.exports = mydata;
}
If you are sharing a lot of data though I highly recommend looking into browserify to write your entire codebase in commonjs and using browserify to generate your client bundle. There is a laundry list of resources about using browserify, including stuff on how to use browserify and angular together
Disclaimer - I'm still developing this approach and it's a little manual.
I did this using npm, an npm cli called pac, and bower. Pac let's me avoid using npm install in production by keeping the modules as .tgz files (committed to project in source control). With pac, when someone checks out the node project, they run pac install then npm rebuild instead of npm install.
My shared code is kept in a directory (my-module). It has both package.json and a bower.json.
My consuming node app has a package.json dependency for:
"my-module" : "x.y.z"
My consuming client has a bower.json dependency for:
"my-module" : "../relative/path/to/my-module"
When I make updates to my-module, I update my node app by:
Making a tar.gz of the contents of my-module:
tar -czvf my-module.tar.gz -C my-module
Removing the old version from the node app's node_modules
Rerunning npm install path/to/my-module-tar.gz
Rerunning pac (this makes a .tgz of node_modules/my-module)
Committing the updated pac .modules/my-module.tgz
I update my client by:
Removing the old client/bower_components/my-module
Rerunning bower install or bower update
I created a small test program for web applications that uses jasmine, and I'm preparing it for easy downloads. Before installing my package, the user's project should look something like this:
myProject/
app/
lib/
...
I want to be able to have the user cd to myProject in the terminal, issue a single command that points to the app and lib folders, and then end up with this:
myProject/
app/
lib/
requirejs
test/
lib/
node_modules/
specs/
SpecRunner.html
server.js
...
app/ should contain the js project files, lib/ should contain all the external js dependencies for the project, and test/lib/ should contain all the external dependencies for the tests. server.js runs with nodejs and depends on apps installed in node_modules/.
What's the best way to go about doing this? I could make a bash script, but I'd rather use a package manager. I'm not sure how I'd do this in bower or npm. And am I right in thinking it's better to have two libs, one for the project and one for testing, rather than one? I know I can declare certain packages as test packages in bower, but it seems like they should live in a separate libraries.
And am I right in thinking it's better to have two libs, one for the project and one for testing, rather than one?
No. The idiomatic way in the npm-verse is to have tests in the same package in the test folder. Since bower is based on npm I'd say the same applies there too. If you don't want bower users to have to download test-stuff you should be able to ignore the test folder in the bower.json file (according to this answer). You should also specify node modules that are only used for tests as devDependencies.
Developers who want to run your test should IMO install it directly from source using e.g. git clone git#github.com/your/repo.git (and then just run npm install). Or simply npm install x if it's available on npm. Even if you really want the tests in their own package, I'd still suggest not using a package manager but ask the developer to clone it from the repo into the test folder.
Anyway to answer the question, the following one-liner should work (assuming npm, I'm not too familiar with bower):
npm install x-test && mv node_modules/x-test test