ASP.Net Core plus manager pakietów npm

W tym wpisie pokaże jak dodać i skonfigurować manager pakietów npm w projekcie ASP.Net Core. Przy pomocy npm możemy w łatwy sposób zarządzać zewnętrznymi bibliotekami takimi jak jquery, bootstrap, font-awesome, flag-icon-css i wieloma innymi pakietami w naszym projekcie. Npm ułatwia wersjonowanie używanych pakietów, automatyczne pobieranie jak i aktualizacji do najnowszej wersji.

Przykład wykonałem na :

• Visual Studio 2017
• .Net Core 2.1
• js v10.6.0

W pierwszej kolejności należy dodać do projektu ASP.Net Core  plik package.json.

{
  "name": "my-sample-npm-app",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
  }
}

Następnie w Visual Studio otwieramy okno konsoli Menedżera pakietów Tools > NuGet Package Manager > Package Manager Console (upewnijmy się, że jesteśmy w projekcie, w którym chcemy dodać biblioteki npm).

W konsoli PM przechodzimy do folderu z aplikacją, następnie dodajemy pakiety. W przykładzie dodamy pakiet  flag-icon-css oraz font-awesome.

polecenie do przejścia do katalogu aplikacji (zamiast nazwy SampleNpm wstaw nazwę swojego projektu)

cd SampleNpm

polecenie do zainstalowania i dodanie pakietów do pliku package.json

npm install flag-icon-css --save

npm install font-awesome --save

w pliku package.json powinny pojawić  się dwa wpisy

"dependencies": {
  "flag-icon-css": "^3.0.0",
  "font-awesome": "^4.7.0"
}

Można również ręcznie wpisać zależności w pliku package.json i wykonać polecenie npm install. Zadeklarowane pakiety zostaną pobrane.

W ścieżce z projektem powstanie folder node_modules, który zawiera pobrane pakiety npm. Wyjściowym katalogiem dla aplikacji .Net Core jest katalog wwwroot, aby pobrane biblioteki były widoczne muszą być umieszczone w tym katalogu. Do przeniesienia pobranych pakietów wykorzystamy Gulpa.

W głównym katalogu w projekcie tworzymy plik gulpfile.js z poniższym kodem. Task npmscripts przekopiuje pakiety z sekcji dependencies z pliku package.json ze ścieżki  ~/node_modules/ do ~/wwwroot/nodemodules/.

var gulp = require("gulp"),
    rimraf = require("rimraf"),
    concat = require("gulp-concat"),
    cssmin = require("gulp-cssmin"),
    uglify = require("gulp-uglify");

var paths = {
    webroot: "./wwwroot/"
};

gulp.task("npmscripts", function () {
    var fs = require('fs');
    var json = JSON.parse(fs.readFileSync('./package.json'));
    var streams = [];

    for (var prop in json.dependencies) {
        console.log("Prepping Scripts for: " + prop);
        streams.push(gulp.src("node_modules/" + prop + "/**/*")
            .pipe(gulp.dest(paths.webroot + "nodemodules/" + prop)));  
    }   
});

Do pliku package.json dodajemy referencje do gulpa

"devDependencies": {
    "gulp": "3.9.1",
    "gulp-concat": "2.6.1",
    "gulp-cssmin": "0.1.7",
    "gulp-uglify": "2.0.1",
    "rimraf": "2.6.1"
  }

Przeinstalowanie pakiety wykonamy poleceniem npm:

npm install

Aby proces przenoszenia bibliotek był automatyczny za każdym uruchomieniem aplikacji do pliku csproj dodajemy wywołanie tasku gulp.

Teraz pakiety przy każdym uruchomieniu trafią do ścieżki ~/wwwroot/nodemodules/ można już z nich skorzystać na stronie wystarczy dodać linki, przykład poniżej.

Tak skonfigurowane pakiety npm można równie publikować na Azure. Przy publikacji pakiety zostaną przeniesione do katalogu ~\obj\Release\netcoreapp2.1\PubTmp\Out\wwwroot\nodemodules a następnie wgrane na serwer Azura.

Po zbudowaniu projektu nasz projekt powinien wyglądać następująco

Jeżeli pracujemy w systemie kontroli wersji GIT folder nodemodules należy wpisać do pliku .gitignore. Nie ma sensu wrzucać zewnętrznych bibliotek do repozytorium, zostaną one pobrane przy pierwszym uruchomieniu aplikacji.

Cały projekt przykładowej aplikacji SampleNpn można zobaczyć na GitHubie.

Istnieje również inny sposób skonfigurowania ścieżki do bibliotek noude_model przy wykorzystaniu middleware app.UseStaticFiles(options) skonfigurowanymi ścieżkami. Niestety ta wersja działa lokalnie w wersji developerskiej. Przy publikacji na Azure pliki zewnętrznych bibliotek nie zostaną wgrane na Azure.