eCommerce Template - separate servers example?

barry_moss_92109last year

4

• 

  notchrlast year

  Hmm, is this the repo yo u need?

  https://github.com/payloadcms/payload/tree/main/templates/ecommerce/src
• 

  barry_moss_92109last year

  Thanks for the reply Chris.

  
  
  

  As I understand it, this will deploy both Front and backends to the same Express server.

  
  
  

  I am looking to deploy to 2 separate servers - I actually used this as the base to divide (from src directory) the app directory and payload directory into 2 repos and followed the [link here](

  https://payloadcms.com/docs/typescript/generating-types

  ) for generating & copying the Payload types to the frontend, but I am getting Type guard errors in by frontend code - BTW, the Payload code is fine and connects to Mongo, but I get Type errors in the frontend ( eg in app/_api/fetchDoc.ts at line 33

  
  

  if (!queryMap[collection]) throw new Error(`Collection ${collection} not found`)

  
  

  with an error of

  
  
  

  Element implicitly has an 'any' type because expression of type '"pages" | "products" | "orders" | "media" | "categories" | "users" | "redirects" | "payload-preferences" | "payload-migrations"' can't be used to index type '{ pages: { query: string; key: string; };

  
  
  

  I was thinking IO could not be the first to have separate repos, hence the request. Thanks again for any help.

  
  

  .

• 

  notchrlast year

  Indeed, it cant find your collection

  
  

  
  

  Did you check the repo issues to see if anyone else experienced this?

• 

  barry_moss_92109last year

  The example repo works perfectly if I deploy on 1 Express server without problem. I am wanting to separate it out, which is (I think) why I am getting the Typescript issue.

  
  

  Others are likely to have the 1 Express server Use Case, so will not have issues.

  
  

  
  

  I checked the e-Commerce Repo Issues Log too - nothing found there.

  
  

  I am thinking the issue maybe related to needing type guards

  
  
  

  export const fetchDoc = async <T>(args: {
    collection: keyof Config['collections']
    slug?: string
    id?: string
    draft?: boolean
  }): Promise<T> => {
    const { collection, **slug, draft** } = args || {}
  
    if (!queryMap[collection]) throw new Error(`Collection ${collection} not found`)

  
  

  in the original repo the slug and draft both are typed string and boolean respectively, in my exact copy of the code for the front-end project code base, they are being type inferred as:-

  
  
  

  string | undefined for slug

  
  

  and

  
  

  boolean | undefined. for draft

  
  
  

  I don't understand how the undefined's are being introduced or whether I need some additional Type Guards.

  
  

  Unfortunately I am at the edge of my Typescript knowledge !

  
  

  
  

  Hence the request for an example of the Payload eCommerce template, but as a 2 separate (frontend / backend) repos. so that I can learn.

  
  

  
  

  Answering my own question, I found a repo [here](

  https://github.com/ShehzadAslamOza/e-commerce-payloadcms-test/tree/main

  ) which may help others...

  
  

  Really appreciate your input @notchris - thanks