Why should we install frontend libraries? [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I'm developping a web page using Vue.js, without backend (for the moment).
I need tabs, so 've looked at vue-tabs-component.
But to install it I need to :
npm install vue-tabs-component --save
How will this library be served to users ? They won't have npm installed nor npm install vue vue-tabs-components while navigating.
I'm developping only the frontend, therefore I don't need npm and I developp from several computers, several haven't npm.
Is there a way to use library only with <script src=...> ?
I took vue-tabs-component as example but my question is a general one: why have I to install frontend if it's gonna be served to client without them installing it ?

The word 'install' might cause some confusion for you here. npm install some-front-end-library downloads the files of our imaginary some-front-end-library package (e.g. a vue component).
After 'installing' (downloading the package), you reference to these files in your Vue project. E.g.
import somefrontendlibrary from 'some-front-end-library'
Vue.use(somefrontendlibrary);
You need to download/install the package first on the computer you're developing on, in order to be able to import them in your project. Just like you would download any other third party script which you later add using a script-tag.
When you build your project (npm run build), a vendor.js file will be generated (among others) which includes the some-front-end-library package. This file includes the package which you've installed (and added through Vue.use()).
Your final build (npm run build) will have an index.html file with a <script src="vendor.js" /> tag.

You need to install the module in order to use it. If, for example, you needed vue-tabs-components somewhere in your web app, you are going to need that source code for that module in order to use the tabs.
When it's served to the client, the code gets packaged and bundled so it's true, they don't need npm, but you do as the developer.
And regardless of if you are front-end or not, if you are using Javascript, you're more likely than not going to need NPM at one point in the development process.
If you want to use CDN's, you could check https://cdnjs.com/
There are CDN's of some NPM front end libraries, but it's not always assured you'll find what you're looking for.

Related

How to run an old angular project? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
In my company there is an old angular (Not even sure what version) client that no one touched for at least 2 years and I got the "lucky" job of changing some feature in this client.
The confusing part starts when I noticed there are no package.json, package-lock.json and angular.json files in the project but the whole node modules directory and compiled js files are stored in the git repository.
The problem is that I have no idea of how to rebuild this project after I change the typescript files. In addition, I want to remove the node modules directory from the git repository and have package.json instead.
No one that originally worked on this project is still in the company (Not surprised after I seen this mess).
The backend is written in asp.net framework and contains .cshtml files so I suspect there is some relation between the client and the server
Can someone help me rescue this project?
Sounds like a bit of a nightmare! You can try these steps to start but I'm sure you will have issues. Persevere as I think you can do it! Once you get some errors to work from it will be easier. Good luck
Look in node_modules for #angular/ folder and find the angular
version (if there isn't one then its AngularJS).
Create a brand new project using angular-cli using the version you just found.
copy the contents of the app folder (at least) to the new project.
Search through imports to see which libraries are used and npm install them.

"concurrently: command not found" despite being installed [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I'm trying to run two scripts concurrently, and I found this package concurrently that supposedly would help me. I did npm install concurrently --save and it's listed in my package.json. When I go to run it, however, it throws:
concurrently: command not found
I don't understand why it can't find it despite being installed. I've set up the commands as shown here, so I know it can't be that. I've checked earlier instances of this issue, but it appears to be outdated. Is there another way I can check if this works, or should I try something else?
Screenshot:
When you install using npm install without specifying the global flag -g, you are installing the module to your projects node_modules folder. If that module has any runnable binaries, they will be added to node_modules/.bin - so you should be able to run your local version of concurrently by running node_modules/.bin/concurrently (or from any folder in your project $(npm bin)/concurrently). I personally prefer using the project's local dependencies over installing global ones so I have the option to use a different version in another project.
If you put a script into the package.json "scripts" field it will reference these locally installed without having to specify the full path because npm run adds your projects node_modules/.bin to your path.
If you're having issues, I would start by checking the node_modules/.bin folder and verifying that the binary for your script actually exists.
This issue also comes up when there is a dash "-" in your folder name. i.e. (/developer/api-movies) or even (/developer-apps/apiMovies. Use camelCase throughOut rather than dashes.

Using Require with React in a web page without node [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
I know this might be a silly question to some of you, but I am beginner in React, and I wish to create a really simple application.
I found a sample in which every component is saved in a separate js file, which looks very good for modularity and re-usage.
The only thing I need to take care of now is using export/require. However, I don't need to be dependent on nodejs. I just need a simple html/js application that can run on any cheap web server.
I read somewhere that I can use "Browserify", but after looking at it, it seems like a node library.
Is there any library that I can use from a web page (via cdn for example) that allow me to use require? If not, does that mean I can not separate react components in different files?
However, I don't need to be dependent on nodejs.
Use NodeJS. It is how React applications are designed to be built.
I just need a simple html/js application that can run on any cheap web server
NodeJS is only required at build time. You run it on your development workstation. The output is static files that you can upload to any webserver.
(NB: React applications are often designed to make HTTP requests to get dynamic data. Some tutorials cover using Node to build a server to listen for and make responses to those requests. Make sure you don't conflate the program to transpile the React application to ES5 (which runs at build time) with the program to run a webserver (at runtime) even if both are written using Node).
If you don't want to use Node, you can use webpack: https://webpack.github.io/
you will generate a static/bundle.js . If you want to learn more about it, I sugest http://survivejs.com/
What you need is a build step that packs the separate files into one or more packages that can be loaded in the browser.
Browserify can be used to do that, but WebPack is also popular.
These tools require some configuration, so I think that the best way to start is with a tool like create-react-app which is easy to install and has commands for developing as well as packing your app for deployment.
It uses webpack internally (along with some other tools) but saves you the hassle of configuring it yourself. If at any time you need advanced configurations beyond what create-react-app provides, it has an 'eject' command that exposes the raw configuration files.
Getting started is simple (taken from their readme):
npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start

What is the workflow when including scripts in web pages with npm? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
There are many JS libraries and frameworks (e.g. jquery) that suggest doing this:
npm install foo
This gives you a node_modules directory in which there would be a foo directory. For most JS libraries that are meant for use in web pages, there will be a dist directory inside consisting of the required JS files that can be used.
I can now include JS with something like <script src="/node_modules/foo/dist/foo.js">, but I haven't found a single website doing that. Of course, this folder could be symlinked to something like js and then that could be used as js/foo/dist/foo.js, although I'm not sure if this is a good idea or whether it is even done in real life.
To me, copying scripts from online sources and putting them in my project repository seems like a better idea, although the advantages of automatic package management are lost in that case.
I do understand the workflow of npm when developing node.js-based server side applications, however, I'm having trouble understanding where the case involves scripts to be included in web pages. What exactly is the workflow in such cases?
Well, do use NPM installed scripts in a web you have to use some bundler/builder which adds additional layer package management in your application. This would allow using modules like in server side. After bundling your modules into single or multiple chunks include these in your web like any other JavaScript files.
There are multiple tools for such job:
http://browserify.org/
https://webpack.github.io/
http://rollupjs.org/
Loading JavaScript in the browser is usually done through a module system, for which there are several competing standards (AMD, CommonJS) and implementations. One such implementation is Browserify, which assembles (at build time) the scripts you actually require into a single bundle.js file, which you can then easily include in HTML. (Other module systems work differently, for instance by loading each file separately when it is first needed).

What is NPM and why do I need it? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
In the past, I made some websites with notepad for example, so we must create a folder TREE and put into it a .htm file, and some folderS with stuff like Javascript, css ...
Maybe I don't understand what NPM really brings, because It seems to do the same thing but automated it ... is it just that ?
For example, why not just unpack a frameworks (e.g. Bootstrap or Kube) without use of NPM and so have folders ready to use ?
Help me to understand please because I'm near the crazy state with all this stuff ...
npm is a package manager for Node.js with hundreds of thousands of packages. Although it does create some of your directory structure/organization, this is not the main purpose.
The main goal, as you touched upon, is automated dependency and package management. This means that you can specify all of your project's dependencies inside your package.json file, then any time you (or anyone else) needs to get started with your project they can just run npm install and immediately have all of the dependencies installed. On top of this, it is also possible to specify what versions your project depends upon to prevent updates from breaking your project.
It is definitely possible to manually download your libraries, copy them into the correct directories, and use them that way. However, as your project (and list of dependencies) grows, this will quickly become time-consuming and messy. It also makes collaborating and sharing your project that much more difficult.
Hopefully this makes it more clear what the purpose of npm is. As a Javascript developer (both client-side and server-side), npm is an indispensable tool in my workflow.
NPM basically is the package manager for node. It helps with installing various packages and resolving their various dependencies. It greatly helps with your Node development. NPM helps you install the various modules you need for your web development and not just given you a whole bunch of features you might never need.
NPM is a Node Package Manager and it's use for
it is an online repository for the publishing of open-source Node.js
projects.
Command line utility to install Node.js packages, do version
management and dependency management of Node.js packages.
NPM is a node package manager. It is basically used for managing dependencies of various server side dependencies.
We can manages our server side dependencies manually as well but once our project's dependencies grow it becomes difficult to install and manage.
By using NPM it becomes easy, we just need to install NPM once for all dependencies.
npm is Node's package manager. It's a repository of hundreds of thousands of useful pieces of code that you may want to integrate with your Node project.
npm also has a command line tool that lets us easily install, manage and run projects.
Use npm to . . .
Adapt packages of code for your apps, or incorporate packages as they are.
Download standalone tools you can use right away.
Run packages without downloading using npx.
Share code with any npm user, anywhere.
Restrict code to specific developers.
Create Orgs (organizations) to coordinate package maintenance, coding, and developers.
Form virtual teams by using Orgs.
Manage multiple versions of code and code dependencies.
Update applications easily when underlying code is updated.
Discover multiple ways to solve the same puzzle.
Find other developers who are working on similar problems and projects.
READ MORE here
It stands for Node Package Manager

Categories