i'm new in npm and i'm trying to migrate from an old logic like:
<head>
<script src="./assets/jquery-countdown/jquery.countdown.min.js?v=2.1"></script>
<script src="./assets/lazyload/jquery.lazy.min.js?v=1.7.9"></script>
<script src="./assets/jquery-blockui/jquery.blockUI.min.js?v=2.70.0"></script>
<script src="./assets/geonames/jeoquery_custom.js?v=0.5.1"></script>
...
</head>
<body>
....
To a logic using a unique file.js than can include all my modules inside "node_modules" folder created by npm.
But i don't understand how do this.
My server only support PHP. doesn't support node.js for example.
Node.js only installed on a local dev PC.
Any suggest or tutorial?
Related
I have Vue v2 SPA. This is standard application as it can be. Let it be hello-world from the documentation. Let's make it and build:
vue create hello-world
cd hello-world
yarn install
yarn build
But I got a requirement: the application must be embedded (by URL rewriting, not deployed) into another site:
Before the requirement: https://site1.come/
After the requirement: https://site2.come/path-toapp/ <- reverse proxy here rewrites the url site1.com
But application's build contains absolute paths for all assets:
$ cat dist/index.html
<!DOCTYPE html>
<html lang=en>
<head>
...
<title>hello-world</title>
<link href=/css/app.fb0c6e1c.css rel=preload as=style>
<link href=/js/app.042151d6.js rel=preload as=script>
<link href=/js/chunk-vendors.f0b6743d.js rel=preload as=script>
<link href=/css/app.fb0c6e1c.css rel=stylesheet>
....
It breaks third-party site's rewrites. Resource app.fb0c6e1c.css will be got from:
https://site2.come/css/app.fb0c6e1c.css
Instead of:
https://site2.come/path-toapp/css/app.fb0c6e1c.css
How can I solve the problem? I didn't find any relevant configuration in vue's documentation.
Of course I have a solution. I can rewrite URL's in CI's script with bash:
sed -i "s/\(src\|href\)=\//\1=/g" dist/index.html
But the solution above is a hack and cannot be supported by web developers. Because of this I'm looking for more significant (webpack-based for example) solution.
You need to create a vue.config.js file in your project root, and set the publicPath option:
module.exports = {
publicPath: '/path-toapp/'
}
I'm following this tutorial Add Loading Indicators to Your Vue.js Application to add NProgress to my Vue app. In the tutorial, it adds the following code to index.html:
<link href="https://unpkg.com/nprogress#0.2.0/nprogress.css" rel="stylesheet" />
<script src="https://unpkg.com/nprogress#0.2.0/nprogress.js"></script>
Due to security reasons, my organization prefers to install NProgress as a node module and reference that rather than using CDN. How do I do that?
Try this npm install nprogress --save
Follow the link for more information
Hope it helps.
I currently have mapbox.js#3.0.1 installed, which depends on leaflet#1.0.2. I want to npm install a leaflet plugin leaflet.markercluster#1.0.2, which requires leaflet 1.0.x (which I have through mapbox.js). How can I install leaflet.marketcluster and tell it to find leaflet using mapbox's dependency?
Leaflet is indeed already included within Mapbox.
So you should not have anything to do in particular to have Leaflet.markercluster plugin work with it.
Should you load those 2 libraries the "standard" way (i.e. through <script> tags in your HTML page), everything should work without issue:
<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
<script src='https://unpkg.com/leaflet.markercluster#1.0.3/dist/leaflet.markercluster.js'></script>
<link href='https://unpkg.com/leaflet.markercluster#1.0.3/dist/MarkerCluster.css' rel='stylesheet' />
<link href='https://unpkg.com/leaflet.markercluster#1.0.3/dist/MarkerCluster.Default.css' rel='stylesheet' />
Demo: http://plnkr.co/edit/HX6yYCvNEvv8rD0khIjG?p=preview
Now since you want to include Leaflet.markercluster through npm, I think you can simply have the lib code included in your bundle (e.g. through import "leaflet.markercluster", or whatever is required by your build engine), and the L.markerClusterGroup factory should be added without issue.
I copied my Angular 2 app on the Apache HTTP Server 2.4 in the htdocs folder, but it doesn't work.
index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Angular 2 app</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
If I try to open the index.html page in the browser, I see only the text "Loading...." in my browser.
The Angular 2 App is not displayed.
How can I fix this?
It works on my local environment right, where I am using Angular CLI. I need to find a way to make it work on the Apache HTTP Server 2.4.
The only thing I have to do locally is to run npm start.
you just need to add a point in the base href <base href="./">
You will need to create a Build if you are planning to run your app on a remote server. Use the 'ng build' command (stop npm start first). ng build will create a distributable build in the 'dist' folder in your project. You can copy the contents of this folder to your remote server.
First, install Angular CLI in your dev environnement (if not done already)
npm install -g angular-cli
Run this command to build a dist version of your project
ng build -prod
copy/paste the content of dist folder into the root of your local (or online) apache server
if you are using angular-cli follow this steps:
you need build your app for production run (this generate a folder with the name of your app) :
ng build -prod --output-path=[appname]-bh /appname/
copy your app folder into root apache server path : /var/www/html/
That's all
Regards,
Fernando.
There is no CDN for React-art library. So, I installed it via npm install react-art in the local asp.net project.
In the cshtml file where I use the ReactART object, I used the following script:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></Script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.20/require.js"></script>
<script src="..\..\node_modules\react-art\lib\reactart.js"></script>
But I can't get the reference to the ReactART object.
How can I consume react-art and it's dependencies?
You will need Browserify or Webpack to create js bundle with react-art. They both understand common.js require directive. Check out official example for more info.