feat: switch to new application builder

pascaliske · Feb 15, 2024 · 09f066f · 09f066f
1 parent 40d9cfa
commit 09f066f
Show file tree

Hide file tree

Showing 12 changed files with 32 additions and 90 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -26,4 +26,4 @@ jobs:
 
       # build
       - name: Build application
-        run: yarn run prerender
+        run: yarn run build
diff --git a/.github/workflows/production.yml b/.github/workflows/production.yml
@@ -29,7 +29,7 @@ jobs:
 
       # build
       - name: Build application
-        run: yarn run prerender
+        run: yarn run build
 
       # deploy
       - uses: cloudflare/wrangler-action@v3.4.1

diff --git a/.github/workflows/staging.yml b/.github/workflows/staging.yml
@@ -29,7 +29,7 @@ jobs:
 
       # build
       - name: Build application
-        run: yarn run prerender
+        run: yarn run build
 
       # deploy
       - uses: cloudflare/wrangler-action@v3.4.1

diff --git a/.prettierignore b/.prettierignore
@@ -1,5 +1,4 @@
 .github
 dist
-legacy
 src/index.html
 CHANGELOG.md
diff --git a/angular.json b/angular.json
@@ -54,16 +54,23 @@
       "prefix": "cmp",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/pascaliske-dev/browser",
+            "outputPath": {
+              "base": "dist/pascaliske-dev"
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "assets": ["src/favicon.png", "src/robots.txt", "src/assets"],
             "styles": ["src/styles/common.css"],
-            "scripts": []
+            "scripts": [],
+            "browser": "src/main.ts",
+            "server": "src/main.server.ts",
+            "prerender": true,
+            "ssr": {
+              "entry": "server.ts"
+            }
           },
           "defaultConfiguration": "production",
           "configurations": {
@@ -90,9 +97,7 @@
               "statsJson": true
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true
@@ -116,51 +121,6 @@
           "options": {
             "lintFilePatterns": ["src/**/*.ts"]
           }
-        },
-        "server": {
-          "builder": "@angular-devkit/build-angular:server",
-          "options": {
-            "outputPath": "dist/pascaliske-dev/server",
-            "main": "server.ts",
-            "tsConfig": "tsconfig.server.json"
-          },
-          "defaultConfiguration": "production",
-          "configurations": {
-            "production": {
-              "outputHashing": "media",
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ]
-            },
-            "development": {
-              "optimization": false,
-              "buildOptimizer": false,
-              "sourceMap": true,
-              "extractLicenses": false,
-              "vendorChunk": true
-            }
-          }
-        },
-        "prerender": {
-          "builder": "@angular-devkit/build-angular:prerender",
-          "options": {
-            "routes": ["/", "/home", "/skills", "/work", "/contact", "/legal-notice"],
-            "discoverRoutes": false
-          },
-          "defaultConfiguration": "production",
-          "configurations": {
-            "production": {
-              "browserTarget": "pascaliske-dev:build:production",
-              "serverTarget": "pascaliske-dev:server:production"
-            },
-            "development": {
-              "browserTarget": "pascaliske-dev:build:development",
-              "serverTarget": "pascaliske-dev:server:development"
-            }
-          }
         }
       }
     }

diff --git a/package.json b/package.json
@@ -6,16 +6,13 @@
   "scripts": {
     "prepare": "husky",
     "start": "ng serve",
-    "build:app": "ng build",
-    "build:server": "ng run pascaliske-dev:server",
-    "prerender": "ng run pascaliske-dev:prerender",
+    "build": "ng build",
     "lint": "ng lint pascaliske-dev --fix",
     "format": "prettier --write \"**/*.{ts,scss,html,md,json}\"",
     "version": "bump --yes package.json",
     "changelog": "standard-changelog -r 1"
   },
   "private": true,
-  "sideEffects": false,
   "prettier": "@pascaliske/prettier-config/tailwind",
   "dependencies": {
     "@angular/animations": "^17.2.1",
@@ -60,7 +57,7 @@
     "@typescript-eslint/parser": "^7.0.0",
     "autoprefixer": "^10.4.16",
     "eslint": "^8.56.0",
-    "express": "^4.15.2",
+    "express": "^4.18.2",
     "hono": "^3.12.8",
     "husky": "^9.0.7",
     "lint-staged": "^15.2.0",

diff --git a/server.ts b/server.ts
@@ -1,27 +1,23 @@
-import 'zone.js/node'
+import { fileURLToPath } from 'node:url'
+import { dirname, join, resolve } from 'node:path'
 import { APP_BASE_HREF } from '@angular/common'
 import { CommonEngine } from '@angular/ssr'
-import * as express from 'express'
-import { existsSync } from 'node:fs'
-import { join } from 'node:path'
+import express from 'express'
 import bootstrap from './src/main.server'
 
-export default bootstrap
-
 export function app(): express.Express {
     const commonEngine: CommonEngine = new CommonEngine()
     const server: express.Express = express()
-    const distFolder: string = join(process.cwd(), 'dist/pascaliske-dev/browser')
-    const indexHtml: string = existsSync(join(distFolder, 'index.original.html'))
-        ? join(distFolder, 'index.original.html')
-        : join(distFolder, 'index.html')
+    const serverDistFolder = dirname(fileURLToPath(import.meta.url))
+    const browserDistFolder = resolve(serverDistFolder, '../browser')
+    const indexHtml = join(serverDistFolder, 'index.server.html')
 
     // prepare view engine
     server.set('view engine', 'html')
-    server.set('views', distFolder)
+    server.set('views', browserDistFolder)
 
     // serve static files
-    server.get('*.*', express.static(distFolder, { maxAge: '1y' }))
+    server.get('*.*', express.static(browserDistFolder, { maxAge: '1y' }))
 
     // serve app routes
     server.get('*', (req: express.Request, res: express.Response, next: express.NextFunction) => {
@@ -32,7 +28,7 @@ export function app(): express.Express {
                 bootstrap,
                 documentFilePath: indexHtml,
                 url: `${protocol}://${headers.host}${originalUrl}`,
-                publicPath: distFolder,
+                publicPath: browserDistFolder,
                 providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
             })
             .then((html: string) => res.send(html))

diff --git a/src/polyfills.ts b/src/polyfills.ts
diff --git a/tsconfig.app.json b/tsconfig.app.json
@@ -2,8 +2,8 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
-    "types": []
+    "types": ["node"]
   },
-  "files": ["src/main.ts", "src/polyfills.ts"],
+  "files": ["src/main.ts", "src/main.server.ts", "server.ts"],
   "include": ["src/**/*.d.ts"]
 }
diff --git a/tsconfig.json b/tsconfig.json
@@ -4,6 +4,7 @@
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
+    "esModuleInterop": true,
     "strict": true,
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
@@ -12,14 +13,13 @@
     "useDefineForClassFields": false,
     "sourceMap": true,
     "declaration": false,
-    "downlevelIteration": true,
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
     "target": "es2022",
-    "module": "es2020",
+    "module": "es2022",
     "typeRoots": ["node_modules/@types", "src/typings.d.ts"],
-    "lib": ["es2020", "dom"],
+    "lib": ["es2022", "dom"],
     "paths": {
       "typings": ["src/typings"],
       "environments": ["src/environments"],

diff --git a/tsconfig.server.json b/tsconfig.server.json
diff --git a/yarn.lock b/yarn.lock
@@ -4557,7 +4557,7 @@ exponential-backoff@^3.1.1:
   resolved "https://registry.yarnpkg.com/exponential-backoff/-/exponential-backoff-3.1.1.tgz#64ac7526fe341ab18a39016cd22c787d01e00bf6"
   integrity sha512-dX7e/LHVJ6W3DE1MHWi9S1EYzDESENfLrYohG2G++ovZrYOkm4Knwa0mc1cn84xJOR4KEU0WSchhLbd0UklbHw==
 
-express@^4.15.2, express@^4.17.3:
+express@^4.17.3, express@^4.18.2:
   version "4.18.2"
   resolved "https://registry.yarnpkg.com/express/-/express-4.18.2.tgz#3fabe08296e930c796c19e3c516979386ba9fd59"
   integrity sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==