kind of working

Author: barbados-clemens

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',
 };