Giter VIP home page Giter VIP logo

independer / ind-angular-starter Goto Github PK

View Code? Open in Web Editor NEW
9.0 4.0 3.0 433 KB

Advanced Angular 2+ starter setup by www.independer.nl. Features ASP.NET Core, Angular 4, Multiple Angular apps, Angular Universal (server-side rendering), AOT compilation and more.

License: MIT License

C# 15.90% JavaScript 33.71% Batchfile 0.10% TypeScript 46.06% HTML 3.26% CSS 0.97%
angular webpack aot-compilation asp-net-core angular-universal typescript starter-project angular4

ind-angular-starter's Introduction

Build status

Advanced Angular Starter by www.independer.nl

Based on:

Features

  • ASP.NET Core
  • Angular
  • Angular Universal (server-side rendering)
  • Multiple Apps
  • Webpack 3
  • Typescript 2
  • AOT compilation
  • SASS
  • Webpack DLL support for fast builds in development mode
  • Lazy routes
  • @ngx-meta for SEO

Pre-requisites

  1. .NET Core SDK 1.1+
  2. Node.js 6+

Getting Started

  1. Clone this repository

  2. Restore .NET Core packages:

       dotnet restore
    
  3. Restore NPM packages:

       npm install
    
  4. Run the app using one the options:

    • From command-line

        npm run start:dev
      
    • From Visual Studio Code:

        Ctrl+Shift+B - runs default "build" task that in turn runs "npm run start:dev"
      
    • From Visual Studio:

        F5 - starts IIS Express development server.
      
  5. Navigate to http://localhost:5000 in a web browser

Other commands

Build Production Bundles

npm run build:prod

Build Server-Side Rendering Bundles

npm run build:server
npm run build:server:prod

CI build

This command will run TSLint, build all bundles in all configurations and run unit tests.

npm run ci

More commands

For even more commands, please see the "scripts" section of package.json.

Server-Side Rendering

Server-side rendering is enabled only when the page is requested by a search engine bot (based on User-Agent header) or if the URL contains ?_escaped_fragment_= (a legacy way for recognizing search engine bots, but we keep it because it is useful for testing).

In order to disable server-side rendering completely set ServerRendering/IsEnabled settings to true in appsettings.json:

{
  ...
  "ServerRendering": {
    "IsEnabled": true
  }
}

Additionally, in order for server-side rendering to work, we need to build the application bundles that can be executed on the server-side with NodeJS. To build the "server" bundles, the following commands can be used:

npm run build:server
npm run build:server:prod

So, to test the application with server-side rendering in Development mode, you need to run two commands:

npm run build:server && npm run start:dev

And similarly, to test the application with server-side rendering in Production mode:

npm run build:prod && npm run build:server:prod && npm run start:prod

ind-angular-starter's People

Contributors

davidwalschots avatar pglazkov avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.