Zbudowanie szkieletu aplikacji webowej w jednym z popularnych framework’ów jest niezwykle proste, jeśli wykorzystamy dostępne generatory np. Yeoman, o którym pisałem w październiku. Poniżej w kilku krokach przedstawię przykład wykorzystania Yeoman, uruchomienia aplikacji i jej testów, a także zbudowanie paczki do umieszczenia na serwerze. Prosta aplikacja w AngularJS, którą zbudowałem, nazywa się IP calculator i jej głównym celem jest przeliczanie adresacji IP.
Instalacja Yeoman oraz generatora aplikacji w AngularJS Link to heading
$ npm install -g yo $ npm install -g generator-fountain-angular2
Uruchomienie generatora Link to heading
$ yo fountain-webapp
Uruchomienie aplikacji Link to heading
$ npm run serve > @ serve /Users/seba/Projects/js/angularjs/ip > gulp serve [21:56:13] Loading /Users/seba/Projects/js/angularjs/ip/gulp_tasks/browsersync.js [21:56:13] Loading /Users/seba/Projects/js/angularjs/ip/gulp_tasks/karma.js [21:56:13] Loading /Users/seba/Projects/js/angularjs/ip/gulp_tasks/misc.js [21:56:13] Loading /Users/seba/Projects/js/angularjs/ip/gulp_tasks/webpack.js [21:56:14] Using gulpfile ~/Projects/js/angularjs/ip/gulpfile.js [21:56:14] Starting 'serve'... [21:56:14] Starting 'webpack:watch'... ts-loader: Using [email protected] and /Users/seba/Projects/js/angularjs/ip/tsconfig.json [21:56:23] Time: 9168ms ... [21:56:23] Finished 'webpack:watch' after 9.21 s [21:56:23] Starting 'watch'... [21:56:23] Finished 'watch' after 154 ms [21:56:23] Starting 'browsersync'... [21:56:23] Finished 'browsersync' after 29 ms [21:56:23] Finished 'serve' after 9.39 s [BS] [BrowserSync SPA] Running... [BS] Access URLs: ------------------------------------- Local: http://localhost:3000 External: http://192.168.1.11:3000 ------------------------------------- UI: http://localhost:3001 UI External: http://192.168.1.11:3001 ------------------------------------- [BS] Serving files from: .tmp [BS] Serving files from: src
`` Uruchomienie testów Link to heading
$ npm run test:auto > @ test:auto /Users/seba/Projects/js/angularjs/ip > gulp test:auto [22:00:14] Loading /Users/seba/Projects/js/angularjs/ip/gulp_tasks/browsersync.js [22:00:14] Loading /Users/seba/Projects/js/angularjs/ip/gulp_tasks/karma.js [22:00:15] Loading /Users/seba/Projects/js/angularjs/ip/gulp_tasks/misc.js [22:00:15] Loading /Users/seba/Projects/js/angularjs/ip/gulp_tasks/webpack.js [22:00:15] Using gulpfile ~/Projects/js/angularjs/ip/gulpfile.js [22:00:15] Starting 'test:auto'... [22:00:15] Starting 'karma:auto-run'... ts-loader: Using [email protected] and /Users/seba/Projects/js/angularjs/ip/tsconfig.json ... Chrome 56.0.2924 (Mac OS X 10.12.3): Executed 29 of 29 SUCCESS (2.678 secs / 1.855 secs)
Zbudowanie aplikacji do umieszczenia na serwerze Link to heading
$ npm run build > @ build /Users/seba/Projects/js/angularjs/ip > gulp [22:49:24] Loading /Users/seba/Projects/js/angularjs/ip/gulp_tasks/browsersync.js [22:49:24] Loading /Users/seba/Projects/js/angularjs/ip/gulp_tasks/karma.js [22:49:25] Loading /Users/seba/Projects/js/angularjs/ip/gulp_tasks/misc.js [22:49:25] Loading /Users/seba/Projects/js/angularjs/ip/gulp_tasks/webpack.js [22:49:26] Using gulpfile ~/Projects/js/angularjs/ip/gulpfile.js [22:49:26] Starting 'default'... [22:49:26] Starting 'clean'... [22:49:26] Finished 'clean' after 15 ms [22:49:26] Starting 'build'... [22:49:26] Starting 'other'... [22:49:26] Starting 'webpack:dist'... ts-loader: Using [email protected] and /Users/seba/Projects/js/angularjs/ip/tsconfig.json [22:49:31] Finished 'other' after 4.88 s [22:49:55] Time: 28539ms Asset Size Chunks Chunk Names vendor-a96ac73feed584465431.js 1.06 MB 0 [emitted] vendor app-a96ac73feed584465431.js 1.14 MB 1 [emitted] app index-fda06395e49b6f452606f4ead775056a.css 359 bytes 1 [emitted] app index.html 671 bytes [emitted] ... Child extract-text-webpack-plugin: [22:49:55] Finished 'webpack:dist' after 29 s [22:49:55] Finished 'build' after 29 s [22:49:55] Finished 'default' after 29 s
Skrypty NPM albo zadania Gulp Link to heading
W zależności od upodobań można używać do uruchamiania czy testowania aplikacji skryptów NPM albo zadań Gulp. Poniżej krótka lista z podsumowaniem typów zadań:
npm run build- budowanie aplikacjinpm run serve- uruchomienie aplikacji na lokalnym komputerzenpm run serve:dist- uruchomienie zoptymalizowanej wersji aplikacji na lokalnym komputerzenpm run test- uruchomienie testów jednostkowym w Karmienpm run test:auto- uruchomienie testów jednostkowym w Karmie w trybie wykrywania zmian kodu (po zmianie w plikach testy automatycznie zostaną wykonane ponownie)
W przypadku Gulp będą to odpowiednio polecenia:
gulp or gulp buildgulp servegulp serve:distgulp testgulp test:auto