Introduction

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:

Full include from Minko Gechev's angular2-seed.
Express Express Node.js server for production/development build API.
PM2 daemon for a server running.
Nginx configuration file for your server.

Fast start

For Angular 2 development information and wiki, look here:

Angular2-Seed Wow wow it's our parent :)
Angular2-Seed-WIKI Wiki Information about Seed!
Angular2-Seed-Advanced It's a Nathan's Walker child seed for multi-platform Angular2 apps.

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

About Redis.
Download and install latest stable version of Redis.
Documentation about Redis.

Redis Start

After installation we need to start our server:

# start server
$ src/redis-server

Redis More Settings + Daemonize

Redis Persistence
Redis More Properties

MongoDB

In progress

MySQL

In progress

Contributors


mgechev	ludohenin	d3viant0ne	Shyam-Chen	tarlepp	NathanWalker


TheDonDope	nareshbhatia	hank-ehly	Nightapes	kiuka	vyakymenko


jesperronn	njs50	aboeglin	gkalpak	ryzy	sfabriece


pgrzeszczak	eppsilon	e-oz	natarajanmca11	jerryorta-dev	JayKan


larsthorup	domfarolino	JakePartusch	LuxDie	tsm91	juristr


JohnCashmore	ouq77	gotenxds	gvsdan	evanplaice	hAWKdv


c-ice	markharding	ojacquemart	tiagomapmarques	devanp92	turbohappy


jvitor83	troyanskiy	Bigous	ip512	Green-Cat	Yonet


TuiKiken	yassirh	amaltsev	taguan	sonicparke	brendanbenson


brian428	briantopping	ckapilla	cadriel	dszymczuk	dstockhammer


dwido	totev	nosachamos	koodikindral	Falinor	allenhwkim


hpinsley	jeffbcross	johnjelinek	justindujardin	lihaibh	Brooooooklyn


tandu	nulldev07	daixtrose	mjwwit	ocombe	gdi2290


typekpb	philipooo	redian	alexweber	robbatt	robertpenner


sclausen	heavymery	tapas4java	vincentpalita	Yalrafih	billsworld


blackheart01	butterfieldcons	danielcrisp	edud69	jgolla	rossedfort


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

kaiserdan/angular2-seed-express