kekewind/universal

Seed project for Angular Universal apps featuring Server-Side Rendering (SSR), Webpack, CLI scaffolding, dev/prod modes, AoT compilation, HMR, SCSS compilation, lazy loading, config, cache, i18n, SEO, and TSLint/codelyzer

universal

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:

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

You can view the live app at http://universal.buraktasci.com.

Table of contents:

• Getting started
  • Installation
  • Setting up upstream repository
  • Development and builds
• Contributing
• License

Getting started

Installation

You can install universal by simply forking the repo:

# clone the repo
$ git clone https://github.com/fulls1z3/universal.git [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 https://github.com/fulls1z3/universal.git

# verify the upstream repo specified for your fork
$ git remote -v
origin    https://github.com/YOUR_USERNAME/[your-fork-repo].git (fetch)
origin    https://github.com/YOUR_USERNAME/[your-fork-repo].git (push)
upstream  https://github.com/fulls1z3/universal.git (fetch)
upstream  https://github.com/fulls1z3/universal.git (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.

Build

# 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

Contributing

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

• Issue guidelines
• Contributing guidelines
• Coding rules
• Change log

Thanks to

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

License

The MIT License (MIT)

Copyright (c) 2018 Burak Tasci