init product fn

Author: barbados-clemens

.gitignore

@@ -38,3 +38,6 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+# Local Netlify folder
+.netlify

apps/products/functions/api/api.ts

@@ -0,0 +1,24 @@
+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';
+
+async function routes(fastify: FastifyInstance) {
+  fastify.get('/products', async () => {
+    return products;
+  });
+}
+
+function init() {
+  const app = fastify();
+  app.register(sensible);
+  app.register(cors);
+  // set the prefix for the netlify functions url
+  app.register(routes, { prefix: '/.netlify/functions/api' });
+  return app;
+}
+
+// Note: Netlify deploys this function at the endpoint /.netlify/functions/api
+export const handler: Handler = awsLambdaFastify(init());

apps/products/netlify.toml

@@ -0,0 +1,15 @@
+[build]
+# Static files from this folder will be served at the root of the site.
+publish = "public"
+[functions]
+# Directory with serverless functions, including background
+# functions, to deploy. This is relative to the base directory
+# if one has been set, or the root directory if
+# a base hasn’t been set.
+directory = "functions/"
+
+# Specifies \`esbuild\` for functions bundling, esbuild is the default for TS
+# node_bundler = "esbuild"
+
+[functions."hello*"]
+# Apply settings to any functions with a name beginning with "hello"

apps/products/project.json

@@ -13,7 +13,10 @@
     "build": {
       "executor": "@angular-devkit/build-angular:browser",
       "options": {
-        "aot": true,
+        "aot": false,
+        "buildOptimizer": false,
+        "optimization": false,
+        "sourceMap": true,
         "outputPath": "dist/apps/products",
         "index": "apps/products/src/index.html",
         "main": "apps/products/src/main.ts",
@@ -92,7 +95,8 @@
       "options": {
         "lintFilePatterns": [
           "apps/products/src/**/*.ts",
-          "apps/products/src/**/*.html"
+          "apps/products/src/**/*.html",
+          "./functions/**/*.ts"
         ]
       },
       "outputs": ["{options.outputFile}"]
@@ -114,6 +118,22 @@
           }
         ]
       }
+    },
+    "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"
+        }
+      }
     }
   },
   "tags": ["type:app", "scope:products"],

apps/products/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/products/src/app/app.module.ts

@@ -4,6 +4,7 @@ import { RouterModule } from '@angular/router';
 
 import { StoreModule } from '@ngrx/store';
 import { AppComponent } from './app.component';
+import { EffectsModule } from '@ngrx/effects';
 
 @NgModule({
   declarations: [AppComponent],
@@ -30,6 +31,7 @@ import { AppComponent } from './app.component';
       { initialNavigation: 'enabledBlocking' }
     ),
     StoreModule.forRoot({}),
+    EffectsModule.forRoot(),
   ],
   providers: [],
   bootstrap: [AppComponent],

libs/products/home-page/src/lib/home-page/home-page.component.ts

@@ -1,11 +1,12 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 import { select, Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
 
 import {
   getProducts,
   getProductsState,
+  LoadProducts,
   ProductsPartialState,
 } from '@nx-example/shared/product/state';
 import { Product } from '@nx-example/shared/product/types';
@@ -16,11 +17,16 @@ import '@nx-example/shared/product/ui';
   templateUrl: './home-page.component.html',
   styleUrls: ['./home-page.component.scss'],
 })
-export class HomePageComponent {
+export class HomePageComponent implements OnInit {
   products: Observable<Product[]> = this.store.pipe(
     select(getProductsState),
     select(getProducts)
   );
 
   constructor(private store: Store<ProductsPartialState>) {}
+
+  ngOnInit() {
+    console.log('cmp init');
+    this.store.dispatch(new LoadProducts());
+  }
 }

libs/products/product-detail-page/src/lib/product-detail-page/product-detail-page.component.html

@@ -11,6 +11,10 @@ <h1>{{ product.name }}</h1>
           [value]="product.price"
         ></nx-example-product-price>
       </p>
+      <p>
+        <!-- TODO(caleb) make this open the /cart route in the other page -->
+        <button>Buy</button>
+      </p>
     </div>
   </div>
 </ng-container>

libs/shared/product/state/src/index.ts

@@ -3,5 +3,6 @@ import { PRODUCTS_FEATURE_KEY } from './lib/+state/products.reducer';
 
 export * from './lib/+state/products.reducer';
 export * from './lib/+state/products.selectors';
+export * from './lib/+state/products.actions';
 export const getProductsState = createFeatureSelector(PRODUCTS_FEATURE_KEY);
 export * from './lib/shared-product-state.module';

libs/shared/product/state/src/lib/+state/products.actions.ts

@@ -1,5 +1,17 @@
 import { Action } from '@ngrx/store';
+import { Product } from '@nx-example/shared/product/types';
 
-export enum ProductsActionTypes {}
+export enum ProductsActionTypes {
+  LoadProducts = '[Products] Load Products',
+  LoadProductsSuccess = '[Products] Load Products Success',
+}
 
-export type ProductsAction = Action;
+export class LoadProducts implements Action {
+  readonly type = ProductsActionTypes.LoadProducts;
+}
+export class LoadProductsSuccess implements Action {
+  readonly type = ProductsActionTypes.LoadProductsSuccess;
+  constructor(public products: Product[]) {}
+}
+
+export type ProductsAction = LoadProducts | LoadProductsSuccess;