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