Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rachitbhasin/angular4-webpack-aot-starter
Angular 4, webpack and AOT seed project
https://github.com/rachitbhasin/angular4-webpack-aot-starter
angular angular-cli angular4 aot aot-compilation aot-loader certificate express http2 node-sass sass server-push spdy typescript webpack webpack2
Last synced: about 1 month ago
JSON representation
Angular 4, webpack and AOT seed project
- Host: GitHub
- URL: https://github.com/rachitbhasin/angular4-webpack-aot-starter
- Owner: rachitbhasin
- Created: 2017-03-27T12:06:17.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-08-03T12:49:00.000Z (over 7 years ago)
- Last Synced: 2024-10-15T16:22:36.409Z (about 1 month ago)
- Topics: angular, angular-cli, angular4, aot, aot-compilation, aot-loader, certificate, express, http2, node-sass, sass, server-push, spdy, typescript, webpack, webpack2
- Language: JavaScript
- Homepage:
- Size: 26.4 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular 4 Ahead-of-Time (AoT) Compilation
A minimal example using the Angular compiler cli to pre-compile component templates.
Node version
------------
```
6.x.x
```
Files & Directories
-------------------
```
build/ // contains results of AoT compilation
dist/ // contains final minified production artifacts
server/ // contains configuration files for express/spdy server
|__ certs // contains self-signed SSL certificates for https
main.js
src/
|__app/
|__index.html
|__main.aot.ts // entry point for production (AoT) builds
|__main.jit.ts // entry point for development (JiT) builds
|__polyfills.ts
```
Generating Production Artifacts
-------------------------------
Executing `npm run build` will:
1. Perform AoT compilation and output the results to the **./build** folder
2. Bundle and minify the app sources to the **./dist** folder
Serving Production Artifacts
----------------------------
The AOT build is served using express and spdy(http/2) with server push to load bundle.js and polyfills.js.
This requires self-signed SSL certificate to be created as the application is served over https.
1. Use the following commands to create a certificate.
2. Place the certificates in the **server/certs** folder
```
$ openssl genrsa -des3 -passout pass:x -out server.pass.key 2048
...
$ openssl rsa -passin pass:x -in server.pass.key -out server.key
writing RSA key
$ rm server.pass.key
$ openssl req -new -key server.key -out server.csr
...
Country Name (2 letter code) [AU]:IN
State or Province Name (full name) [Some-State]:Delhi
...
A challenge password []:
...
$ openssl x509 -req -sha256 -days 365 -in server.csr -signkey server.key -out server.crt
```
Executing `npm run server` will serve the app from the **./dist** folder over http/2.
NPM Commands
------------
|Command|Description|
|---|---|
|npm start|Start the webpack development server @ **localhost:3000**|
|npm run build|Perform AoT compilation; bunde and minify to **./dist** folder|
|npm run clean|Delete **./dist** & **./build** folders|
|npm run server1|Serve the production artifacts from **./dist** folder using HTTP1.1 @ http://localhost:3000 |
|npm run server2|Serve the production artifacts from **./dist** folder using HTTP2 @ https://localhost:3000 |
|npm run clean:build|Run in serial **npm run clean** and **npm run build**|
|npm run cbs1|Run in serial **npm run clean**, **npm run build** and **npm run server1**|
|npm run cbs2|Run in serial **npm run clean**, **npm run build** and **npm run server2**|