Awesome Open Source
Awesome Open Source


CircleCI coverage Code Quality: JavaScript Total Alerts Greenkeeper badge Join the chat at

Please support this project by simply putting a GitHub star. Share this library with friends on twitter and everywhere else you can.

universal is a seed project for Angular Universal apps following the common patterns and best practices in file and application organization, providing the following features:

  • [x] Providing a seed project using the Angular framework.
  • [x] NEW: Extending workspace/monorepo capabilities by Nx!
  • [x] Includes ngrx-powered CRUD feature tutorial.
  • [x] Compiling bundles for both browser (SPA) and server (Angular Universal) platforms.
  • [x] Rebased on Angular CLI to focus on features and development productivity, not on build tools.
  • [x] Customizable webpack configuration via @angular-builders.
  • [x] Using the modern UI components of Angular Material.
  • [x] Dynamic responsive layouts via flex-layout.
  • [x] Built-in Hot Module Replacement to save valuable development time.
  • [x] Development, staging and production modes.
  • [x] Performing AoT compilation for rapid page loads on staging/production builds.
  • [x] Tree-shaking and minifying the production builds using Angular Devkit.
  • [x] Cross-browser SCSS with autoprefixer and browserslist.
  • [x] stylelint-config-standard as configuration preset for stylelint and custom rules to standardize stylesheets.
  • [x] Transferring server responses on client bootstrap to prevent app flickering with native TransferState`.
  • [x] Deferring initialization of modules via Lazy loading.
  • [x] Uses ngrx/store for state management.
  • [x] NEW Uses ngrx/entity state adapter to manipulate and query entity collections.
  • [x] NEW Uses ngrx/effects side effect model to to model event sources as actions.
  • [x] NEW Uses unionize for boilerplate-free functional sum types.
  • [x] Uses ngx-config for configuration management.
  • [x] Uses ngx-auth for basic JWT-based authentication (w/Universal support).
  • [x] Uses ngx-cache for application-wide caching.
  • [x] Uses ngx-translate for i18n support.
  • [x] Uses ngx-meta for SEO (title, meta tags, and Open Graph tags for social sharing).
  • [x] Uses ngx-perfect-scrollbar for scrollbars.
  • [x] Vendor-agnostic analytics via angulartics2.
  • [x] Unit tests with Jest, including code coverage.
  • [x] Seamless integration with CircleCI continuous integration and delivery platform.
  • [x] angular-tslint-rules as configuration preset for TSLint and codelyzer.

You can view the live app at

Table of contents:

Getting started


You can install universal by simply forking the repo:

# clone the repo
$ git clone [your-project-name]
$ cd [your-project-name]

Setting up upstream repository

Once you have cloned the repo, you can follow these steps to allow sync changes made in this repo with your fork:

# set up `origin`
$ git remote set-url origin [your-fork-repo]

# set up `upstream` to sync future changes
$ git remote add upstream

# verify the upstream repo specified for your fork
$ git remote -v
origin[your-fork-repo].git (fetch)
origin[your-fork-repo].git (push)
upstream (fetch)
upstream (push)

# initial push for the fork
$ git push

Now, you can create a new directory (ex: src/app/shared) to build your codebase out, while benefiting from the client framework located at the src/app/framework directory.

In order to merge the latest upstream changes, simply follow:

# fetch the latest upstream
$ git fetch upstream

# merge the upstream changes
$ git merge upstream/master

then handle any conflicts, and go on with building your app.

Development and builds

Below are the scripts to dev, build, and test this seed project:

Install dependencies

# use `yarn` to install the deps
$ yarn

Development server

# dev server
$ ng serve

# dev server (HMR-enabled)
$ ng serve --c hmr

# dev server (AoT compilation)
$ ng serve --prod

# dev server (SSR)
$ yarn start:ssr

# dev server (SSR & AoT compilation)
$ yarn start:ssr:prod

And then,

  • Navigate to http://localhost:4200/ for the SPA (browser) build.
  • Navigate to http://localhost:4000/ for the SSR (universal) build.

The app will automatically re-compile if you change any of the source files.


# development build
$ ng build

# production build
$ ng build --prod

# development build (SSR)
$ yarn build:ssr

# production build (SSR)
$ yarn build:ssr:prod

The build artifacts will be stored in the dist/ directory.

Running tests

# run unit tests
$ ng test


If you want to file a bug, contribute some code, or improve documentation, please read up on the following contribution guidelines:

Thanks to

  • JetBrains, for their support to this open source project with free WebStorm licenses.


The MIT License (MIT)

Copyright (c) 2018 Burak Tasci

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (70,927
typescript (12,049
angular (1,327
webpack (1,171
scss (754
cache (330
i18n (228
config (169
server-side-rendering (148
starter (147
seo (137
state (125
universal (111
isomorphic (108
angular-cli (91
lazy-loading (69
ngrx (63
hmr (46
seed (44
aot (33