angular2-seed-express editorconfig travis-ci karma npm

An Angular2 seed project with (Redis/MongoDB/MySQL), Express server and PM2 Daemon.

Introduction

Angular 2 Style Guide MIT license Build Status Dependency Status devDependency Status

Want to feel like a full-stack Angular 2 developer but know only Express?

This is an express seed project for Angular 2 apps based on Minko Gechev's angular2-seed. Include:

Fast start

For Angular 2 development information and wiki, look here:

git clone --depth 1 https://github.com/vyakymenko/angular2-seed-express.git
cd angular2-seed-express
# install the project dependencies
$ npm install
# watches your files and uses livereload by default
$ npm start
# api document for the app
# $ npm run build.docs

# dev build
$ npm run build.dev
# prod build
$ npm run build.prod

# run Redis
$ src/redis-server
# stop Redis
$ src/redis-cli
$ shutdown SAVE

# run Express server (keep in touch, only after `npm run build.prod` )
$ node app.server.prod.js
# or development
$ node app.server.dev.js

# run server in daemon mode
$ pm2 start app.server.prod.js

Need to know

Before starting development. Run you development server:

# run dev server
$ node app.server.dev.js

Express Server

Express server run for prod build.

# run Express server (keep in touch, only after `npm run build.prod` )
# keep in mind that prod build will be builded with prod env flag
$ node app.server.prod.js

# run Express server in dev mode
$ node app.server.dev.js

Daemonize Server

For daemonize your server I propose to uze PM2.

# before daemonize production server `npm run build.prod`
$ pm2 start app.server.prod.js

# restart only your project
$ pm restart <id>
# restart all project on daemon
$ pm2 restart all

# in cluster mode ( example 4 workers )
$ pm2 start app.server.prod.js -i 4

More details about PM2

How to configure my NginX

##
# Your Angular.io NginX .conf
##

http {
  log_format gzip '[$time_local] ' '"$request" $status $bytes_sent';
  access_log /dev/stdout;
  charset utf-8;

  default_type application/octet-stream;

  types {
    text/html               html;
    text/javascript         js;
    text/css                css;
    image/png               png;
    image/jpg               jpg;
    image/svg+xml           svg svgz;
    application/octet-steam eot;
    application/octet-steam ttf;
    application/octet-steam woff;
  }

  server {
    listen            3353;
    server_name       local.example.com;

    root app/;
    add_header "X-UA-Compatible" "IE=Edge,chrome=1";

    location ~ ^/(scripts|styles)/(.*)$ {
      root .tmp/;
      error_page 404 =200 @asset_pass;
      try_files $uri =404;
      break;
    }

    location @asset_pass {
      root app/;
      try_files $uri =404;
    }

    location / {
      expires -1;
      add_header Pragma "no-cache";
      add_header Cache-Control "no-store, no-cache, must-revalicate, post-check=0 pre-check=0";
      root app/;
      try_files $uri $uri/ /index.html =404;
      break;
    }
  }

  server {
    listen 3354;

    sendfile on;

    ##
    # Gzip Settings
    ##
    gzip on;
    gzip_http_version 1.1;
    gzip_disable      "MSIE [1-6]\.";
    gzip_min_length   1100;
    gzip_vary         on;
    gzip_proxied      expired no-cache no-store private auth;
    gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_comp_level   9;

    root dist/;

    location ~ ^/(assets|bower_components|scripts|styles|views) {
      expires     31d;
      add_header  Cache-Control public;
    }

    ##
    # Main file index.html
    ##
    location / {
      try_files $uri $uri/ /index.html =404;
    }
  }
}

You can look in source file here.

Express Configuration

src/server/index.js

var _clientDir = '../client'; // Dist prod folder.

app.server.dev.js

// Configure server Port ( keep in mind that this important if you will use reverse-proxy)
// Dev mode will give you only middleware.
// WARNING! DEPEND ON YOUR Angular2 SEED PROJECT API CONFIG!
/**
 * @ng2 Server Runner `Development`.
 */
require('./server')(9001, 'dev');

app.server.prod.js

// Configure server Port ( keep in mind that this important if you will use reverse-proxy)
// Prod mode give you middleware + static.
// WARNING! DEPEND ON YOUR Angular2 SEED PROJECT API CONFIG!
/**
 * @ng2 Server Runner `Production`.
 */
require('./server')(9000);

Reverse Proxy NginX Config Example

server {
    listen 80;

    # App Web Adress Listener
    server_name www.example.com example.com;

    location / {
        # Port where we have our daemon `pm2 start app.server.js`
        proxy_pass http://example.com:9000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Redis Download/Install

Redis Start

After installation we need to start our server:

# start server
$ src/redis-server

Redis More Settings + Daemonize

MongoDB

  • In progress

MySQL

  • In progress

Contributors

mgechev ludohenin d3viant0ne Shyam-Chen tarlepp NathanWalker
mgechev ludohenin d3viant0ne Shyam-Chen tarlepp NathanWalker
TheDonDope nareshbhatia hank-ehly Nightapes kiuka vyakymenko
TheDonDope nareshbhatia hank-ehly Nightapes kiuka vyakymenko
jesperronn njs50 aboeglin gkalpak ryzy sfabriece
jesperronn njs50 aboeglin gkalpak ryzy sfabriece
pgrzeszczak eppsilon e-oz natarajanmca11 jerryorta-dev JayKan
pgrzeszczak eppsilon e-oz natarajanmca11 jerryorta-dev JayKan
larsthorup domfarolino JakePartusch LuxDie tsm91 juristr
larsthorup domfarolino JakePartusch LuxDie tsm91 juristr
JohnCashmore ouq77 gotenxds gvsdan evanplaice hAWKdv
JohnCashmore ouq77 gotenxds gvsdan evanplaice hAWKdv
c-ice markharding ojacquemart tiagomapmarques devanp92 turbohappy
c-ice markharding ojacquemart tiagomapmarques devanp92 turbohappy
jvitor83 troyanskiy Bigous ip512 Green-Cat Yonet
jvitor83 troyanskiy Bigous ip512 Green-Cat Yonet
TuiKiken yassirh amaltsev taguan sonicparke brendanbenson
TuiKiken yassirh amaltsev taguan sonicparke brendanbenson
brian428 briantopping ckapilla cadriel dszymczuk dstockhammer
brian428 briantopping ckapilla cadriel dszymczuk dstockhammer
dwido totev nosachamos koodikindral Falinor allenhwkim
dwido totev nosachamos koodikindral Falinor allenhwkim
hpinsley jeffbcross johnjelinek justindujardin lihaibh Brooooooklyn
hpinsley jeffbcross johnjelinek justindujardin lihaibh Brooooooklyn
tandu nulldev07 daixtrose mjwwit ocombe gdi2290
tandu nulldev07 daixtrose mjwwit ocombe gdi2290
typekpb philipooo redian alexweber robbatt robertpenner
typekpb philipooo redian alexweber robbatt robertpenner
sclausen heavymery tapas4java vincentpalita Yalrafih billsworld
sclausen heavymery tapas4java vincentpalita Yalrafih billsworld
blackheart01 butterfieldcons danielcrisp edud69 jgolla rossedfort
blackheart01 butterfieldcons danielcrisp edud69 jgolla rossedfort
ultrasonicsoft inkidotcom
ultrasonicsoft inkidotcom

Wiki Contributors

Here are all the awesome guys who are helping to make the project's wiki even better!

37  Minko Gechev
22  Clayton K. N. Passos
15  Shyam-Chen
14  Vincent van Proosdij
 8  Christian Dobert
 8  Robert van Kints
 8  matthew harwood
 6  Ludovic HENIN
 5  Attila Egyed
 3  Stefan Schüller
 3  Patrick Hillert
 3  Ezequiel Cicala
 2  Nathan Walker
 2  Yannick Koehler
 2  Giovanni Candido da Silva
 2  Simon Hampton
 2  Cy Klassen
 2  Joshua Wiens
 2  Drake Wilson
 2  Dinsitro
 1  zcsongor
 1  BouncingBit
 1  Brian Kotek
 1  Chris Kapilla
 1  Dang Tung
 1  Eddie Sun
 1  Enrico Secondulfo
 1  Eugene Serkin
 1  Ishara Samantha
 1  Myrmex
 1  Pol Stafford
 1  Raphael Schmitt
 1  Sebastian Fuss
 1  Sebastien de Salvador
 1  The Ult
 1  graham
 1  kiuka
 1  Ankit Kamboj

Change Log

You can follow the Angular 2 change log here.

License

MIT

Related Repositories

angular2-education

angular2-education

A list of helpful material to develop using Angular ...

angular-seed

angular-seed

Extensible, reliable and modular starter project for Angular 2 (and beyond) with ...

Angular2-express-mongoose-gulp-node-typescript

Angular2-express-mongoose-gulp-node-typescript

AngularJS 2 (Updated to 2.4.1) Mean Stack application which uses Angular2, Gulp, ...

angular2-login-seed

angular2-login-seed

Seed app featuring Angular2, Node.js + Express, and OAuth login support via Pass ...

great-big-angular2-example

great-big-angular2-example

An example app built with Angular 2, Redux, Webpack, and Angular-CLI ...


Top Contributors

mgechev ludohenin vyakymenko d3viant0ne Shyam-Chen NathanWalker tarlepp Nightapes TheDonDope nareshbhatia kiuka hank-ehly daniru njs50 jesperronn robstoll sasikumardr aboeglin DmitryEfimenko eppsilon ryzy markwhitfeld gkalpak sfabriece jerryorta-dev pgrzeszczak e-oz natarajanmca11 larsthorup JohnCashmore

Releases

-   v.2.0.1 zip tar
-   v.2.0.0 zip tar
-   2.0.2 zip tar
-   2.0.0-rc.5 zip tar
-   2.0.0-rc.4 zip tar
-   2.0.0-rc.3 zip tar
-   2.0.0-rc.2 zip tar
-   2.0.0-rc.1 zip tar
-   2.0.0-rc.0 zip tar
-   2.0.0-beta.17 zip tar
-   2.0.0-beta.16 zip tar
-   2.0.0-beta.15 zip tar
-   2.0.0-beta.14 zip tar
-   2.0.0-beta.13 zip tar
-   2.0.0-beta.12 zip tar
-   2.0.0-beta.9 zip tar
-   2.0.0-beta.8 zip tar
-   2.0.0-beta.7 zip tar
-   2.0.0-beta.6 zip tar
-   2.0.0-beta.2 zip tar
-   2.0.0-beta.1 zip tar
-   2.0.0-beta.0 zip tar
-   2.0.0-alpha.55 zip tar
-   2.0.0-alpha.54 zip tar
-   2.0.0-alpha.53 zip tar
-   2.0.0-alpha.52 zip tar
-   2.0.0-alpha.51 zip tar
-   2.0.0-alpha.50 zip tar
-   2.0.0-alpha.49 zip tar
-   2.0.0-alpha.48 zip tar