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
Related
I am building a new project in ASP.NET MVC integrated with the Angular 5 framework with the help of VS.NET 2017.
I was following this article https://juristr.com/blog/2018/01/ng-app-runtime-config/ to implement the environment based configuration.
I am new to angular framework. This article is saying to add some environment key-value pairs to the .angular-cli.json file. But my project does not have this file.
Now my doubt is where do i place this below code logic :-
{
"apps":[
...
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"staging": "environments/environment.staging.ts",
"prod": "environments/environment.prod.ts"
}
]
}
Please suggest.
This is because you are not using angular-cli.
Install angular-cli using the following command on the terminal
npm install -g #angular/cli
Because you are not using angular cli you will have to add several packages and dependencies manually in the package.json file.
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).
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.
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 :(
Hey I am trying to install a package into a custom 'admin' directory using composer.
Here is my JSON:
{
"name": "frontier/installer",
"description": "The best front end engineer package around",
"require": {
"aheinze/cockpit": "*"
},
"extra":{
"installer-paths":{
"admin": ["aheinze/cockpit"]
}
}
}
Now when I run composer install it all installs but defaults to vendor/aheinze/cockpit I cannot for the life of me figure out why.
Have done my research this should be the right code... any obvious errors?
Cheers.
I have implemented this composer plugin to install packages into user (custom) defined folders you can just include it in your composer.json, follow the example and tell me if you have more questions :)
https://github.com/mnsami/composer-custom-directory-installer
composer-custom-directory-installer
A composer plugin, to install differenty types of composer packages in custom directories outside the default composer default installation path which is in the vendor folder.
This is not another composer-installer library for supporting non-composer package types i.e. application .. etc. This is only to add the flexability of installing composer packages outside the vendor folder. This package only supports composer package types,
https://getcomposer.org/doc/04-schema.md#type
The type of the package. It defaults to library.
Package types are used for custom installation logic. If you have a package that needs some special logic, you can define a custom type. This could be a symfony-bundle, a wordpress-plugin or a typo3-module. These types will all be specific to certain projects, and they will need to provide an installer capable of installing packages of that type.
How to use
Include the composer plugin into your composer.json require section::
"require":{
"php": ">=5.3",
"mnsami/composer-custom-directory-installer": "1.1.*",
"monolog/monolog": "*"
}
In the extra section define the custom directory you want to the package to be installed in::
"extra":{
"installer-paths":{
"./monolog/": ["monolog/monolog"]
}
by adding the installer-paths part, you are telling composer to install the monolog package inside the monolog folder in your root directory.
As an added new feature, we have added more flexibility in defining your download directory same like the composer/installers, in other words you can use variables like {$vendor} and {$name} in your installer-path section:
"extra": {
"installer-paths": {
"./customlibs/{$vendor}/db/{$name}": ["doctrine/orm"]
}
}
the above will manage to install the doctrine/orm package in the root folder of your project, under customlibs.
Note
Composer type: project is not supported in this installer, as packages with type project only make sense to be used with application shells like symfony/framework-standard-edition, to be required by another package.
If you want to use the installer-paths option the package you want to be installed in a different path must require composer/installers.
In your case the aheinze/cockpit package doesn't require composer/installers as you can see in its composer.json at github.
Have a look at the composer documentation for custom paths and you see that it tells you:
Note: You cannot use this to change the path of any package. This is only applicable to packages that require composer/installers and use a custom type that it handles.
This means you are not able to change the install path of this specific package.
Anyway I don't see any necessity to install it into any different directory from the default vendor folder.
If you just need to put all packages under the "admin" directory, the best option is:
{
"config": {
"vendor-dir": "admin"
}
}
You can use the post-autoload-dump script to copy the package after install/dump-autoload:
"scripts": {
"post-autoload-dump": [
"cp -r vendor/aheinze/cockpit admin"
]
},
For install multiple packages in the same directory you can follow this structure
1- your path should be like this "modules/patched/{$name}"
2- and an array of any package that you want to move or install that same directory
"extra":{
"installer-paths": {
"modules/patched/{$name}": [
"drupal/signature_field",
"drupal/eck",
"drupal/auto_entitylabel"
]
}
The package or module should be in your require section as well.
"require": {
"composer/installers": "^1.0.24",
"drupal/auto_entitylabel": "2.x-dev",
"drupal/signature_field": "^1.0#RC",
"drupal/eck": "^1.0#alpha",
}