https://github.com/mcabreradev/vigilant-waffle
https://github.com/mcabreradev/vigilant-waffle
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/mcabreradev/vigilant-waffle
- Owner: mcabreradev
- License: mit
- Created: 2016-05-10T16:43:07.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2024-02-29T20:23:25.000Z (over 2 years ago)
- Last Synced: 2025-02-07T12:47:17.216Z (over 1 year ago)
- Language: TypeScript
- Size: 164 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Introduction
A seed project for Angular 2 apps using Sass. Derived from [mgechev/angular2-seed](https://github.com/mgechev/angular2-seed).
It is something similar to the Angular Quick Start but does the entire build with gulp.
`angular2-seed-sass` provides the following features:
- Allows you to painlessly update the seed tasks of your already existing project.
- Ready to go, statically typed build system using gulp for working with TypeScript.
- Production and development builds.
- Sample unit tests with Jasmine and Karma including code coverage via [istanbul](https://gotwarlost.github.io/istanbul/).
- End-to-end tests with Protractor.
- Development server with Livereload.
- Following the [best practices for your application’s structure](https://github.com/mgechev/angular2-style-guide).
- Manager of your type definitions using [typings](https://github.com/typings/typings).
- Has autoprefixer and sass-lint support.
- Basic Service Worker, which implements "Cache then network strategy".
- Sass-enabled styling.
# How to start
**Note** that this seed project requires node v4.x.x or higher and npm 2.14.7.
You must have `ts-node` installed as global. If you don't, use:
```bash
npm install -g ts-node
```
In order to start using seed:
```bash
git clone --depth 1 https://github.com/archfirst/angular2-seed-sass.git
cd angular2-seed-sass
# install the project's dependencies
npm install
# watches your files and uses livereload by default
npm start
# api document for the app
npm run docs
# dev build
npm run build.dev
# prod build
npm run build.prod
```
_Does not rely on any global dependencies._
# Table of Content
- [Introduction](#introduction)
- [How to start](#how-to-start)
- [Table of Content](#table-of-content)
- [Configuration](#configuration)
- [How to extend?](#how-to-extend)
- [Running tests](#running-tests)
- [Contributing](#contributing)
- [Directory Structure](#directory-structure)
- [Change Log](#change-log)
- [License](#license)
# Configuration
Default application server configuration
```javascript
var PORT = 5555;
var LIVE_RELOAD_PORT = 4002;
var DOCS_PORT = 4003;
var APP_BASE = '/';
```
Configure at runtime
```bash
npm start -- --port 8080 --reload-port 4000 --base /my-app/
```
# How to extend?
Visit the [Wiki page](https://github.com/mgechev/angular2-seed/wiki) of the project.
# Running tests
```bash
npm test
# Debug - In two different shell windows
npm run build.test.watch # 1st window
npm run karma.start # 2nd window
# code coverage (istanbul)
# auto-generated at the end of `npm test`
# view coverage report:
npm run serve.coverage
# e2e (aka. end-to-end, integration) - In three different shell windows
# Make sure you don't have a global instance of Protractor
# npm run webdriver-update <- You will need to run this the first time
npm run webdriver-start
npm run serve.e2e
npm run e2e
# e2e live mode - Protractor interactive mode
# Instead of last command above, you can use:
npm run e2e.live
```
You can learn more about [Protractor Interactive Mode here](https://github.com/angular/protractor/blob/master/docs/debugging.md#testing-out-protractor-interactively)
# Contributing
Please see the [CONTRIBUTING](https://github.com/mgechev/angular2-seed/blob/master/.github/CONTRIBUTING.md) file for guidelines.
# Directory Structure
```
.
├── LICENSE
├── README.md
├── gulpfile.ts <- configuration of the gulp tasks
├── karma.conf.js <- configuration of the test runner
├── package.json <- dependencies of the project
├── protractor.conf.js <- e2e tests configuration
├── src <- source code of the application
│ ├── home
│ │ └── components
│ ├── index.html
│ ├── main.ts
│ ├── shared
│ │ └── services
│ │ ├── name-list...
│ │ └── name-list...
│ └── sw.js <- sample service worker
├── test-main.js <- testing configuration
├── tools
│ ├── README.md <- build documentation
│ ├── config
│ │ ├── project.config.ts <- configuration of the specific project
│ │ ├── seed.config....
│ │ └── seed.config.ts <- generic configuration of the seed project
│ ├── config.ts <- exported configuration (merge both seed.config and project.config, project.config overrides seed.config)
│ ├── debug.ts
│ ├── manual_typings
│ │ ├── project <- manual ambient typings for the project
│ │ │ └── sample.pac...
│ │ └── seed <- seed manual ambient typings
│ │ ├── merge-stre..
│ │ └── slash.d.ts
│ ├── tasks <- gulp tasks
│ │ ├── project <- project specific gulp tasks
│ │ │ └── sample.tas...
│ │ └── seed <- seed generic gulp tasks. They can be overriden by the project specific gulp tasks
│ ├── utils <- build utils
│ │ ├── project <- project specific gulp utils
│ │ │ └── sample_util...
│ │ ├── project.utils.ts
│ │ ├── seed <- seed specific gulp utils
│ │ │ ├── clean.ts
│ │ │ ├── code_change...
│ │ │ ├── server.ts
│ │ │ ├── tasks_tools.ts
│ │ │ ├── template_loc...
│ │ │ ├── tsproject.ts
│ │ │ └── watch.ts
│ │ └── seed.utils.ts
│ └── utils.ts
├── tsconfig.json <- configuration of the typescript project (ts-node, which runs the tasks defined in gulpfile.ts)
├── tslint.json <- tslint configuration
├── typings <- typings directory. Contains all the external typing definitions defined with typings
├── typings.json
└── appveyor.yml
```
# Change Log
You can follow the [Angular 2 change log here](https://github.com/angular/angular/blob/master/CHANGELOG.md).
# License
MIT