kind of working

apps/cart-e2e/project.json

@@ -9,7 +9,8 @@
       "options": {
         "cypressConfig": "apps/cart-e2e/cypress.config.ts",
         "devServerTarget": "cart:serve",
-        "testingType": "e2e"
+        "testingType": "e2e",
+        "baseUrl": "http://localhost:4200"
       },
       "configurations": {
         "production": {

apps/cart/.env.serve

@@ -0,0 +1 @@
+BASE_API_PATH=/.netlify/functions

apps/cart/functions/api/api.ts

@@ -0,0 +1,47 @@
+import { Handler } from '@netlify/functions';
+import fastify, { FastifyInstance, FastifyRequest } from 'fastify';
+import awsLambdaFastify from '@fastify/aws-lambda';
+import sensible from '@fastify/sensible';
+import { products } from '@nx-example/shared/product/data';
+import cors from '@fastify/cors';
+import { randomUUID } from 'crypto';
+
+async function routes(fastify: FastifyInstance) {
+  fastify.get('/products', async () => {
+    return products;
+  });
+  fastify.post(
+    '/checkout',
+    async (
+      request: FastifyRequest<{
+        Body: { productId: string; quanntity: number }[];
+      }>
+    ) => {
+      const items = request.body;
+      console.log(request.body);
+      const price = items.reduce((acc, item) => {
+        const product = products.find((p) => p.id === item.productId);
+        return acc + product.price * item.quanntity;
+      }, 0);
+
+      // gotta think real hard
+      await new Promise((resolve) => setTimeout(resolve, Math.random() * 1000));
+
+      return { success: true, orderId: randomUUID(), total: price };
+    }
+  );
+}
+
+function init() {
+  const app = fastify();
+  app.register(sensible);
+  app.register(cors);
+  // set the prefix for the netlify functions url
+  app.register(routes, {
+    prefix: `${process.env.BASE_API_PATH || ''}/api`,
+  });
+  return app;
+}
+
+// Note: Netlify deploys this function at the endpoint /.netlify/functions/api
+export const handler: Handler = awsLambdaFastify(init());

apps/cart/project.json

@@ -70,7 +70,7 @@
       "outputs": ["{options.outputPath}"],
       "defaultConfiguration": "production"
     },
-    "serve": {
+    "serve-app": {
       "executor": "@nx/webpack:dev-server",
       "options": {
         "buildTarget": "cart:build"
@@ -88,7 +88,10 @@
     "lint": {
       "executor": "@nx/linter:eslint",
       "options": {
-        "lintFilePatterns": ["apps/cart/**/*.{ts,tsx,js,jsx}"]
+        "lintFilePatterns": [
+          "apps/cart/**/*.{ts,tsx,js,jsx}",
+          "./functions/**/*.ts"
+        ]
       },
       "outputs": ["{options.outputFile}"]
     },
@@ -100,15 +103,18 @@
       },
       "outputs": ["{workspaceRoot}/coverage/apps/cart"]
     },
-    "deploy": {
+    "serve": {
       "executor": "nx:run-commands",
       "options": {
         "commands": [
-          {
-            "command": "npx ts-node --project tools/tsconfig.tools.json tools/scripts/deploy --siteName nrwl-nx-examples-cart --outputPath dist/apps/cart"
-          }
+          "BROWSER=false netlify dev --functions=apps/cart/functions",
+          "nx serve-app cart"
         ]
       }
+    },
+    "deploy": {
+      "dependsOn": ["build"],
+      "command": "netlify deploy --site=nx-examples-cart-test --dir dist/apps/cart --functions apps/cart/functions --prod"
     }
   },
   "tags": ["type:app", "scope:cart"],

apps/cart/public/index.html

@@ -0,0 +1,6 @@
+<h1>Netlify Functions</h1>
+<p>
+  The sample function is available at
+  <a href="/.netlify/functions/hello"><code>/.netlify/functions/hello</code></a
+  >.
+</p>

apps/cart/src/_redirects

@@ -1,3 +1,4 @@
 /cart/*    /index.html   200
-/          https://nrwl-nx-examples-products.netlify.com/ 301
-*          https://nrwl-nx-examples-products.netlify.com/:splat 301
+/api/*     https://nx-examples-cart-test.netlify.app/.netlify/functions/api/:splat 200
+/          https://nx-examples-products-test.netlify.com/cart 301
+*          https://nx-examples-products-test.netlify.com/:splat 301

apps/cart/src/app/app.spec.tsx

@@ -2,6 +2,8 @@ import { MemoryRouter } from 'react-router-dom';
 
 import { cleanup, render } from '@testing-library/react';
 
+jest.doMock('@nx-example/cart/cart-page');
+// eslint-disable-next-line
 import App from './app';
 
 describe('App', () => {

apps/cart/src/app/app.tsx

@@ -3,13 +3,17 @@ import { Route, Routes } from 'react-router-dom';
 import '@nx-example/shared/header';
 
 import { CartCartPage } from '@nx-example/cart/cart-page';
+import { environment } from '../environments/environment';
 
 export const App = () => {
   return (
     <>
       <nx-example-header />
       <Routes>
-        <Route path="/cart" element={<CartCartPage />} />
+        <Route
+          path="/cart"
+          element={<CartCartPage baseUrl={environment.baseApiPath} />}
+        />
       </Routes>
     </>
   );

apps/cart/src/environments/environment.prod.ts

@@ -1,3 +1,4 @@
 export const environment = {
   production: true,
+  baseApiPath: '',
 };

apps/cart/src/environments/environment.ts

@@ -3,4 +3,5 @@
 
 export const environment = {
   production: false,
+  baseApiPath: 'http://localhost:8888/.netlify/functions',
 };

apps/products/.env.serve

@@ -0,0 +1 @@
+BASE_API_PATH=/.netlify/functions

apps/products/functions/api/api.ts

@@ -1,5 +1,5 @@
 import { Handler } from '@netlify/functions';
-import fastify, { FastifyInstance, FastifyRequest } from 'fastify';
+import fastify, { FastifyInstance } from 'fastify';
 import awsLambdaFastify from '@fastify/aws-lambda';
 import sensible from '@fastify/sensible';
 import { products } from '@nx-example/shared/product/data';
@@ -16,7 +16,7 @@ function init() {
   app.register(sensible);
   app.register(cors);
   // set the prefix for the netlify functions url
-  app.register(routes, { prefix: '/.netlify/functions/api' });
+  app.register(routes, { prefix: `${process.env.BASE_API_PATH || ''}/api` });
   return app;
 }
 

apps/products/project.json

@@ -50,14 +50,14 @@
               "with": "apps/products/src/environments/environment.prod.ts"
             }
           ],
-          "optimization": true,
+          "optimization": false,
           "outputHashing": "all",
-          "sourceMap": false,
+          "sourceMap": true,
           "namedChunks": false,
-          "aot": true,
+          "aot": false,
           "extractLicenses": true,
           "vendorChunk": false,
-          "buildOptimizer": true,
+          "buildOptimizer": false,
           "budgets": [
             {
               "type": "initial",
@@ -73,7 +73,7 @@
       },
       "outputs": ["{options.outputPath}"]
     },
-    "serve": {
+    "serve-app": {
       "executor": "@angular-devkit/build-angular:dev-server",
       "options": {
         "browserTarget": "products:build"
@@ -109,31 +109,19 @@
       },
       "outputs": ["{workspaceRoot}/coverage/apps/products"]
     },
-    "deploy": {
+
+    "serve": {
       "executor": "nx:run-commands",
       "options": {
         "commands": [
-          {
-            "command": "npx ts-node --project tools/tsconfig.tools.json tools/scripts/deploy --siteName nrwl-nx-examples-products --outputPath dist/apps/products"
-          }
+          "BROWSER=false netlify dev --functions=apps/products/functions",
+          "nx serve-app products"
         ]
       }
     },
-    "serve-functions": {
-      "command": "npx netlify dev"
-    },
-    "deploy-functions": {
-      "dependsOn": ["lint"],
-      "command": "npx netlify deploy",
-      "options": {
-        "cwd": "apps/products"
-      },
-      "configurations": {
-        "production": {
-          "command": "npx netlify deploy --prod",
-          "cwd": "apps/products"
-        }
-      }
+    "deploy": {
+      "dependsOn": ["build"],
+      "command": "netlify deploy --site=nx-examples-products-test --dir dist/apps/products --functions apps/products/functions --prod"
     }
   },
   "tags": ["type:app", "scope:products"],

apps/products/src/_redirects

@@ -1,2 +1,3 @@
-/cart https://nrwl-nx-examples-cart.netlify.com/cart 301
-/*    /index.html   200
+/api/*     https://nx-examples-products-test.netlify.app/.netlify/functions/api/:splat 200
+/cart      https://nx-examples-cart-test.netlify.com/cart 301
+/*         /index.html 200

apps/products/src/app/app.module.ts

@@ -5,6 +5,7 @@ import { RouterModule } from '@angular/router';
 import { StoreModule } from '@ngrx/store';
 import { AppComponent } from './app.component';
 import { EffectsModule } from '@ngrx/effects';
+import { environment } from '../environments/environment';
 
 @NgModule({
   declarations: [AppComponent],
@@ -33,7 +34,7 @@ import { EffectsModule } from '@ngrx/effects';
     StoreModule.forRoot({}),
     EffectsModule.forRoot(),
   ],
-  providers: [],
+  providers: [{ provide: 'BASE_API_PATH', useValue: environment.baseApiPath }],
   bootstrap: [AppComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })

apps/products/src/environments/environment.prod.ts

@@ -1,3 +1,4 @@
 export const environment = {
   production: true,
+  baseApiPath: '',
 };

apps/products/src/environments/environment.ts

@@ -4,6 +4,7 @@
 
 export const environment = {
   production: false,
+  baseApiPath: 'http://localhost:8888/.netlify/functions',
 };
 
 /*

libs/cart/cart-page/src/lib/cart-cart-page/cart-cart-page.spec.tsx

@@ -1,7 +1,31 @@
+import { useReducer } from 'react';
+jest.doMock('./cart-page-hooks', () => {
+  return {
+    useProducts: (): ReturnType<typeof useProducts> => {
+      const [cartState, dispatchCart] = useReducer(cartReducer, {
+        items: products.map((p) => ({ productId: p.id, quantity: 1 })),
+      });
+      const [productsState, dispatchProducts] = useReducer(productsReducer, {
+        products,
+      });
+
+      return [
+        { cart: cartState, products: productsState },
+        { cart: dispatchCart, products: dispatchProducts },
+      ];
+    },
+  };
+});
+
 import { cleanup, fireEvent, render } from '@testing-library/react';
+import { products } from '@nx-example/shared/product/data';
+
+import { cartReducer } from '@nx-example/shared/cart/state/react';
+import { productsReducer } from '@nx-example/shared/product/state/react';
 
 import CartCartPage from './cart-cart-page';
 
+import { useProducts } from './cart-page-hooks';
 describe(' CartCartPage', () => {
   afterEach(cleanup);
 
@@ -11,9 +35,9 @@ describe(' CartCartPage', () => {
   });
 
   it('should render products', () => {
-    expect(
-      render(<CartCartPage />).baseElement.querySelectorAll('li figure').length
-    ).toEqual(5);
+    const { baseElement } = render(<CartCartPage />);
+
+    expect(baseElement.querySelectorAll('li figure').length).toEqual(5);
   });
 
   it('should render a total', () => {