Giter Club home page Giter Club logo

angular2-seed-express's Introduction

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's 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
$ node app.server.dev.js

# ren 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 moe
$ node app.server.dev.js

Daemonize Server

For daemonize i propose to uze PM2.

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

# restart 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

Contributors

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

Change Log

You can follow the Angular 2 change log here.

License

MIT

angular2-seed-express's People

Contributors

aboeglin avatar aegyed91 avatar ashishmondal avatar dmitryefimenko avatar domfarolino avatar e-oz avatar eppsilon avatar gkalpak avatar hankehly avatar henetiriki avatar jesperronn avatar joshwiens avatar juristr avatar jvitor83 avatar kiuka avatar larsthorup avatar ludohenin avatar luxdie avatar mgechev avatar nareshbhatia avatar natarajanmca11 avatar nathanwalker avatar nightapes avatar pgrzeszczak avatar ryzy avatar sfabriece avatar shyam-chen avatar tarlepp avatar thedondope avatar vyakymenko avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.