feat: update nitropack to 0.6.x (#145)

apps/analog-app/src/app/products.ts

@@ -1,29 +1,6 @@
-export interface Product {
-  id: number;
-  name: string;
-  price: number;
-  description: string;
-}
-
-export const products: Product[] = [
-  {
-    id: 1,
-    name: 'Phone XL',
-    price: 799,
-    description: 'A large phone with one of the best screens'
-  },
-  {
-    id: 2,
-    name: 'Phone Mini',
-    price: 699,
-    description: 'A great phone with one of the best cameras'
-  },
-  {
-    id: 3,
-    name: 'Phone Standard',
-    price: 299,
-    description: ''
-  }
-];
-
-
+export interface Product {
+  id: number;
+  name: string;
+  price: number;
+  description: string;
+}

apps/analog-app/src/app/routes/index.ts

@@ -1,10 +1,10 @@
 import { defineRouteMeta } from '@analogjs/router';
 import { NgForOf, NgIf } from '@angular/common';
-import { Component } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Component, inject } from '@angular/core';
 import { RouterLinkWithHref } from '@angular/router';
 import { ProductAlertsComponent } from '../product-alerts/product-alerts.component';
-
-import { products } from '../products';
+import { Product } from '../products';
 
 export const routeMeta = defineRouteMeta({
   title: 'Product List',
@@ -50,7 +50,14 @@ export const routeMeta = defineRouteMeta({
   ],
 })
 export default class ProductListComponent {
-  products = [...products];
+  products!: Product[];
+  http = inject(HttpClient);
+
+  ngOnInit() {
+    this.http.get<Product[]>('/api/v1/products').subscribe((products) => {
+      this.products = products;
+    });
+  }
 
   share() {
     window.alert('The product has been shared!');

apps/analog-app/src/app/routes/products.[productId].ts

@@ -2,8 +2,9 @@ import { Component, inject, OnInit } from '@angular/core';
 import { CurrencyPipe, NgIf } from '@angular/common';
 import { injectActivatedRoute } from '@analogjs/router';
 
-import { Product, products } from '../products';
+import { Product } from '../products';
 import { CartService } from '../cart.service';
+import { HttpClient } from '@angular/common/http';
 
 @Component({
   selector: 'app-product-details',
@@ -23,6 +24,7 @@ import { CartService } from '../cart.service';
 export default class ProductDetailsComponent implements OnInit {
   private route = injectActivatedRoute();
   private cartService = inject(CartService);
+  private http = inject(HttpClient);
 
   product: Product | undefined;
 
@@ -31,10 +33,12 @@ export default class ProductDetailsComponent implements OnInit {
     const routeParams = this.route.parent!.snapshot!.paramMap;
     const productIdFromRoute = Number(routeParams.get('productId'));
 
-    // Find the product that correspond with the id provided in route.
-    this.product = products.find(
-      (product) => product.id === productIdFromRoute
-    );
+    this.http.get<Product[]>('/api/v1/products').subscribe((products) => {
+      // Find the product that correspond with the id provided in route.
+      this.product = products.find(
+        (product) => product.id === productIdFromRoute
+      );
+    });
   }
 
   addToCart(product: Product) {

apps/analog-app/src/server/routes/v1/products.ts

@@ -0,0 +1,22 @@
+import { eventHandler } from 'h3';
+
+export default eventHandler(() => [
+  {
+    id: 1,
+    name: 'Phone XL',
+    price: 799,
+    description: 'A large phone with one of the best screens',
+  },
+  {
+    id: 2,
+    name: 'Phone Mini',
+    price: 699,
+    description: 'A great phone with one of the best cameras',
+  },
+  {
+    id: 3,
+    name: 'Phone Standard',
+    price: 299,
+    description: '',
+  },
+]);

apps/analog-app/vite.config.ts

@@ -17,7 +17,9 @@ export default defineConfig(({ mode }) => {
       include: ['@angular/common', '@angular/forms'],
     },
     build: {
-      outDir: `${offsetFromRoot('apps/analog-app/src')}/dist/apps/analog-app`,
+      outDir: `${offsetFromRoot(
+        'apps/analog-app/src'
+      )}/dist/apps/analog-app/client`,
       emptyOutDir: true,
       target: 'es2020',
     },
@@ -33,8 +35,13 @@ export default defineConfig(({ mode }) => {
       platform({
         nitro: {
           output: {
-            dir: `${offsetFromRoot('apps/analog-app/src/server')}/dist/server`,
+            dir: `${offsetFromRoot(
+              'apps/analog-app/src/server'
+            )}/dist/apps/analog-app/server`,
           },
+          buildDir: `${offsetFromRoot(
+            'apps/analog-app/src'
+          )}/dist/apps/analog-app/.nitro`,
         },
       }),
     ],

package.json

@@ -9,7 +9,7 @@
     "prepare": "git config core.hookspath .githooks",
     "start": "nx serve",
     "build": "nx run-many --target build --all --exclude=astro-app",
-    "e2e": "nx run-many --target e2e --all --parallel=1",
+    "e2e": "nx run-many --target e2e --all --parallel=1 --exclude=analog-app-e2e-playwright,astro-app-e2e-playwright",
     "test": "nx run-many --target test --all",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
     "contributors:add": "all-contributors add",
@@ -84,7 +84,7 @@
     "kolorist": "^1.6.0",
     "lint-staged": "^13.0.3",
     "minimist": "^1.2.7",
-    "nitropack": "^0.5.4",
+    "nitropack": "^0.6.1",
     "nx": "14.8.4",
     "playwright": "^1.27.1",
     "prettier": "^2.7.1",

packages/platform/src/lib/analog-platform-plugin.ts

@@ -1,5 +1,6 @@
 import { loadEsmModule } from '@angular-devkit/build-angular/src/utils/load-esm';
 import { NitroConfig } from 'nitropack';
+import { toNodeListener } from 'h3';
 import { Plugin, ViteDevServer } from 'vite';
 
 export function analogPlatform(opts: { nitro?: NitroConfig }): Plugin {
@@ -8,33 +9,40 @@ export function analogPlatform(opts: { nitro?: NitroConfig }): Plugin {
     srcDir: 'src/server',
     scanDirs: ['src/server'],
     output: {
-      dir: '../dist/server',
+      dir: '../../dist/server',
       ...opts.nitro?.output,
     },
+    buildDir: '../dist/.nitro',
+    ...opts.nitro,
   };
   return {
     name: 'vite-nitro-plugin',
 
     async configureServer(viteServer: ViteDevServer) {
-      const { createNitro, createDevServer, build } = await loadEsmModule<
-        typeof import('nitropack')
-      >('nitropack');
+      const { createNitro, createDevServer, build, prepare } =
+        await loadEsmModule<typeof import('nitropack')>('nitropack');
 
       const nitro = await createNitro({ ...nitroConfig, dev: true });
       const server = createDevServer(nitro);
+      await prepare(nitro);
       await build(nitro);
-      viteServer.middlewares.use('/api', await server.app);
+      viteServer.middlewares.use('/api', toNodeListener(server.app));
       console.log(
         `\n\nThe '@analogjs/platform' successfully started.\nThe server endpoints are accessible under the "/api"`
       );
     },
 
     async closeBundle() {
-      const { createNitro, build } = await loadEsmModule<
+      const { createNitro, build, prepare } = await loadEsmModule<
         typeof import('nitropack')
       >('nitropack');
 
-      const nitro = await createNitro({ ...nitroConfig, dev: false });
+      const nitro = await createNitro({
+        ...nitroConfig,
+        baseURL: '/api',
+        dev: false,
+      });
+      await prepare(nitro);
       await build(nitro);
       await nitro.close();
       console.log(`\n\nThe '@analogjs/platform' successfully built.`);