IONIC 2 Boilerplate
A ionic 2 boilerplate for starting new projects. This boilerplate will follow the best practices for angular and ionic development.
Table of Contents
Features
- Ionic rc0
- Es-Lodash
- NVM
- BetterScripts for npm
- ENV variables from package.json injected automatically by rollup
- Continuous Integration with Gitlab CI
- Automatic apk
- Docker image
- Tests
- Unit tests with karma
- E2E tests with protractor
- Screenshot reporter for protractor
- Coverage with istanbul
- Gitlab badge (Use regexp:
All files(?:\s*\|\s*\d*\.?\d+\s*){3}\|\s*((\d*\.?\d+))\s*\|in Gitlab CI/CD pipelines to get coverage)
- Linting
- GIT
- Workflow with Commitizen
- Automatic changelog
- Automatic alignment of app version in config.xml from package.json through cordova hook
Roadmap
- Automatic ipa after CI through ionic package
- Documentation with typedoc (waiting a new release that supports ts 2.0)
Installation & Configuration
Pre-Install Commands
npm i -g cordova ionic
gem install scss_lint
ionic state restore
./node_modules/.bin/webdriver-manager update
Note: you should have ruby 2 installed to run scss-lint.
NPM scripts commands
| Task | Description |
|---|---|
dev |
run ionic serve |
build |
Full production build. Use --dev flag for dev build. |
release |
generate changelog based on commits |
push |
shortcut for git push origin master --follow-tags |
lint |
lint with tslint |
scss-lint |
lint scss |
test |
runs Karma test |
test:watch |
runs Karma test watching for edits (usefull for TDD) |
e2e |
runs e2e protractor tests |
e2e:interactive |
runs e2e protractor tests in interactive mode |
outdated |
search npm packages for outdated dependencies |
ios:dev |
build .ipa using dev environment vars |
ios:release |
build .ipa with production environment vars |
android:dev |
build .apk using dev environment vars |
android:release |
build .apk with production environment vars |
Tips
Optional Libraries
- Error logging: Sentry
- Database: PouchDB or Ionic-storage. Don't use localstorage as it can be deleted by OS to free memory.
- Time and Dates: MomentJs
- NGRX pattern/library if you plan to make a big app.
Git Workflow
- Optionally you can use Git flow
- If you want to bump the changelog, run "npm run release"
- This repo has a mirror repo in gitlab for CI after every push on master you will get automatically an .apk generated from CI.
- You should consider to write a shortcut in .bashrc for the following commands
Workflow:
git add .
npm run commit // this will run tslint + scss lint + commit
npm run push // this will run unit tests + push
Useful Links
Webstorm
- Set code style for typesript:
- {import} -> { import }
- import * from "lodash" -> import * from 'lodash'
- Set typescript settings to be used with the version inside node_modules instead of the bundled one (1.8)
- Don't activate typescript compiler.
- Enable tslint in settings
- Download scss lint plugin and enable it
Windows
- You should avoid Windows. I tried a lot of times and at the end found myself switching to a Mac VM or Hackintosh or Linux distro. The following tips are not resolutive but can help you set up a nice environment.
- Instead of windows terminal I used cmder.
- If you use Webstorm. Set terminal settings as follow -> "cmd.exe" /k ""%CMDER_ROOT%\vendor\init.bat""
- Remember to re-start webstorm every time you make a change to the terminal.
- npm install --global --production windows-build-tools //node-gyp fix
- Set webstorm to write with line endingds LF (mac os or unix)
- To avoid git warnings: git config core.autocrlf false
- e2e commands is not working on windows, because the python server can't be launched. As a workaround add START /B before python -m and remove & at the end of the line in package.json. Anyway you will have to kill manually the process every time after every execution.