I am playing with a node application, which is running a basic hello-world HTML page.
I want to use isomerjs, which I installed via npm - though I imagine this question is more general than this one particular module. I do see it in the node_modules directory.
I'm not sure where to point my <script src="/path/to/isomer.min.js"></script> at. The module directory appears to only have the uncompiled files.
What is the accepted or standard way of utilizing front-end code from a node module? Am I missing a step?
Related
So, I'm heading to new territory in web dev.
I set up a basic npm project using npm init in my project folder. I don't have angular, react or any other Dev framework running. Basically I want to get started with some npm packages to easily update the things I need.
For my first test I picked bootstrap and font-awesome.
For testing I have a http-server running and displaying a index.html file from the public folder.
The site I'm displaying is a basic html site for now. How do I actually implementy packages the right way? Using <link rel="stylesheet" href="/path/to/node_modules/..."> is one option but not actually the way it is done, right?
Or will it be repacked once I'm ready for production. Since node_modules is not going to be transferred to the prod server.
Thank you very much in advance!
there is a difference between running javascript in nodejs and the browser javascript engine.
although nodejs is built on top of v8 javascript engine, nodejs is different in some ways, here are 2 of them:
nodejs is used mainly in server-side programming, where javascript is used for client-side
nodejs has builtin libraries which are not in the javascript specifications
if you are developing a client-side in nodejs (using react, angular or any other client-side frameworks), you will have to "convert" (a process called transpiling) it to run within the browser.
there are several tools which can help you in the process of transpiling your code. some famous ones are webpack and parcel in conjunction with babel (to pollyfill) to "build" your project and yield a bundled (few javascript file, usually one, that bundles all the javascript code into one of more files) javascript file(s), which are loaded by the webpage.
as you can see, once the project is bundled, node_modules directory has no use -- exactly what you want.
I'm a beginner using NodeJS. I'm using a plugin for video-js called videojs-playlist. The docs say to include it like this:
<script src="path/to/video.js/dist/video.js"></script>
<script src="path/to/videojs-playlist/dist/videojs-playlist.js"></script>
What exactly is the path/to supposed to be if not root/node_modules or something like that? How am I supposed to access those files from an ejs view? I have installed both video-js and videojs-playlist using npm.
Right now I get redirect errors on my page because it's not finding the file from the paths I've tried.
If the path doesn't have a / at the beginning, then the path is relative to the file the <script> tag is in; otherwise, it is relative to the site root -- which may mean different things depending on if/how you are bundling/deploying your javascript.
For a simple case, if you have the script tags in an index.html, and you copied video.js to the same directory as index.html, you would reference by:
<script src="video.js">
If you are using Node to test things out on your personal machine, you could reference a file relative to your HTML file and node_modules directory; however, this wouldn't really be the best in the context of deploying and managing a real application.
Node gives you require() to import modules from dependencies you've installed without needing to specify their exact location and directory structure, but it looks like this particular plugin may not have given you that convenience here.
It looks like you are in need of a bundler. One widely-used and well-documented bundler is webpack, but there are others such as parcel and FuseBox. These can all serve your needs.
These tools are most likely what the videojs-playlist README on GitHub is referring to when they say:
Include videojs-playlist on your website using the tool(s) of your choice.
Among other features, these tools can take a file from one of your node_modules dependencies, and "bundle" relative your javascript application (however you desire), so that you don't have to carry around some pre-installed giant node_modules directory everywhere with you -- you only take what you need with you and structure it the way you want.
I use npm as a package manager for my web frontend projects. I have a need to generate some fake data locally within JavaScript in a project. Faker.js seems to be the perfect library to do so.
Most libraries, when I install them with npm, either have usable js files at the root of the installed files or provide a dist or similar folder with the .js files that I can reference, e.g. <script src="node_modules/angular/angular.min.js"></script> Faker.js however does not include this.
The documentation for faker simply includes this line: <script src = "faker.js" type = "text/javascript"></script> Clearly this will not work since the package doesn't even install a file called faker.js anywhere. My assumption is that you're expected to either use it with Node.js (non web frontend) projects or you're expected to build it somehow to get the faker.js file.
One tutorial I found online says you can npm install faker and then use <script src="node_modules/faker/build/build/faker.js">. But I also do not have a build folder. The tutorial didn't give any instructions on building the faker.js file.
Can someone shed some light on how this works? I have actually seen at least one other package (jQuery) that is similar and does not include a compiled usable browser version in the distribution. In past projects I've simply downloaded a compiled .js file and included it in my source control, but I'd like to try to avoid that if at all possible!
(Please don't answer with "just use a CDN" - I am working in an environment with specific policy requirements that HTML on the production server may not directly reference any off-site assets or scripts, but it is OK to pull in those libraries and self-host them. Frustrating, yes, but I don't get to make the rules.)
I would like to start working with the Angular2 Beta, but I am facing a few problems regarding the required libraries.
I am using Eclipse and it's TypeScript Plugin.
Also, I am using SystemJSas module loader.
My problem is that if I install Angular2 using npm install angular2 it loads the whole Angular-Project, including the CommonJS-Version, ES6-Version and the TypeScript-Version. This results in a over 30 MB big folder with almost 2000 files, though I only need the TypeScript-Version (still a few 100 files), without examples.
Also, importing the /ts-folder in Eclipse gives me errors, that the modules from "rxjs" do not exist ("rxjs/Subject"...). So i guess i have to download that project too.
Using the package.json used in the 5 Min Quickstart, npm install downloads over 80MB (almost 10000 files), and I am sure, I don't need all those files.
So i would like to know, which files are really needed by Angular2 and how can i download them?
Should i create my own package.json-File? Or is there a even simpler way?
EDIT:
Taking a look at our (working) Angular 1.X Project, i can see a single angular.js file, as well as files for the different modules (like restangular.js, angular-route.js etc.), in total about 10 files.
What i am now looking for is an angular2 counterpart of those files.
Do those counterparts exist? Where can i find them?
"What i am now looking for is an angular2 counterpart of those files":
<!-- 1. Load libraries -->
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
You need those 4 .js (not .ts) files.
"Where can i find them?"
They got downloaded with npm. You can keep those 4 and delete everything else. You can also get them from a CDN, or download them manually.
<!-- 1. Load libraries -->
<script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>
HOWEVER. These are already compiled javascript files, and they'll work for you if you write your app using JS, but right now 90% of the scarse documentation you will find about Angular 2 is on typescript and in order to work with typescript you'll need the source files of Angular 2 which is the whole package you are getting.
My suggestion if you are doing it in typescript: Don't worry about all those files getting downloaded, they are meant for development, not neccesarily part of your build. You can only include the ones I told you in your build and that will keep you real app small. Also you are not suppose to add all those files into the git repo or w/e repo you are using, the idea is that you have git ignore the whole "node_modules" folder and you only commit the package.json file, which will work for other developers so they run npm install and they get all the dependencies themselves. So all those files are only meant to be in dev machines, you don't have to worry about them making you app too big cause they won't be part of your app.
The package.json file in Angular 2 Quickstart guides contains development dependencies like concurrently,lite-server, typescript etc along with es6-shim etc for older browser compatibility.
Basic dependencies for angular 2 are
angular2
typescript
systemjs
rxjs
You can look into this Angular2 Tutorial Plunker to start a simple application. It also contains routing library.
I'm putting together a module I'd like to release, but am a bit stuck on how best to go about packaging it up. In addition to server side javascript, the module will need things like an admin screen, and client side javascript files. That is, it needs to serve out a fixed set of static html/css/js files. (I may have the node-static module as a dependency)
I'm curious what is the best way to handle this. I'd like to make this simple to install and integrate into apps, without forcing the user to dig through a long README. Basically they should be able to NPM the module, then add a line or two of code in the relevant place, and have it "just work". I don't want them to have to download other stuff, tell the module where to find the static files, etc.
Also, I'd like to make sure it can be included in both simple apps (i.e. one step from the standard "hello world") as well as complex apps using frameworks etc like Express, without undue hassle.
Is this possible, or is this beyond the scope of what the module system is designed to handle?
Once your package in installed with npm install mypackage -g you can use __dirname inside your executable to find the directory it's running in.
Likely /usr/local/lib/node_modules/mypackage/bin/mypackage
With your assets in /usr/local/lib/node_modules/mypackage/assets
so __dirname + '../assets' + myasset should correctly find your asset