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
Related
For a particular case in a Vue.js and JavaScript project a NPM package dependency have to be merge with the current JavaScript code base.
In that specific case, the NPM package should not be part of the nodes_modules folder anymore but rather be part of the JavaScript code itself.
In that case as both codebases will grow together in the future. (Independently from the original NPM package and not as a Fork)
How can I merge or fusion a NPM package to a Javascript project?
Additional Details:
The library that need to be merge is OIDC client. It's an open source project "Archived" by it's author (So no possibility to create Pull Request for a new release).
It is use to create a SSO for an internal project. This library has been retain by architect the for specific need of the project and there is no other option than this one.
There is no "internal package manager" available in this company
I don't want to host the fork on my personal Github and manage the package on NPM website
After many attempt to solve this problem, it turn out that Patch-Package do the best job to merge a dependency by simply patching over instead of forking.
Syntax is pretty simple and it integrate very well with NPM:
Installation: npm i patch-package
Modify the code of your dependency directly in node_modules folder
Run npx patch-package some-package where some-package is the name of your package to patch
https://github.com/ds300/patch-package
Documentation: https://github.com/ds300/patch-package
I'm trying to use an API via it's helpfully developed JS SDK. So the SDK instructions on the GitHub page are to npm install. I'm wondering though, does this imply I have to have Node.js because the SDK has been written specifically for it, or if I just have basic vanilla JS/jQuery, can I just.... Copy the source code from GitHub into my scripts or use it some other way?
It means that the project is using npm to handle dependencies. It has a package.json file that stores what those dependencies are, and npm install will download them into a folder usually called 'node_modules.'
It's dependency management. It doesn't mean it's written for node, but that it uses node to download external dependencies.
I'm completely new to frontend web dev with a very basic question. Once I npm install something, how do I actually use it? For example, I just did npm install bootstrap, and I would now like to be able to use the CSS and Javascript that it downloaded. I'm sure I shouldn't have to dig through the directories to find some entry point... so how do I now use bootstrap in my webpage?
Most modules on NPM are used in Node.js, for the server (backend). Node.js has a built-in function require('your-module') to make use of the module. This function is not present on the frontend in the browser. However, there are tools like browserify or webpack and probably others to make the NPM modules and the require function work in the frontend.
If you're just starting out I suggest you take a look at Bower first. With Bower (installed with NPM though) you can pull in all your frontend libraries like jQuery, Bootstrap, etc. to your project folder and you can point your script tags in your HTML to the bower_components/ directory, e.g. <script src="/bower_components/jquery/jquery.min.js"></script>. You can save a list of all libraries used with a version number in a json file called bower.json in the root of your project folder.
Based on this file you can pull in or update all the libraries listed with the use of the command line.
As a really general rule, npm is used for assets your node app will use on the server, while bower (and others) are the equivalent for dependencies that you want to use on the client.
That said, the use is basically the same.
npm (and bower) install the files into your project directory in a standard location. All you really have to do is make sure that location is accessible via a web request (typically, node_modules is not; which is why bower came about), and then embed link and script tags as appropriate in your html:
<script src='/node_modules/bootstrap/js/bootstrap.min.js'></script>
I've been trying to get familiar with a few popular Javascript repositories on GitHub. It seems that I often pull down the repository, then run into an issue with some sort of dependency. Usually this will be something encountered during the npm install or the grunt run.
To be clear, these are not node packages that would be installed by npm, rather console dependencies that some grunt packages seem to need in place and to be available in the system's path variable.
I've had to install Git, Java, Bower, PhantomJS, and other packages after cloning new repositories and trying to build them. My question is this: Is there a standard set of console utilities (beyond just nodejs and those things that are installable via npm) that are expected for doing Javascript builds via Grunt?
How do we or can we use node modules via npm with Meteor?
Or is that something that will be dependent on the packaging API?
Or is there a prescribed method that is recommended?
Meteor 1.3, released on March 28, 2016, gives apps full ES6 (ES2015) modules support and out of the box NPM support. Apps and packages can now load NPM modules directly and easily on the client and on the server.
If you can use 1.3, then check http://guide.meteor.com/using-packages.html#installing-npm.
For example, to use moment.js:
meteor npm install --save moment
Then in your code:
import moment from 'moment';
// this is equivalent to the standard node require:
const moment = require('moment');
If you need to use an older version of Meteor, read the rest of the answer below.
Pre-Meteor 1.3:
Since v0.6.0, Meteor integrates directly with NPM modules with the help of a 3rd party package. For example, to use a module like ws,
Run sudo npm install -g ws (or for local installs, see this)
In your sever JavaScript file,
var Websocket = Npm.require('ws');
var myws = new Websocket('url');
To use a core Node module, just make the corresponding Npm.require() call, e.g. var Readable = Npm.require('stream').Readable.
You can use any of the more than 230,000 NPM modules directly with Meteor thanks to the NPM package developed by Arunoda.
You can also define dependencies on Npm packages from smart packages - from the initial announcement of npm support:
Your smart package can now define dependencies directly, by adding a call to Npm.depends in package.js:
Npm.depends({
"awssum": "0.12.2",
"underscore.string": "2.3.1"
});
All of this works well with hot code reload, just like the rest of Meteor. When you make changes, the bundler will automatically download missing npm packages and re-pin its dependencies.
To use an NPM module within server code, use Npm.require as you would normally use plain require. Notably, __meteor_bootstrap__.require has been eliminated and all of its uses have been converted to Npm.require.
There is a small example of using an NPM module in your application.
Note that this answer applies to versions of Meteor prior to 0.6.0, which was released in April 2013 and added direct npm integration
Install modules as you normally would through npm and then use
var require = __meteor_bootstrap__.require,
pd = require("pd"),
after = require("after") // etc
Load any modules you want
I did a complete write-up on this on Meteorpedia:
http://www.meteorpedia.com/read/npm
The article covers how to use npm in both your app and/or packages, and common patterns for wrapping regular callbacks and event emmitter callbacks to work properly in Meteor and Fibers, and include's references to Arunoda's async-utilities and additional resources.
You could use the Meteor Npm package
meteor add meteorhacks:npm
Then create a packages.json file in your project's root directory with the NPM module's info.
{
"redis": "0.8.2",
"github": "0.1.8"
}
Then as simple as (server side)
var github = Meteor.npmRequire("github");
var redis = Meteor.npmRequire("redis");
So you just use Meteor.npmRequire instead of require
I wrote a Gist on how to do this as of Meteor 0.6.5, How to add Node.js npms to your Meteor.js project.
I am using such a script which nicely install all Node.js dependencies. It behaves similar to the official support in the Meteor engine branch (it installs dependencies at runtime), but it also supports installing from Git repositories and similar goodies.