Universal Sitegen

An Angular Universal static site generator

• Universal Sitegen
  • What is this?
  • Getting started
    • Installation
    • Building your static site
      • CLI
      • Programmatically

What is this?

Ever wanted to make a static site from your Angular app? Now that we have finalized Angular Universal, you can! Universal Sitegen takes your angular app, builds it, then spits out static pages for each route. If you're building a website that you don't need a client side JS framework for, then this is pefect. Blogs, landing pages, sales pages, launch pages, company sites, you get the point.

Getting started

Installation

• yarn add @angularclass/universal-sitegen

Building your static site

There are two ways to build your site:

• CLI
• Programmatically

No matter what approach you use, you need the following setup before you're ready to go.

First, make sure your AppModule is importing BrowserModule.withServerTransition() and your routes. As it should.

// app.module.ts

// .....imports

@NgModule({
  imports: [
    BrowserModule.withServerTransition({ appId: 'my-site' }),
    ROUTES
  ],
  // declarations
  // providers
  // bootstrap
})

export class AppModule {}

Next, create a ServerModule for Universal, and import your AppModule

// server.module.ts
import { NgModule } from '@angular/core'
import { ServerModule } from '@angular/platform-server'
import { App } from './app.component'
import { AppModule } from './app.module'

@NgModule({
  imports: [ServerModule, AppModule],
  bootstrap: [App]
})

export class AppServerModule {}

There is a Demo App that has the basics. Great place to start to getting your app ready.

CLI

Make sure you followed the steps above first. To build your site with the CLI (preffered), you only need to do a few things.

Because your app is never going to be ran in the browser and only node, you might have to adjust your webpack config. Look at the demo webpack config for what it should look like.

Next, build your app. After you build it, you need to create a universal.json file with options on the root of your app.

{
  // routes for your angular app. mirros your routes file
  "routes": [
    "/",
    "/about"
  ],
  // output folder for your site
  "outputPath": "site", 
  // path to the compiled Server NgModule or NgModuleFactory with the #ExportName of the module
  "serverModuleOrFactoryPath": "./dist/bundle#AppServerModule",
  // path to the root html page all pages will be injected into
  "indexHTMLPath": "./src/index.html"
}

After that is all done, add a script in your package.json to build the static site using the cli:

{
  "scripts": {
    "universal": "universal build"
  }
}

The universal build command will build your app as a static site, and output the html files to the outpath you specified in universal.json.

Programmatically

Follow the common steps above first. You need to create an entry file for the site generator:

// static.ts
import { generateSite } from '@angularclass/universal-sitegen'
import { AppServerModule } from './server.module'

generateSite(
  // NgModule or NgModuleFactory for the ServerModule you created
  AppServerModule,
  // index html file for all routes
  require('./index.html'),
  // options object
  {
    // routes for your app
    routes: [
      '/',
      '/about'
    ],
    // path to output the site
    outputPath: 'universal-site'
  }
)
.then(() => console.log('site built'))

Once that is done, build your app like you normally would. Because your static app will over ever be ran in Node, you can change your webpack config. Check out the demo webpack config

After you build it, all you have to do is execute the bundled file.

node dist/bundle.js

This will generate your static site.

enjoy — AngularClass

AngularClass

Learn AngularJS, Angular, and Modern Web Development from the best. Looking for corporate Angular training, want to host us, or Angular consulting? [email protected]