Skip to content

Commit

Permalink
Update Client-Side-Package-Management.md
Browse files Browse the repository at this point in the history
  • Loading branch information
ebicoglu committed Oct 26, 2021
1 parent de8e5d3 commit 41c262f
Showing 1 changed file with 10 additions and 10 deletions.
20 changes: 10 additions & 10 deletions docs/en/UI/AspNetCore/Client-Side-Package-Management.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,24 +22,24 @@ The benefit of a **standard package** is:

Depending on a standard package is easy. Just add it to your **package.json** file like you normally do. Example:

````
```
{
...
"dependencies": {
"@abp/bootstrap": "^1.0.0"
}
}
````
```

It's suggested to depend on a standard package instead of directly depending on a third-party package.

#### Package Installation

After depending on a NPM package, all you should do is to run the **yarn** command from the command line to install all the packages and their dependencies:

````
```
yarn
````
```

Alternatively, you can use `npm install` but [Yarn](https://classic.yarnpkg.com/) is suggested as mentioned before.

Expand Down Expand Up @@ -69,7 +69,7 @@ The **startup templates** are already configured to work all these out of the bo

A module should define a JavaScript file named `abp.resourcemapping.js` which is formatted as in the example below:

````js
```js
module.exports = {
aliases: {
"@node_modules": "./node_modules",
Expand All @@ -83,30 +83,30 @@ module.exports = {

}
}
````
```

* **aliases** section defines standard aliases (placeholders) that can be used in the mapping paths. **@node_modules** and **@libs** are required (by the standard packages), you can define your own aliases to reduce duplication.
* **clean** section is a list of folders to clean before copying the files. Glob matching and negation is enabled, so you can fine-tune what to delete and keep. The example above will clean everything inside `./wwwroot/libs`, but keep any `foo.txt` files.
* **mappings** section is a list of mappings of files/folders to copy. This example does not copy any resource itself, but depends on a standard package.

An example mapping configuration is shown below:

````js
```js
mappings: {
"@node_modules/bootstrap/dist/css/bootstrap.css": "@libs/bootstrap/css/",
"@node_modules/bootstrap/dist/js/bootstrap.bundle.js": "@libs/bootstrap/js/",
"@node_modules/bootstrap-datepicker/dist/locales/*.*": "@libs/bootstrap-datepicker/locales/",
"@node_modules/bootstrap-v4-rtl/dist/**/*": "@libs/bootstrap-v4-rtl/dist/"
}
````
```

#### Using The Gulp

Once you properly configure the `abp.resourcemapping.js` file, you can run the gulp command from the command line:

````
```
gulp
````
```

When you run the `gulp`, all packages will copy their own resources into the **wwwroot/libs** folder. Running `yarn & gulp` is only necessary if you make a change in your dependencies in the **package.json** file.

Expand Down

0 comments on commit 41c262f

Please sign in to comment.