Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/linx05/servicios-contables-web
https://github.com/linx05/servicios-contables-web
Last synced: 22 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/linx05/servicios-contables-web
- Owner: linx05
- License: mit
- Created: 2016-10-08T01:32:10.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-12-13T17:28:43.000Z (about 8 years ago)
- Last Synced: 2024-11-07T18:32:29.854Z (2 months ago)
- Language: JavaScript
- Size: 311 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
##Highly opinionated fork of [NG6-starter](https://github.com/AngularClass/NG6-starter) bolilerplate.
Includes:
* Bootstrap
* UI-Bootstrap
* Bootstrap Material
* Angular Loading Bar
* Authentication
* Token Interceptor with `Angular JWT`
* Token Storage with `Angular Storage`
* Route Middleware with `UI-Router`
* Global `lodash`, `jquery`,`socket-io`
---
---
# NG6 [](https://angularclass.com/slack-join) [](https://gitter.im/angularclass/NG6-starter?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
> The de facto starter repo for building scalable apps with [Angular](https://angularjs.org), [ES6](https://git.io/es6features), and [Webpack](http://webpack.github.io/)
This repo serves as a minimal starter for those looking to get up-and-running with Angular and ES6, using [Gulp](http://gulpjs.com/) and [Webpack](http://webpack.github.io/) for the build process.
**This seed is not a Yeoman generator.** It's a minimal starter with tasks for building the boilerplate. **These are its features**:
* The best practice in directory/file organization for Angular (allowing for infinite horizontal app scaling)
* A ready-to-go build system for working with [ES6](https://git.io/es6features)
* Tasks for generating additional boilerplate Angular components
* A full testing system in place
* [Stylus](https://learnboost.github.io/stylus/) support
**Check out the [JSPM version](https://github.com/angularclass/NG6-starter/tree/jspm)--an alternative to Webpack as an ES6 build system.**
> If you're looking for a preliminary [Angular 2](https://angular.io/) build, please use the [angular2-webpack-starter](https://github.com/angularclass/angular2-webpack-starter).
___
# Table of Contents
* [Walkthrough](#walkthrough)
* [Build System](#build-system)
* [File Structure](#file-structure)
* [Testing Setup](#testing-setup)
* [Getting Started](#getting-started)
* [Dependencies](#dependencies)
* [Installing](#installing)
* [Running the App](#running-the-app)
* [Gulp Tasks](#gulp-tasks)
* [Testing](#testing)
* [Generating Components](#generating-components)
* [Starter Kit Support and Questions](#starter-kit-support-and-questions)
# Walkthrough
## Build System
NG6 uses Gulp and Webpack together for its build system. Yes, you don't need Gulp if you're using Webpack. This is true if your build system is only responsible for file manipulation. However, ours is not.
`Webpack` handles all file-related concerns:
* Transpiling from ES6 to ES5 with `Babel`
* Loading HTML files as modules
* Transpiling stylesheets and appending them to the DOM
* Refreshing the browser and rebuilding on file changes
* Hot module replacement for transpiled stylesheets
* Bundling the app
* Loading all modules
* Doing all of the above for `*.spec.js` files as well
`Gulp` is the orchestrator:
* Starting and calling Webpack
* Starting a development server (yes, Webpack can do this too)
* Generating boilerplate for the Angular app
**Check out the [JSPM version](https://github.com/angularclass/NG6-starter/tree/jspm)--an alternative to Webpack as an ES6 build system.**
## File Structure
We use a componentized approach with NG6. This will be the eventual standard (and particularly helpful, if using Angular's new router) as well as a great way to ensure a tasteful transition to Angular 2, when the time is ripe. Everything--or mostly everything, as we'll explore (below)--is a component. A component is a self-contained concern--may it be a feature or strictly-defined, ever-present element of the UI (such as a header, sidebar, or footer). Also characteristic of a component is that it harnesses its own stylesheets, templates, controllers, routes, services, and specs. This encapsulation allows us the comfort of isolation and structural locality. Here's how it looks:
```
client
⋅⋅app/
⋅⋅⋅⋅app.js * app entry file
⋅⋅⋅⋅app.html * app template
⋅⋅⋅⋅common/ * functionality pertinent to several components propagate into this directory
⋅⋅⋅⋅components/ * where components live
⋅⋅⋅⋅⋅⋅components.js * components entry file
⋅⋅⋅⋅⋅⋅home/ * home component
⋅⋅⋅⋅⋅⋅⋅⋅home.js * home entry file (routes, configurations, and declarations occur here)
⋅⋅⋅⋅⋅⋅⋅⋅home.component.js * home "directive"
⋅⋅⋅⋅⋅⋅⋅⋅home.controller.js * home controller
⋅⋅⋅⋅⋅⋅⋅⋅home.styl * home styles
⋅⋅⋅⋅⋅⋅⋅⋅home.html * home template
⋅⋅⋅⋅⋅⋅⋅⋅home.spec.js * home specs (for entry, component, and controller)
```
## Testing Setup
All tests are also written in ES6. We use Webpack to take care of the logistics of getting those files to run in the various browsers, just like with our client files. This is our testing stack:
* Karma
* Webpack + Babel
* Mocha
* Chai
To run tests, type `npm test` or `karma start` in the terminal. Read more about testing [below](#testing).
# Getting Started
## Dependencies
Tools needed to run this app:
* `node` and `npm`
Once you have these, install the following as globals:
`npm install -g gulp karma karma-cli webpack`
## Installing
* `fork` this repo
* `clone` your fork
* `npm install -g gulp karma karma-cli webpack` install global cli dependencies
* `npm install` to install dependencies
## Running the App
NG6 uses Gulp to build and launch the development environment. After you have installed all dependencies, you may run the app. Running `gulp` will bundle the app with `webpack`, launch a development server, and watch all files. The port will be displayed in the terminal.
### Gulp Tasks
Here's a list of available tasks:
* `webpack`
* runs Webpack, which will transpile, concatenate, and compress (collectively, "bundle") all assets and modules into `dist/bundle.js`. It also prepares `index.html` to be used as application entry point, links assets and created dist version of our application.
* `serve`
* starts a dev server via `webpack-dev-server`, serving the client folder.
* `watch`
* alias of `serve`
* `default` (which is the default task that runs when typing `gulp` without providing an argument)
* runs `serve`.
* `component`
* scaffolds a new Angular component. [Read below](#generating-components) for usage details.
### Testing
To run the tests, run `npm test` or `karma start`.
`Karma` combined with Webpack runs all files matching `*.spec.js` inside the `app` folder. This allows us to keep test files local to the component--which keeps us in good faith with continuing to build our app modularly. The file `spec.bundle.js` is the bundle file for **all** our spec files that Karma will run.
Be sure to define your `*.spec.js` files within their corresponding component directory. You must name the spec file like so, `[name].spec.js`. If you don't want to use the `.spec.js` suffix, you must change the `regex` in `spec.bundle.js` to look for whatever file(s) you want.
`Mocha` is the testing suite and `Chai` is the assertion library. If you would like to change this, see `karma.conf.js`.
### Examples
It's always easier to learn something if you have an examples. Here is a list of repos which based on this starter:
- [TodoMVC Example App](https://github.com/AngularClass/NG6-todomvc-starter)
### Generating Components
Following a consistent directory structure between components offers us the certainty of predictability. We can take advantage of this certainty by creating a gulp task to automate the "instantiation" of our components. The component boilerplate task generates this:
```
⋅⋅⋅⋅⋅⋅componentName/
⋅⋅⋅⋅⋅⋅⋅⋅componentName.js // entry file where all its dependencies load
⋅⋅⋅⋅⋅⋅⋅⋅componentName.component.js
⋅⋅⋅⋅⋅⋅⋅⋅componentName.controller.js
⋅⋅⋅⋅⋅⋅⋅⋅componentName.html
⋅⋅⋅⋅⋅⋅⋅⋅componentName.styl // scoped to affect only its own template
⋅⋅⋅⋅⋅⋅⋅⋅componentName.spec.js // contains passing demonstration tests
```
You may, of course, create these files manually, every time a new module is needed, but that gets quickly tedious.
To generate a component, run `gulp component --name componentName`.
The parameter following the `--name` flag is the name of the component to be created. Ensure that it is unique or it will overwrite the preexisting identically-named component.
The component will be created, by default, inside `client/app/components`. To change this, apply the `--parent` flag, followed by a path relative to `client/app/components/`.
For example, running `gulp component --name signup --parent auth` will create a `signup` component at `client/app/components/auth/signup`.
Running `gulp component --name footer --parent ../common` creates a `footer` component at `client/app/common/footer`.
Because the argument to `--name` applies to the folder name **and** the actual component name, make sure to camelcase the component names.
# Starter Kit Support and Questions
> Contact us, anytime, regarding anything about this project.
* [Gitter: angularclass/NG6-starter](https://gitter.im/angularclass/NG6-starter)
* [Twitter: @AngularClass](https://twitter.com/AngularClass)
___
enjoy — **AngularClass**
[](https://angularclass.com)
##[AngularClass](https://angularclass.com)
> Learn AngularJS, Angular 2, and Modern Web Development from the best.
> Looking for corporate Angular training, want to host us, or Angular consulting? [email protected]
-----
#Node-Express-Mongo Guide
## Usage
Install `generator-node-express-mongo`:
```
npm install -g generator-node-express-mongo
```
Make a new directory, and `cd` into it:
```
mkdir my-new-project && cd $_
```
Run `yo node-express-mongo`, optionally passing an app name:
```
yo node-express-mongo [app-name]
```
Run `grunt` for building, `grunt serve` for preview, and `grunt serve:dist` for a preview of the built app.
## Prerequisites
* MongoDB - Download and Install [MongoDB](http://www.mongodb.org/downloads) - If you plan on scaffolding your project with mongoose, you'll need mongoDB to be installed and have the `mongod` process running.
## Supported Configurations
**Server**
* Database: `None`, `MongoDB`
* Authentication boilerplate: `Yes`, `No`
* oAuth integrations: `Facebook` `Twitter` `Google`
* Socket.io integration: `Yes`, `No`
## Generators
Available generators:
* App
- [node-express-mongo](#app) (aka [node-express-mongo:app](#app))
* Server Side
- [node-express-mongo:endpoint](#endpoint)
* Deployment
- [node-express-mongo:openshift](#openshift)
- [node-express-mongo:heroku](#heroku)
### App
Sets up a new Npde Express Mongo app, generating all the boilerplate you need to get started.
Example:
```bash
yo node-express-mongo
```
### Endpoint
Generates a new API endpoint.
Example:
```bash
yo node-express-mongo:endpoint message
[?] What will the url of your endpoint be? /api/messages
```
Produces:
server/api/message/index.js
server/api/message/message.spec.js
server/api/message/message.controller.js
server/api/message/message.model.js (optional)
server/api/message/message.seed.json (optional)
server/api/message/message.socket.js (optional)
###Openshift
Deploying to OpenShift can be done in just a few steps:
yo node-express-mongo:openshift
A live application URL will be available in the output.
> **oAuth**
>
> If you're using any oAuth strategies, you must set environment variables for your selected oAuth. For example, if we're using Facebook oAuth we would do this :
>
> rhc set-env FACEBOOK_ID=id -a my-openshift-app
> rhc set-env FACEBOOK_SECRET=secret -a my-openshift-app
>
> You will also need to set `DOMAIN` environment variable:
>
> rhc set-env DOMAIN=.rhcloud.com
>
> # or (if you're using it):
>
> rhc set-env DOMAIN=
>
> After you've set the required environment variables, restart the server:
>
> rhc app-restart -a my-openshift-app
To make your deployment process easier consider using [grunt-build-control](https://github.com/robwierzbowski/grunt-build-control).
**Pushing Updates**
grunt
Commit and push the resulting build, located in your dist folder:
grunt buildcontrol:openshift
### Heroku
Deploying to heroku only takes a few steps.
yo node-express-mongo:heroku
To work with your new heroku app using the command line, you will need to run any `heroku` commands from the `dist` folder.
If you're using mongoDB you will need to add a database to your app:
heroku addons:add mongolab
Your app should now be live. To view it run `heroku open`.
>
> If you're using any oAuth strategies, you must set environment variables for your selected oAuth. For example, if we're using **Facebook** oAuth we would do this :
>
> heroku config:set FACEBOOK_ID=id
> heroku config:set FACEBOOK_SECRET=secret
>
> You will also need to set `DOMAIN` environment variable:
>
> heroku config:set DOMAIN=.herokuapp.com
>
> # or (if you're using it):
>
> heroku config:set DOMAIN=
>
To make your deployment process easier consider using [grunt-build-control](https://github.com/robwierzbowski/grunt-build-control).
#### Pushing Updates
grunt
Commit and push the resulting build, located in your dist folder:
grunt buildcontrol:heroku
All of these can be updated with `bower update` as new versions are released.
## Configuration
Yeoman generated projects can be further tweaked according to your needs by modifying project files appropriately.
A `.yo-rc` file is generated for helping you copy configuration across projects, and to allow you to keep track of your settings. You can change this as you see fit.
## Testing
Running `grunt test` will run the client and server unit tests with karma and mocha.
Use `grunt test:server` to only run server tests.
## Environment Variables
Keeping your app secrets and other sensitive information in source control isn't a good idea. To have grunt launch your app with specific environment variables, add them to the git ignored environment config file: `server/config/local.env.js`.
## Project Structure
Overview
-── server
├── api - Our apps server api
├── auth - For handling authentication with different auth strategies
├── components - Our reusable or app-wide components
├── config - Where we do the bulk of our apps configuration
│ └── local.env.js - Keep our environment variables out of source control
│ └── environment - Configuration specific to the node environment
An example server component in `server/api`
thing
├── index.js - Routes
├── thing.controller.js - Controller for our `thing` endpoint
├── thing.model.js - Database model
├── thing.seed.json - JSON model seed
├── thing.socket.js - Register socket events
└── thing.spec.js - Test
## Contribute
When submitting an issue, please follow the [guidelines](https://github.com/yeoman/yeoman/blob/master/contributing.md#issue-submission). Especially important is to make sure Yeoman is up-to-date, and providing the command or commands that cause the issue.
When submitting a bugfix, try to write a test that exposes the bug and fails before applying your fix. Submit the test alongside the fix.
When submitting a new feature, add tests that cover the feature.
See the `travis.yml` for configuration required to run tests.
## License
[BSD license](http://opensource.org/licenses/bsd-license.php)