Check out the Demo App!

Quick Start

$ [sudo] npm install -g yo generator-goatstack
$ mkdir [dirName] && cd [dirName]
$ [sudo] yo goatstack [name?]
$ # [sudo] mongod in another terminal!
$ [sudo] npm start
$ # dev environment served to http://localhost:1701

What's new? v2.x

• SystemJS => Webpack
  • client-side and server-side bundling with Webpack
  • removal of gulp task runner / moved to npm scripts
  • simplified config folder structure
• Expanded the GOAT universe (client-side demo)
  • explore the depths of the ocean to learn more about the stack
  • mobile compatable

Future updates

• Server-side render with Angular2 Universal

Documentation Wiki

• Home
• FAQ
• Dev-Tools
• NPM Scripts
• Client Side Docs
• Server Side Docs
• End to End Testing
• Client Side Testing
• Server Side Testing

For more information about the stack click here

---

Why GOAT-stack?

Problem

1. Initial page load speed

• 40% of users leave a webpage that takes more than 3 seconds to load

2. Scaleable resources

• If an App's resources cannot scale with real time user traffic it will crash during traffic spikes, and be wasteful when there is low user activity

3. Scaleable Architecture

• If a program's dataflow is not structured conicously a once easily managed program made of 10,000 lines of code becomes a hinderance once it reaches 100,000 lines of code. Data flows become unruley and nested, and unintended dependencies occur in the application tree. This makes maintainability a mess, and refactoring a nightmare.

4. User to User real time interaction

• User interaction is a key success factor in regards to having a community adopt, and grow with your projet. The more seamless user interaction is with your website, and with each other, the better chance the project has at success.

Solution

1. Initial page load speed

• The GOAT stack capitilizes on Angular2's Ahead-of-Time server-side compilation. Having the server do the heavy lifting at build time allows us to serve pre-compiled views for the client to load. This dramatically decreases initial load time.

2. Scaleable resources

• MongoDB fits the developer paradigm very well. with proper indexing and schema design database response times will be linear, or consant. Also, the capability of sharding removes the bottle-neck of datasize.

3. Scaleable Architecture

• Immmutable makes app data predictable at any scale, and redux makes dataflow manageble by eliminating many-to-many relationships, this completely removes tangled nests of components, making them more modular. Redux places the entire app's state tree in one focal area which is the store.

4. User to User real time interaction

• Angular2's two way data binding and Socket.io is an effective combination. Two way data binding allows real time interaction between website and client without the need to reload pages. Socket.io takes this one step further and automatically updates changes on every connected device in real time without the need to refresh the browser. This feature can be narrowed or widened.

Follow the GOAT

If you like our Fullstack make sure to stay informed and get involved!

Follow us on Facebook page to receive the latest news and updates!

If you end up not liking the GOAT Stack, that's ok too! Please drop by our Reddit page and tell us why! We're always interested in new points of view, even the greatest can get better!

Required Technologies for your Development Environment

• typescript
• nodejs
• mongodb
• Your favorite browser (Chrome is prefered because of Devtools)
• Redux DevTools for Google Chrome

Installation

Windows

1) Install Git

• Note: You may need to configure system PATH to appropriate git command

2) Install NodeJS

• Note: You may need to configure system PATH to appropriate node command

3) Install MongoDB

• Note: You may need to configure system PATH to appropriate mongod command

4) Install Python and C++ compiler

• Note: Installing Visual Studios Community will be a sufficiant compiler
  • if you do not want the full blown Visual Studios IDE then you can also download a standalone version of Visual Studio's build tools here
  • Make sure to configure npm to use the correct c++ compiler using the following command npm config set msvs_version 2015 2015 is the version linked above, replace this number with your version if it differs. If you still have issues during npm install follow the install instructions here for node-gyp.

5) Clone and Run

$ npm install -g yo generator-goatstack
$ mkdir GOATstack && cd GOATstack
$ yo goatstack [name?]
$ # mongod in another terminal!
$ npm start
$ # dev environment served to http://localhost:1701

Linux

1) Install Git

$ sudo apt-get install git

2) Install NodeJS

$ curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
$ sudo apt-get install -y nodejs

or 7.x

$ curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -
$ sudo apt-get install -y nodejs

3) Install MongoDB

4) Clone and Run

$ sudo npm install -g yo generator-goatstack
$ mkdir GOATstack && cd GOATstack 
$ sudo yo goatstack [name?]
$ # sudo mongod in another terminal!
$ sudo npm start
$ # dev environment served to http://localhost:1701

Note: npm needs to be elevated with sudo, otherwise child_process will throw errors and/or webpack-dev-server will not serve.

Deploying to Heroku

Make sure you have Heroku Toolbelt installed.

1) Login with your Heroku credentials

$ heroku login

2) Run the gulp task

$ [sudo] npm run deploy:heroku

Yo Generator Project here

Created By

• Jason Thomas
• Christopher Haugen