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

Alternatives To Universal
Select To Compare

Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,156,493
Typescript (305,687
Angular (55,116
Webpack (23,943
Scss (23,368
I18n (4,934
Server Side Rendering (4,209
Seo (3,400
Ngx (2,503
Angular Cli (2,306
Isomorphic (1,705
Lazy Loading (1,468
Ngrx (1,374
Tslint (1,164
Hmr (1,050
Aot (715