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.
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]
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.
Below are the scripts to dev, build, and test this seed project:
# use `yarn` to install the deps
$ yarn# 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.
# 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:
The MIT License (MIT)
Copyright (c) 2018 Burak Tasci