Jeszcze jeden blog o programowaniu

Radosne twórczości leniwego programisty

Posts Tagged ‘npm

Ręczna instalacja Node.js i npm w Ubuntu

leave a comment »

Standardowa instalacja node.js w Ubuntu z dostępnych repozytoriów poprzez sudo apt-get install nodejs nie zawsze pozwala uzyskać nam najświeższą wersję. Dla Ubuntu 16.04 zapytanie o paczkę nodejs zwraca nam wersję 4.2.6:

 

Jednym słowem, smuteczek.
Po wejściu na stronę projektu nodejs.org w oczy rzucają się od razu 2 wersje: 8.9.4 (Long Time Support, stabilna i zalecana dla większości użytkowników) oraz 9.6.1 – Current – PRAWIE najświeższa z możliwych, bo są jeszcze tzw. Nightly Build dla ludzi z dużą ilością czasu wolnego :).

Jednym ze sposobów sprawdzenia wersji paczki zainstalowanej aktualnie w systemie – oczywiście o ile jest zainstalowana – jest:

My jednak chcielibyśmy korzystać z najświeższej stabilnej wersji – 8.9.4.

Z wcześniej podanej strony pobieramy archiwum i rozpakowujemy:

Rozpakowany katalog node-v8.9.4-linux-x64 wrzucamy na przykład do katalogu /opt/:

Opcjonalnie zmieniamy rekurencyjnie właściciela katalogów i plików w lokalizacji /opt/node-v8.9.4-linux-x64:

Może to być przydatne, gdybyśmy chcieli kiedyś w tym katalogu coś zapisywać (np. inne pliki binarne) oraz instalować pakiety z npm.
Pozostaje nam utworzyć dowiązania symboliczne:

Jeśli próba uruchomienia poleceń node i npm się nie powiedzie jest dość prawdopodobne, że te ścieżki nie są dodane do naszej zmiennej środowiskowej PATH. Może to być przydatne w przyszłości, gdy w katalogu bin znajdzie się więcej plików wykonywalnych.
Aktualną zawartość zmiennej PATH możemy wyświetlić poleceniem echo $PATH i aby rozszerzyć tą zmienną o nowe katalogi zmieniamy w pliku ~/.bashrc zmienną środowiskową:

Żeby wprowadzone zmiany w ramach ~/.bashrc odniosły skutek powinniśmy go „przeładować”: source ~/.bashrc

Przydatny okazać się może poniższy skrypt, który w sumie spina wszystko w całość i pozwala prześledzić wykonane akcje krok po kroku:

Written by Filip Górczyński

2018.02.26 at 17:00:00

Angular 5 i Font-Awesome

leave a comment »

Jedną z możliwości integracji font-awesome z Angular jest użycie gotowych paczek z repozytoriów npm. Przegląd kilku – oraz szybki rzut oka na datę publikacji ostatnich zmian w tych paczkach wyłonił `angular-font-awesome’. I o ile instrukcja instalacji dostępna jest na stronie repozytorium tej paczki – nie jestem zwolennikiem ponownego szukania samej nazwy paczki ani jak jej użyć.

Dla porządku tworzymy sobie czysty projekt w Angularze:

Instalujemy wybrane przez nas paczki (jako, że jestem zwolennikiem yarna to tego będę używał):

yarn add od razu załatwi nam sprawę dodania tych paczek z odpowiednimi wersjami do pliku package.json.

Dodajemy odpowiednie importy w pliku app.module.js:

oraz ładujemy style globalnie dla całej aplikacji w pliku .angular-cli.json w sekcji styles:

I to już wszystko – powinniśmy mieć możliwość korzystania z ikonek font-awesome w naszej aplikacji wrzucając do szablonu, przykładowo:

Bonus: Bulma CSS Framework

Wartym uwagi jest niewielki framework CSS – Bulma. Instalujemy odpowiednią paczkę (oczywiście nie jest to jedyny sposób instalacji):

W pliku .angular-cli.json dodajemy odpowiednią referencję do pliku CSS naszego frameworka, aby był dostępny globalnie w całej aplikacji:

I oczywiście aby zobaczyć, czy wszystko działa, uzupełniamy np.: app.component.html przykładowym szablonem:

Uruchamiamy serwer i weryfikujemy w przeglądarce, czy wszystko śmiga.

Całość kodu źródłowego dostępna jest też w repozytorium NG5-FontAwesome-Bulma-Boilerplate. Klonujemy (git clone git@github.com:filipgorczynski/NG5-FontAwesome-Bulma-Boilerplate.git), przechodzimy do katalogu projektu (cd NG5-FontAwesome-Bulma-Boilerplate), odpalamy yarn aby zainstalować zależności z package.json i startujemy serwer (ng serve).

Written by Filip Górczyński

2018.02.07 at 10:49:21

%d blogerów lubi to: