The bower_components folder presented on ASP.NET 5 beta6 and earlier, but starting from beta7 bower_components folder doesn't exist anymore and bower packages located directly in the wwwroot/libs folder. And seems like this change breaks exportsOverride feature.
Is it possible to reduce the amount of unnecessary files in the lib folder using exportOverrides or some other approach?
In bower.json I have the following exportsOverride section:
"exportsOverride": {
"bootstrap": {
"js": "dist/js/*.*",
"css": "dist/css/*.*",
"fonts": "dist/fonts/*.*"
}
}
in the wwwroot folder I expected to see the only files defined in the exportsOverride as it was in previous versions, but I see everything there:
Hiya just to add my 2 pence here, I was following this post to the letter http://shellmonger.com/2015/02/28/adding-bootstrap-to-your-empty-asp-net-mvc6-project/ and it wasn't working for me, but the post failed to mention that you have to change the .bowerrc file to something like;
{
"directory": "bower_components"
}
the default value is
{
"directory": "wwwroot/lib"
}
I've realized, that the issue is not in the ASP.NET or project template itself. The gulp task runner doesn't respect exportsOverride http://github.com/zont/gulp-bower/issues/30. The grunt can do it and gulp - not :(
Related
So, I'm new to ASP.NET MVC.
I have a web application in ASP.NET MVC and I'm trying to add react-bootstrap to it. It's already using React/ReactDOM.
I did
npm install --save react-bootstrap
and react-bootstrap is in the node_modules folder in the project.
I added react-bootstrap to the dependencies in the Package.json file.
"dependencies": {
......
"react-bootstrap": "^0.30.0"
},
I added react-bootstrap to the externals in the webpack.config.js file.
externals:
{
'react-bootstrap':
{
"var": 'ReactBootstrap',
web: 'ReactBootstrap',
root: 'ReactBootStrap',
commonjs2: 'ReactBootstrap',
commonjs: 'ReactBootstrap',
amd: 'ReactBoostrap'
},
.....
}
In the Layout.cshtml, I did added a script tag with the src attribute specifying the location of the reactbootstrap.js file in node_modules folder.
<script src="#Url.Content("~/node_modules/react-bootstrap/dist/react-bootstrap.min.js")"></script>
But when I do
import * as ReactBootStrap from 'react-bootstrap';
in the Dashboard.tsx file, it says it can't find the module.
What's missing?
Try this: npm i #types/react-bootstrap --save
So, I figured this out. To add another package, TypeScript requires the addition of a declaration file. These typically carry extension of .d.ts, and define prototypes of functions, classes, interfaces, etc. within the package you are adding. In the past, these needed to be created manually, but lately npm-based packages can be handled by new Typescript. There is also a repository of commonly-used Typescript declaration files (NuGet and DefinitelyTyped)
In the package manager console in Visual Studio, you do
Install-Package react-bootstrap.TypeScript.DefinitelyTyped
I am adding to my jhipster project a new dependency "tether-shepherd", and below was my steps:
bower install tether-shepherd --save
the dependency was successfully installed & added to 'bower.json', then to add it to 'index.html' I ran below command
gulp inject
the js files was successfully added to index.html but without any .css theme files, when I dig into installed bower components for installed dependency I found all themes there in 'bower_components/tether-shepherd/dist/css/' directory but not included to index.html file, to add it I manually placed its include below loading-bar.css in section but it is automatically removed when I re-run gulp inject!, and when I add it manually outside any block this was not good for production profile
any professional way to include and bundle css files located in bower_components?
This is probably because these CSS are not referenced in the main property of your dependencie's bower.json like here, see gulp/inject.js in your project to understand how they are used.
So, either you add an overrides.main property for these dependencies in your JHipster app's bower.json to add them like JHipster does for Bootstrap or you manage them manually and copy them to src/main/webapp/content/css, (you may have to add #import to your main.css I didn't test).
I appreciate this is not a real problem, just curious...
I'm using bower version 1.7.2 and all my projects so far have a .bowerrc file in the main project folder.
On my current project (through an oversight with .gitignore) I lost the .bowerrc file. However bower still works just fine and everything gets created where I want it.
I've read the docs on the Bower site and there is nothing to suggest that it will work without the .bowerrc file, and plenty on stackoverflow suggests that I need the .bowerrc file - ALSO - there isn't a .bowerrc file in the file tree between the project folder and root (although there are plenty around in folders that have different paths)
My question then is: does bower work ok without a .bowerrc file (e.g. defaulting to directory:bower_components) ? or is there a way to see which .bowerrc file my bower is using?
Many thanks for any reply, although completely understandable if you read this and move on, like I said, my problem is that it works, and I don't think it should...
As the docs specify, the .bowerrc file can be either in the project dir, the user home (i.e ~/.bowerrc - depends on your OS) or the root dir.
If you didn't put it anywhere Bower uses defaults as specified here.
And to answer your question - the default directory for bower packages is bower_components
Yes , I tested in my project with out .bowerrc I am able to install packages with bower.If we don't specify the .bowerrc file bower_components directory is creating in the root directly which is default. If we want "bower_components" to be in specific location that should be specified in the .bowerrc file.
For example if we want bower_components folder in "app" folder
bowerrc file should specify directory location : "directory": "app/bower_components",
But while downloading packages from git ,if you computer has any proxy settings that need to be configured in .bowerrc file. If we don't specify the proxy settings in .bowerrc we wont be able to download packages form git.
In an ASP.NET Core MVC website there is a .bowerrc file:
{
"directory": "wwwroot/lib"
}
And there is also a bower.config file:
{
"name": "ASP.NET",
"private": true,
"dependencies": {
"font-awesome": "4.5.0",
"startbootstrap-sb-admin-2": "1.0.8"
}
}
Should the project have both, does it need both? If so, what is the purpose of each?
Both files are in the root directory of the project.
The purpose of bower.json is to define all the dependencies your project have. The purpose of .bowerrc is to define optional configurations such as the location of the directory bower must work and other things (proxy, etc.).
To answer your question, normally .bowerrc can be optional but in your case, it looks like a specific directory is set for bower to install packages into.
I would like to use the SlickGrid plugin in my Rails 3 application.
I contains several JS and CSS files that I should include in my HTML page.
It is possible to put all the needed JS files in the public/javascripts directory and all the CSS files in the public/stylesheets directory. However, I don't like this solution because it breaks the plugin package files structure.
I would like to put all the plugin files in one place (I thought about vendor/plugins, is it a better place?), and include the needed files from there. Is that possible ?
What is the proper way to include the JS and CSS files when integrating a plugin ?
I think Jammit can help you accomplish what you're trying to do. Besides packaging, embedding, gzipping your assets, it also allows you to store javascript and stylesheets anywhere in your app. Images (if not embedded) could be a problem though.
Answer by #rubiii is also good, but since sprockets gem from version 2.10.0 supports bower, now it is extremely easy to integrate any js/css libraries. Also version management and updating as easy as typing bower install. Bower can be installed through nodejs npm install -g bower, include .bowerrc file in root of application with content inside:
{
"directory": "vendor/assets/components"
}
Then specify libraries in bower.json and run bower install
{
"name": "appName",
"version": "0.0.0",
"dependencies": {
"bootstrap": "~3.0.0",
}
}
After components installed, require files in application.js/application.css as usually. e.g.
*= require bootstrap