In the past I've manually downloaded vendor JS such as jQuery or RequireJS and saved them in my repo under /vendor/js. I'd like to use NPM to manage all of that for me and clean up my repo a little.
I've built a packages.json file and used npm install, but I'm not sure what the best way to use the node_modules folder that it generates is.
Should I link directly to the script files in node_modules?
<script src="/node_modules/requirejs/require.js"></script>
Or should I use some other tool (gulp?) to move the contents of node_modules somewhere else after it's installed?
This isn't a Node app, just a simple front-end website that would work on any server, e.g. a LAMP stack.
Related
I would like to fork Facebook's Create React Repo and use it as a dependency instead of their own react-scripts. All tutorials on the subject publish the forked repo to NPM to install via the normal way.
However, my client would prefer to not do that as both the forked Create React App and my React App repositories are hosted in the same Azure workspace.
I know CRA is a monorepo and uses Lerna. Does that make it possible?
You could upload the package to a online git repository like GitHub. It can even be private if you want. The command to install it would then be: npm install --save-dev github:username/repo-name
If you're gonna make the repo private then you need to have SSH keys setup on GitHub and on all machines on which you will be installing the dependency on.
You could also install the dependency as a path if it's on the same file system but I have bad experiences with that so I don't recommend it.
I've personally done that at a previous organisation. We copied any package that we forked, when heavy changes were necessary, inside our monorepo. Lerna (or yarn, or what ever) takes care of the rest.
If you have a lerna monorepo, you'd take the content of https://github.com/facebook/create-react-app/tree/master/packages/react-scripts into your monorepo, in say: packages/custom-react-scripts and change the name of the copied package in the package.json
If you'd like to rename react-scripts binary into custom-react-scripts you could do that as well via the "bin" configuration inside the copied package.json
All the renaming steps are of course optional, but it helps to know that you're not using the official tool.
I am currently looking at deploying a personal project to Netlify. This project uses an npm package called NES.css which is found here: https://nostalgic-css.github.io/NES.css/.
I have a gulp file that has a build process that minifies, bundles, transpiles all the scss, js, images, etc. This is done by running npm build.
Netlify is setup to run this build command on deploy. Everything works as far as deploying goes, however, there are two images that the NES.css's stylesheet references that are no longer found because Netlify deletes the node modules before deploying your code. Any suggestions?
Since nes.css just gives you a css to play with, you can easily fetch the css elements into your HTML via CDN by including following in the
Bonus: With the above method, you don't need to worry about updating your nes.css npm module every time the original nes GitHub project gets an update.
According to the docs, Titanium now has support to install npm packages: http://docs.appcelerator.com/platform/latest/#!/guide/Node.js_Support
However, upon reading it, I am very confused as to where to actually put my node_modules directory. There is some mention in the docs about a Resources directory, however, for Alloy this is supposed to be left empty, as it is frequently overwritten by the compiler.
So my question is, where do I put my node_modules and how do I reference it.
In Alloy project you are supposed to run npm install inside the app folder. But according to this bug JIRA Ticket modules that use core-modules won't work correctly. So you have to try if you module works.
Another explanation: https://stackoverflow.com/a/45041737/5193915
From experimentation, it seems like you can do npm install in the app/lib/ so your package are in app/lib/node_modules. This does NOT work on the app/ directory.
Note that if you use tishadow, you will also need to install the npm packages there as well in the Resources/ directory (as they still do not use the Alloy framework).
I have developed an Angular 2 application using npm, As a fresher,I don't know some ways like below.
When I publish I used npm publish so that it publish the application in npm account in the web.
So here, is there any way to publish our app in the localhost,because I don't want to use npm account and I just need to avoid node_modules folder on publishing ?
If any other way,that can be used to publish the Angular2 Application in local other than npm, let me know.I try that.
If it is not possible to publish the application without npm web account, Kindly let me know please .
Excuse mistakes,If any.Thanks in adv :)
npm publish is to make a library package available to other for free use.
That's not what you use for making a web application available. This is called deployment.
For deployment you usually execute a build step that transpiles TS to JS, and combines them into a single file to reduce the number of requests the browser needs to make in order to get all source files of your application. It may also inline component HTML and CSS. This build step can also minify and mangle to JS code to reduce the resulting file size even more.
The resulting output can just be copied to any directory that any web server is able to serve to a browser either on your local machine or at some machine of a web hosting provider.
There are different ways to build your application depending on your setup.
See for example How to deploy Angular 2 application developed in Typescript to production?
You need browserify, that's all
browsers need references to all js files to be put in the html, they don't understand node's require() method that forms modules dependencies
what browserify does is traversing the entire dependency graph of your project, recursively bundling up all the required modules starting at the given root into a single js file
install it by node package manager
npm install -g browserify
use it to bundle all needed modules staring at main.js
browserify main.js -o bundle.js
now put a single script tag into your html
<script src="bundle.js"></script>
as far as i know, node_modules contains dependencies for typescript transpilers and few others. so it will not be possible to publish an app without using node_modules.
perhaps you can try using Plnkr or jsFiddle
where you can make imports online using cdn links for node_modules and publish your app.
it will be easy compared to other alternatives.
hope this helps.
I read about npm and bower, differences, usage, how it works, purpose as well. All explanation says that to work in NodeJs. But when I searched for AngularJS2, the tutorial says use npm. I have some basic questions based upon the understanding that npm basically for dependency management or packages to be installed.
How my Java/Eclipse workspace knows that npm installed the particular JS library/file, what path should be given in the html/web page for including those files/libraries?
If I move the web application to production, how will the server gets those dependent libraries? Even if server gets it, it might be installed in different folder. Basically how it can be managed with a web applications in different environments for just AngularJS app?
Can anyone please help me to have better understanding?
Finally found the answer. NPM is node package manager which helps basically to download the dependencies (almost like maven, gradle in java).
npm software needs to be installed in developer's machine.
Add the required dependencies in the package.json in the root folder of AngularJS application.
Open the DOS command line and navigate to project root folder(workspace/project in eclipse), then type npm install which will download all the dependencies mentioned in the package.json to a folder called npm_modules inside project folder.
The other and important advantage is npm can be used to install browser agent as well. So npm start command will open the browser and will load the application automatically in browser. Developer does not need to be aware about NodeJs. One more benefit of using this approach is the browser will get refreshed automatically when any update in the JS file gets saved.