I just used create-react-app and ive been trying to use bootstrap. it doesnt work even after I npm install it.what should i do step by step This is my app do i need to write a "import" line
Go to this link on your browser https://react-bootstrap.github.io/getting-started.html
Copy the bootstrap CDN link under the stylesheet section and add it to you index.html file in your your project.
Yes, you do need to reference the files in your app. You can add the necessary <link .../> and <script ...></script> tags in your index.html file.
You could also look into using something like the react-bootstrap npm package instead.
Related
I want to add the cropper functionality using the data modal, but I could not even select the file from the data modal.
I tried using the yarn install command and webpacker but javascript is not adding to the corresponding page.
Add the cropperjs using yarn's add command and then import your necessary functions from the node_modules you have installed. Also, include CSS files from the node_modules, otherwise there might be some issues related to the styling.
I'm trying to integrate adminLTE with vue.
I created a a new app with vue create admin-cli
Then I did npm install admin-lte --save as stated here: https://adminlte.io/docs/2.4/installation
Now npm downloads everything to node_modules/admin-lte
I don't really know how to integrate adminLTE with the vue app. I guess I could just copy every file I need to the assets folder but I'd like to use some tool to spare me the job.
From a vue component (App.vue for example) I can do like this
<img alt="Avatar" src="~admin-lte/dist/img/avatar.png">
The "~" will point to node_modules (https://vue-loader.vuejs.org/guide/asset-url.html#transform-rules)
But I cant use it in public/index.html to include all the css and js dependencies of adminLTE.
I think I have to configure webpack to copy all the needed dependencies, but I don't know how to achieve it.
just use this
It is an Admin LTE based on Vue.
I recently started using NPM, but I don't understand how the files in node_modules are added to my index.html.
Case 1: CDN
For example, if I want to use jQuery via CDN, it is so simple! I add the CDN link to a <script> tag on my index.html file and $ is immediately available.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$('body').css('background','red');
});
</script>
</body>
</html>
Case 2: NPM
Now I'm trying to use node modules and npm rather than CDNs. I have done the following:
Created package.json by using npm init --yes
Installed the jQuery package with npm install jquery --save
Now, my project folder looks like this:
I have removed the script tag with the link to the jQuery CDN from index.html, but I don't understand how to add jQuery from node_modules?
I am doing this on a browser.
CDN
Use CDN if you are developing a website that will be accessible by public internet users.
CDN Benefits:
Will be cached on most browsers because it's used by a lot of other websites
Reduce the bandwidth
check for more benefits here
NPM
npm is a great tool to manage dependencies in your app using a module bundler.
Example:
assume using a webpack module bundler and jQuery is installed
import $ from 'jQuery'
...
var content = $('#id').html();
but the browser does not understand the import statement so you have to transpile the code with Webpack commands, the bundler will check all the used dependencies and bind them in a single file without any dependencies problems.
Useful links: Getting started with webpack
in addition to above, npm install packages to local also:
let your local IDE provide code intellisense and type-checking;
provide source code for (Webpack) bundling, which combines all the JavaScript files to be a (minified) single file, so no dependencies.
I might have misunderstood your question... But can't you just add this line to your index.html file?
<script src="node_modules/jquery/dist/jquery.min.js"></script>
I think you want to host jQuery yourself and use it within a web app running in the browser.
If so, you need to host this file - make it downloadable via the same web server you are using to host index.html.
If you are using Express, you might do something like this on the server side:
app.use('jquery', express.static(__dirname + '/node_modules/jquery/dist/'));
And then reference the file in index.html:
<script src="/jquery/jquery.js"></script>
See Express' manual for serving static files.
If you're not using Express, you need to consult your web server's stack manual. No way to guess unfortunately - I gave an Express.js example because this is probably the single most popular package like that for node.js.
It won't be "filed" unless you link the js file in your template (replacing the CDN one). A bundler output or your compiled and public js file needs to be linked instead of the CDN link URI.
I install angular via npm and in my public/index.html I do
<script src="/node_modules/angular/angular.js"></script>
And it's 404 in chrome console, any clue how can I include the script properly?
Your node_modules folder is very likely not publicly accessible.
You have different options to solve this, including
bundling your angular library with your code into a single script file, e.g. using webpack,
placing the angular.js file in the public folder next to your index.html and embedding it from there and
loading the angular library from a CDN, e.g.:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
Which option is the most suitable depends heavily on your use case.
I recommend to use a CDN to load AngularJS in your project:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
Recommend Reading: Why use a Content Delivery Network (CDN)?
I made a gulpfile to setup a front-end development working environment.
Here is how it works:
The script grabs Bower packages defined in bower.json and outputs in to the /public folder the main files of every installed package, js and css in their respective production folders (/public/js) (/public/css).
The scripts also starts a watch task on all files, css, js and html files and whenever I save those files on the development folder (/src) their /public counterparts will be updated in real-time.
This way i simply install packages locally with Bower and by running this gulpfile i will have the production files ready in my /public folder, but i need to link them!
As said, the missing part that I want the script to write links to those files in the head of my index.html, based on what packages I decided to install from Bower.
So for example, if I downloaded Bootstrap, I want the script to automatically inject in to the head of my html page the link to Bootstrap css and js files right before the body closing tag (ideally).
Here's my script on github, have a look at the README and at the gulpfile:
I don't know what approach and/or if there's a gulp plugin to use to achieve that, if someone can point me in the right direction i would appreciate very much. Thanks.
For this I currently use gulp-inject, works like a charm!
How about just using
gulp wiredep
Example:
Add Holder.js package to existing Yeoman/Bower/Gulp project.
bower install holderjs --save
This added it to the dependency array. After you need to get it added to your html by using
gulp wiredep
I was looking for this too. And it seems that gulp-processhtml plugin can fit for this task and/ or gulp-replace and/ or gulp-preprocess.