This package has been deprecated

    Author message:

    Deprecated

    @ampgular/schematics

    1.0.17 • Public • Published

    Angular 6 Prerender & Server Side Rendering Out of the box

    This repository is an extension of @schematics/angular including the universal side rendering tutorial steps in Angular.io and some helper methods to ease the use of Universal Server Side Rendering with Angular

    STATUS

    devOps

    semantic-release CircleCI npm version

    Main Features (Status 2018-06-09)

    build )
    spider
    seo
    deploy-static
    express-static
    deploy-dynmaic

    As per 09 June 2018 the major commands --build, --spider, --add-seo, --static, --express are already implemented.
    Next steps:
    18 June: Next features bunch (seo)
    01 July: Cli interface served with the package
    Medium Post explaining the features and the project

    Net yet production ready !!!!!

    Table of Contents

    How to Start

    • New to Angular
      If you just came to Angular I would suggest you start right away with the serve side rendered, being from begininng aware of the limitations will ensure you achieve a smooth server side render process and will give you the opportunity and follow the guide here. /* to be done */

    • I have already a Client App (classical ng app) In this case propably the best way to achieve a good and quick result is to focus on prerendering your app to a static site

    • I have already a Server Side Rendered App Then you have the big part of the job done, Our package can support you with helper methods...

      • If you want a prerender site, with help our commands the spider and static you can automatic prepare your site for deployment.

    Main Concepts

    Client APP

    A Client App is the classical Angular App, which will be bootstrapped and rendered in the browser. When we create with the CLI a ng new myAwesomeApp the result is a client app.

    • The user experience by first load is penalyzed because the user don´t see relevant content until app is bootstrapped.
    • The Google Bot (responsibile for crawling pages and ) will index the pages and process teh relevant structure data without problems as is able to wait the boostrapp phase.
    • Other search Bots (bing, ask,..etc) won´t be able to index the content as their result when visit the page is a empty <app-root></app-root>
    • Social Sharing of content Twitter, Fcebook, etc.. will be disable too.

    In Summary, if discovery by search boots,

    Server Side Rendered APP

    The Server Side Render process happen in a server environment (not in a browser) and return for each route the representation of the page as a html string. What we call then a Server Side Rendered App is an App which for each requested route have two parts.

    1. A html representation of page server rendered <app-root> <h1> I am a rendered APP</h1>....</app-root>
    2. The client App as described above which after bootstrap will take control and behave like a normal client app.

    The process by which the html 'screenshot' will be generated can be done dynamically 'on the fly' by the time the user request the page or prepared in advance for every route. The rendering in advance is also called "prerendering".

    Static Sites aka Prerendered Sites

    A prerendered site has for each to discover Route a htmldocument with the clien app (the same for every route) and the above mentioned html screenshoot which was p

    Server Side Rendered Sites

    Installation

    First download and install the schematics package: npm i @ampgular/schematics will install the reuired Files

    Seecond generate the files with the angular cli: ng g @ampgular/schematics:ssr will install the reuired Files or schematics @ampgular/schematics:ssr

    Usage

    In the future this package will be shift with a small cli for the ease of use, for now the utilization will be done through some npm run commands predefined and options, a brief summary od the commands

    What can you do then...

    1. You can build your app, the server and client bundles build The options for the build will be picked from angular.json and only using one command

      npm run ssr:client -- --build or for universal rendering npm run ssr:server -- --build

    2. You can automatizally route scraping your own app to create a routes file with
      npm run ssr:client -- --spider or for universal rendering npm run ssr:server -- --spider

    3. You can with the command with npm run ssr:client -- --add-seo or for universal rendering npm run ssr:server -- --sadd-seo SEO-ing your app whether you have a server side rendered.

    4. You can automatizally make your app a prerender static site file with
      npm run ssr:client -- --static or for universal rendering npm run ssr:server -- --static

    5. You can automatizally ake your app a prerender static site and spin a express server with
      npm run ssr:client -- --express or for universal rendering npm run ssr:server -- --express

    Building a Server Side Rendered App

    The command npm run ssr:platform -- --build will launch two parallell builds , the normal client side build ng build with the same options as

    Status

    ✅ Command Structure
    ✅ Schematics Files Creation
    🔴 Tests
    🔴 Documentation

    Spider the App Routes

    Status

    ✅ Command Structure
    ✅ Options Workflow
    ✅ Schematics Files Creation
    ✅ SSR Spider
    ✅ Cliet App Spider
    🔴 Tests
    🔴 Documentation

    The command npm run ssr:build will launch two parallell builds , the normal client side build ng build with the same options as

    SEO-ing your app

    Status

    ✅ Command Structure
    ✅ Options Workflow
    ✅ Schematics Files Creation
    🔴 Index.html workflow
    sitemap.xml generator
    🔴 Structure Data (JSON-LD) Infrastructure ready
    🔴 Environment Variable Clien Static preparation
    🔴 Tests
    🔴 Documentation

    Deploy your app to static prerendered Sites

    npm run ssr:platform -- --static

    Status

    ✅ Command Structure ✅ Copy Static build to Public
    ✅ Options Workflow
    ✅ Optimize html/css
    ✅ Static Client Generation
    ✅ Static SSR Generation
    🔴 Tests
    🔴 Documentation

    Create a static prerendered Site and spin a express server to test

    npm run ssr:platform -- --express

    Status

    ✅ Command Structure ✅ Copy Static build to Public
    ✅ Options Workflow
    ✅ Optimize html/css
    ✅ Static Client Generation
    ✅ Static SSR Generation
    ✅ Spin Express Server
    🔴 Tests
    🔴 Documentation

    Deploy your app to dynamic server side rendering

    npm run ssr:platform -- --deploy

    Status

    🔴 no yet started

    Licence

    MIT

    Keywords

    Install

    npm i @ampgular/schematics

    DownloadsWeekly Downloads

    2

    Version

    1.0.17

    License

    MIT

    Unpacked Size

    250 kB

    Total Files

    84

    Last publish

    Collaborators

    • ampgular