sifawm / angular-universal

Angular 6 Universal starter kit based on @angular/cli featuring Server-Side Rendering (SSR) and HMR on browser/server sides

NgUniversal

This project was generated with Angular CLI version 6.0.0-rc.5.

Demo

Live Demo is running on now.sh.

About

This starter kit contains all the minimal tooling and configuration you need to kick off your next universal Angular 6 project.

It combines @angular/cli and udk to won't have to write specific code for development purposes only.

Features

• angular 6 as universal web application platform
• module-map-ngfactory-loader as server side rendering of lazy routes
• angular/cli 6 as code scaffolder
• webpack 4 as module bundler
• node as server
• express as request handler
• udk-builder as architect builder
• ng-udkc as extreme live development container to reload all the things!
  • webpack/hot/poll to enable hmr on server side
  • webpack-hot-middleware (dynamically mounted on server) and @angularclass/hmr to enable hmr on browser side
  • watchpack to restart dev container when a metafile changed

Getting started

git clone https://github.com/enten/angular-universal my-project
cd my-project
npm install
npm start

Development server

Two different dev servers are provided:

• The universal dev server which enable SSR (build browser and server targets) ;
• The SPA dev server which is a webpack dev server (build browser target only).

SPA dev server can be useless (or "broken"): it depends on your server implementation.

Universal dev server

Run npm run dev (or npx ng-udkc) for an universal dev server. Navigate to http://localhost:4000/.

The app will automatically hot-reload on server and browser sides if you change any of the source files.

The server will automatically restart if a change occured in metafiles and metadirs defined in udk.container.js.

SPA dev server

Run npm run dev:spa (or npx ng serve --hmr) for a SPA dev server Navigate to http://localhost:4200/.

The app will automatically reload if you change any of the browser source files.

Note: the universal dev server provide an SPA mode too if you navigate to the index.html: http://localhost:4000/index.html.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run npm run build to build the project. The build artifacts will be stored in the dist/app directory.

Run npm run build:prod for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.