Merge pull request #6 from agility/angular-ssr

SSR Refactoring

.editorconfig

@@ -10,6 +10,7 @@ trim_trailing_whitespace = true
 
 [*.ts]
 quote_type = single
+ij_typescript_use_double_quotes = false
 
 [*.md]
 max_line_length = off

.env

@@ -0,0 +1,5 @@
+AGILITY_GUID=e13c7b01-u
+AGILITY_API_PREVIEW_KEY=AngularPreview.6617c54b87588d941d32416a9dfb1e8fd9e556439984e8236ac75896e47ae02a
+AGILITY_API_FETCH_KEY=AngularFetch.a20b40fd8cd25e02ba62ca5c3acbaae5512c1d633b51ea104ac28f9bc3b9d44d
+AGILITY_LOCALE=en-us
+AGILITY_SITEMAP=website

.env.example

@@ -0,0 +1,6 @@
+AGILITY_GUID=
+AGILITY_PREVIEW=true
+AGILITY_API_PREVIEW_KEY=
+AGILITY_API_FETCH_KEY=
+AGILITY_LOCALE=en-us
+AGILITY_SITEMAP=website

.gitignore

@@ -1,15 +1,18 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
-# env files
-/src/environments/.environment.prod.ts 
-/src/environments/.environment.ts
-
 # compiled output
 /dist
 /tmp
 /out-tsc
-# Only exists if Bazel was run
+/.angular
 /bazel-out
+prerender-routes.js
+/src/environments/environment.prod.ts
+/src/environments/environment.ts
+/src/environments
+content.json
+pages.json
+agility-routes.txt
 
 # dependencies
 /node_modules

README.md

@@ -1,62 +1,25 @@
-# Agility CMS & Angular Starter
+# AgilityCMS Angular 18 SSR Starter
+This repository is a template you can use to render your AgilityCMS website on Angular 18. 
 
-New to Agility CMS? [Sign up for a FREE account](https://agilitycms.com/free)
+## Installation
+Run `npm install` to install the required packages.
 
-[Introduction to Angular and Agility CMS](https://help.agilitycms.com/hc/en-us/articles/360056766852)
+## Development server
 
-## About This Starter
-- Angular is a popular platform and framework maintained by Google for building single-page client applications using HTML and TypeScript.
-- Supports full [Page Management](https://help.agilitycms.com/hc/en-us/articles/360055805831).
-- Supports Preview Mode.
+Run `npm run dev` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
 
-### Tailwind CSS
+You will see client side requests. Routing is done via the <a [routerLink]> tags and takes place client side.
 
-This starter uses [Tailwind CSS](https://tailwindcss.com/), a simple and lightweight utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup.
+## Production server
+Run `npm run build` this will prerender your sitemap pages and create a static build of your site. The build artifacts will be stored in the `dist/` directory.
+Run `npm run start` this will start the built production server. 
 
-It also comes equipped with [Autoprefixer](https://www.npmjs.com/package/autoprefixer), a plugin which use the data based on current browser popularity and property support to apply CSS prefixes for you.
+No client side requests are made in production. Routing is done via the browser and <a [href]> tags
 
-## Getting Started
+## Running unit tests
 
-To start using the Agility CMS & Angular Starter, [sign up](https://agilitycms.com/free) for a FREE account and create a new Instance using the Blog Template.
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
 
-### Setting up the Starter
+## Running end-to-end tests
 
-1. cd into the `src/environments` directory.
-2. Overwrite the values in the `environment.ts` file using your Preview API Key.
-4. Overwrite the values in the `environment.prod.ts` file using your Fetch API Key.
-
-You can get these values from the API Keys page in [Agility Settings](https://manager.agilitycms.com/settings/apikeys).
-
-## Running the Site Locally
-- `npm run start` => Starts your development environment.
-- `npm run build` => Builds your production enviornment.
-
-## How It Works
-- [How Pages Work](https://help.agilitycms.com/hc/en-us/articles/4403477298701)
-- [How Page Modules Work](https://help.agilitycms.com/hc/en-us/articles/4403477635853)
-- [How To Fetch Additional Data in Page Modules](https://help.agilitycms.com/hc/en-us/articles/4403478652301)
-
-## Resources
-
-### Agility CMS
-- [Official site](https://agilitycms.com)
-- [Documentation](https://help.agilitycms.com/hc/en-us)
-
-### Angular
-- [Official site](https://angular.io/)
-- [Documentation](https://angular.io/docs)
-
-### Tailwind CSS
-- [Official site](http://tailwindcss.com/)
-- [Documentation](http://tailwindcss.com/docs)
-
-### Community
-- [Official Slack](https://join.slack.com/t/agilitycommunity/shared_invite/enQtNzI2NDc3MzU4Njc2LWI2OTNjZTI3ZGY1NWRiNTYzNmEyNmI0MGZlZTRkYzI3NmRjNzkxYmI5YTZjNTg2ZTk4NGUzNjg5NzY3OWViZGI)
-- [Blog](https://agilitycms.com/resources/posts)
-- [GitHub](https://github.com/agility)
-- [Forums](https://help.agilitycms.com/hc/en-us/community/topics)
-- [Facebook](https://www.facebook.com/AgilityCMS/)
-- [Twitter](https://twitter.com/AgilityCMS)
-
-## Feedback and Questions
-If you have feedback or questions about this starter, please use the [Github Issues](https://github.com/agility/agilitycms-angular-starter/issues) on this repo, join our [Community Slack Channel](https://join.slack.com/t/agilitycommunity/shared_invite/enQtNzI2NDc3MzU4Njc2LWI2OTNjZTI3ZGY1NWRiNTYzNmEyNmI0MGZlZTRkYzI3NmRjNzkxYmI5YTZjNTg2ZTk4NGUzNjg5NzY3OWViZGI) or create a post on the [Agility Developer Community](https://help.agilitycms.com/hc/en-us/community/topics).
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

angular.json

@@ -3,117 +3,105 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "agilitycms-angular-starter": {
+    "agilitycms": {
       "projectType": "application",
       "schematics": {},
       "root": "",
       "sourceRoot": "src",
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/",
+            "outputPath": "dist/agilitycms",
             "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
             "tsConfig": "tsconfig.app.json",
-            "assets": ["src/_redirects", "src/favicon.png", "src/assets"],
-            "styles": ["src/styles.css"],
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "src/assets"
+              }
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
             "scripts": [],
-            "vendorChunk": true,
-            "extractLicenses": false,
-            "buildOptimizer": false,
-            "sourceMap": true,
-            "optimization": false,
-            "namedChunks": true
+            "server": "src/main.server.ts",
+            "prerender": {
+              "discoverRoutes": true,
+              "routesFile": "src/app/agility/routing/agility-routes.txt"
+            },
+            "ssr": {
+              "entry": "server.ts"
+            },
+            "allowedCommonJsDependencies": [
+              "dotenv"
+            ]
           },
           "configurations": {
             "production": {
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ],
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "namedChunks": false,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "aot": true,
-              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "6kb",
-                  "maximumError": "10kb"
+                  "maximumWarning": "2kB",
+                  "maximumError": "4kB"
                 }
-              ]
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
             }
           },
-          "defaultConfiguration": ""
+          "defaultConfiguration": "production"
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "browserTarget": "agilitycms-angular-starter:build"
-          },
           "configurations": {
             "production": {
-              "browserTarget": "agilitycms-angular-starter:build:production"
+              "buildTarget": "agilitycms:build:production"
+            },
+            "development": {
+              "buildTarget": "agilitycms:build:development"
             }
-          }
+          },
+          "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "browserTarget": "agilitycms-angular-starter:build"
-          }
+          "builder": "@angular-devkit/build-angular:extract-i18n"
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
             "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
-            "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.css"],
-            "scripts": []
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "tsconfig.app.json",
-              "tsconfig.spec.json",
-              "e2e/tsconfig.json"
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
             ],
-            "exclude": ["**/node_modules/**"]
-          }
-        },
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "agilitycms-angular-starter:serve"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "agilitycms-angular-starter:serve:production"
-            }
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
           }
         }
       }
     }
-  },
-  "defaultProject": "agilitycms-angular-starter"
+  }
 }

dotenv.config.js

@@ -0,0 +1,34 @@
+require('dotenv').config();
+const fs = require('fs');
+const path = require('path');
+
+const development = `
+export const environment = {
+  AGILITY_PREVIEW: true,
+  AGILITY_GUID: '${process.env.AGILITY_GUID}',
+  AGILITY_API_FETCH_KEY: '${process.env.AGILITY_API_FETCH_KEY}',
+  AGILITY_API_PREVIEW_KEY: '${process.env.AGILITY_API_PREVIEW_KEY}',
+  AGILITY_LOCALE: '${process.env.AGILITY_LOCALE}',
+  AGILITY_SITEMAP: '${process.env.AGILITY_SITEMAP}'
+};
+`;
+const production = `
+export const environment = {
+  AGILITY_PREVIEW: false,
+  AGILITY_GUID: '${process.env.AGILITY_GUID}',
+  AGILITY_API_FETCH_KEY: '${process.env.AGILITY_API_FETCH_KEY}',
+  AGILITY_API_PREVIEW_KEY: '${process.env.AGILITY_API_PREVIEW_KEY}',
+  AGILITY_LOCALE: '${process.env.AGILITY_LOCALE}',
+  AGILITY_SITEMAP: '${process.env.AGILITY_SITEMAP}'
+};
+`;
+
+const dir = './src/environments';
+if (!fs.existsSync(dir)) {
+  fs.mkdirSync(dir);
+}
+
+fs.writeFileSync(path.join(dir, 'environment.ts'), development);
+fs.writeFileSync(path.join(dir, 'environment.prod.ts'), production);
+
+console.log('Environment variables written to environment.ts and environment.prod.ts');