crystallizeapi / boilerplates Goto Github PK

Mono Repository with all the boilerplates

License: MIT License

Dockerfile 0.01% TypeScript 91.39% CSS 0.42% JavaScript 6.52% Shell 0.04% Vue 0.76% Makefile 0.02% Java 0.04% Ruby 0.02% Objective-C 0.03% Dart 0.04% Starlark 0.01% MDX 0.06% Astro 0.03% HTML 0.01% Svelte 0.63%

boilerplate gatsby nextjs nuxtjs remix-run

boilerplates's People

Contributors

Stargazers

Watchers

Forkers

mountmike

boilerplates's Issues

_frontpage-2021 not displaying at the home page in NextJS boilerplate

Component(s) affected: Next.js Boilerplate - Complete ecommerce

Description
The _frontpage-2021 folder contents are not displaying in the root page.

How to reproduce

Create a new empty tenant.
Install the local service API with npx @crystallize/cli my-api-project and selecting:
- Vercel platform
- own tenant
- no dummy data
Install the Next.js Boilerplate with npx @crystallize/cli my-project, selecting:
- full e-commerce flavour
- local service API URL (http://localhost:3001/api/graphql)
- own tenant
- no dummy data

Run yarn dev on both projects and navigate to localhost:3000. An empty page with no content is shown (only the menus, shop logo and footer).

Although selecting always that I am using my own tenant, the new empty tenant is polluted with a catalog, with "Shop", "Stories" and "About" folders, together with "_frontpage-2021" and "_assets". The "_frontpage-2021" has a title "Retail eCommerce demo powered by Crystallize" but this title doesn't show in the home page of my running site. If I write more content in the "_frontpage-2021" as explained in the videos it is not displaying.

I repeated the process many times so I am sure that I didn't accidentally selected to use the FRNTR data, so that is not why my catalog is full of pages that I didn't create.

Possible Solution
I couldn't find any reference in the frontend code to "_frontpage-2021", but only to "frontpage-2021" without the leading underscore. I tried renaming the catalog folder just in case it had been renamed in the code and not updated in the videos, but it didn't fix the issue.

Additional context

Site home page:

Catalog folders (polluted by some script, I never created them):

Service API boilerplate does not work with AWS out-of-the-box

Component(s) affected: component 1,component N, etc.
Service API boilerplate, AWS version.

Description
The project runs fine, starts up as it should and you get to see the GraphQL playground. However, the introspection query fails, and you are not able to run any queries.

How to reproduce

npx @crystallize/cli
Choose Service API boilerplate
Choose AWS
Tenant identifier/bootstrapping does not matter here
Run the project, open http://localhost:3001/dev/graphql

Possible Solution

Additional context

A bunch of introspection queries are fired:

Cannot create an order because of the cors - 2

Component(s) affected: CORS, GraphQL MUTATION, CRYSTALLIZE API
Description

Here is a code (just an index.html) that should make a simple request (GraphQL Mutation) to the Crystallize API just by clicking on a button. I removed all the abstractions and modules that could be due to a framework. So the problem is Crystallize. Despite the fact that we have the right creantials, Crystallize does not handle mutations from GraphQL.

IMPORTANT: Please change the access point to the API and the creantials

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test</title>
  </head>
  <body>
    <button id="btn">Place Order</button>
    <div id="result"></div>
    <script>
      let btn = document.getElementById("btn");
      let result = document.getElementById("result");

      const query = `mutation createOrder {
          orders {
              create(
                  input: {
                      customer: {
                          firstName: "Crystal"
                          lastName: "Ecommerce"
                          identifier: "cus_0001"
                          addresses: [
                              {
                                  type: billing
                                  street: "Kverndalsgata"
                                  streetNumber: "8"
                                  city: "Skien"
                                  country: "Norway"
                                  postalCode: "1234"
                              }
                              {
                                  type: delivery
                                  street: "Kverndalsgata"
                                  streetNumber: "8"
                                  city: "Skien"
                                  country: "Norway"
                                  postalCode: "1234"
                              }
                          ]
                      }
                      cart: {
                          name: "Calathea"
                          sku: "maranta-leuconeura-1611849929203"
                          quantity: 1
                          price: {
                              currency: "EUR"
                              tax: { name: "No Tax", percent: 0 }
                              net: 23
                              gross: 23
                          }
                      }
                      payment: [
                          {
                              provider: stripe
                              stripe: {
                                  orderId: "ord_0001"
                                  customerId: "cus_0001"
                                  paymentMethod: "card"
                                  paymentIntentId: "pi_0001"
                                  metadata: null
                              }
                          }
                      ]
                      total: { gross: 23, net: 23, currency: "EUR" }
                  }
              ) {
                  id
              }
          }
      }`;

      const operationName = 'createOrder'
      const variables = {}
      btn.addEventListener("click", async () => {
        const data = await fetch("https://api.crystallize.com/e-commerce-test/orders", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
              "X-Crystallize-Access-Token-Id": "******************",
              "X-Crystallize-Access-Token-Secret": "******************",
              // "X-Crystallize-Static-Auth-Token": "******************"
            },
            body: JSON.stringify({ query, variables, operationName }),
        }).then((res) => res.json()).catch((e) => e)

        result.innerHTML = data ? JSON.stringify(data) : "No data";
      });
    </script>
  </body>
</html>

BUT ?

i dont know what i have to do nowI don't know what I should do anymore ... 🥹

Cannot create an order because of the cors

Component(s) affected: CORS, GRAPHQL MUTATION

Description
When I execute queries to retrieve information from the GraphQL API everything works fine. But when I have to execute Mutations there is a CORS error. According to what I read it should indeed be configured on the server side. I use Nuxtjs + Nuxt GraphQL Client and here is my configuration:

How to reproduce
nuxt.config.js

order request

mutation

request header

console log

Possible Solution
I think that the servers could be configured to accept requests that could come from Localhost. I've already encountered this problem several times when I develop with my own backend locally and I always had to configure the server correctly.

Additional context

If you want to take a closer look at the code, you can find it in this repo: https://github.com/michael-mb/E-Com-Crystallize

The .env is naturally ignored

crystallizeapi / boilerplates Goto Github PK

boilerplates's People

Contributors

Stargazers

Watchers

Forkers

boilerplates's Issues

_frontpage-2021 not displaying at the home page in NextJS boilerplate

Service API boilerplate does not work with AWS out-of-the-box

Cannot create an order because of the cors - 2

BUT ?

Cannot create an order because of the cors

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent