Переглянути джерело

docs: Start on storefront docs

Michael Bromley 2 роки тому
батько
коміт
488470d3cf

BIN
docs/docs/guides/storefront/building-a-storefront/vendure-storefront-screenshot-01.jpg


BIN
docs/docs/guides/storefront/building-a-storefront/vercel-commerce-screenshot.webp


BIN
docs/docs/guides/storefront/building-a-storefront/vue-storefront-logo.png


+ 42 - 0
docs/docs/guides/storefront/connect-api/index.mdx

@@ -0,0 +1,42 @@
+---
+title: Connect to the API
+---
+
+The first thing you'll need to do is to connect your storefront app to the **Shop API**. The Shop API is a GraphQL API
+that provides access to the products, collections, customer data, and exposes mutations that allow you to add items to
+the cart, checkout, manage customer accounts, and more.
+
+:::tip
+You can explore the Shop API by opening the GraphQL Playground in your browser at
+[`http://localhost:3000/shop-api`](http://localhost:3000/shop-api) when your Vendure
+server is running locally.
+:::
+
+## Select a GraphQL client
+
+GraphQL requests are made over HTTP, so you can use any HTTP client such as the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) to make requests to the Shop API. However, there are also a number of specialized GraphQL clients which can make working with GraphQL APIs easier. Here are some popular options:
+
+* [Apollo Client](https://www.apollographql.com/docs/react): A full-featured client which includes a caching layer and React integration.
+* [urql](https://formidable.com/open-source/urql/): The highly customizable and versatile GraphQL client for React, Svelte, Vue, or plain JavaScript
+* [graphql-request](https://github.com/jasonkuhrt/graphql-request): Minimal GraphQL client supporting Node and browsers for scripts or simple apps
+
+Here are some examples of how to use these clients to connect to the Shop API.
+
+### Fetch
+
+First we'll look at a plain Fetch-based implementation, to show you that there's no special magic to a GraphQL request - it's just a POST request with a JSON body.
+
+```ts
+export function query(document: string, variables: Record<string, any> = {}) {
+    return fetch('https://localhost:3000/shop-api', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({
+          query: document,
+          variables,
+        }),
+    })
+      .then((res) => res.json())
+      .catch((err) => console.log(err));
+}
+```

BIN
docs/docs/guides/storefront/storefront-starters/angular-storefront.webp


+ 56 - 0
docs/docs/guides/storefront/storefront-starters/index.mdx

@@ -0,0 +1,56 @@
+---
+title: "Storefront starters"
+sidebar_position: 1
+---
+
+Since building an entire Storefront from scratch can be a daunting task, we have prepared a few starter projects that you can use as a base for your own storefront.
+
+These starters provide basic functionality including:
+
+- Product listing
+- Product details
+- Search with facets
+- Cart functionality
+- Checkout flow
+- Account management
+- Styling with Tailwind
+
+The idea is that you clone the starter project and then customize it to your needs.
+
+:::note
+Prefer to build your own solution? Follow the rest of the guides in this section to learn how to build a Storefront from scratch.
+:::
+
+## Remix Storefront
+
+- 🔗 [remix-storefront.vendure.io](https://remix-storefront.vendure.io/)
+- 💻 [github.com/vendure-ecommerce/storefront-remix-starter](https://github.com/vendure-ecommerce/storefront-remix-starter)
+
+[Remix](https://remix.run/) is a React-based full-stack JavaScript framework which focuses on web standards, modern web app UX, and which helps you build better websites.
+
+Our official Remix Storefront starter provides you with a lightning-fast, modern storefront solution which can be deployed to any of the popular cloud providers like Vercel, Netlify, or Cloudflare Pages.
+
+![Remix Storefront](./remix-storefront.webp)
+
+## Qwik Storefront
+
+- 🔗 [qwik-storefront.vendure.io](https://qwik-storefront.vendure.io/)
+- 💻 [github.com/vendure-ecommerce/storefront-qwik-starter](https://github.com/vendure-ecommerce/storefront-qwik-starter)
+
+[Qwik](https://qwik.builder.io/) is a cutting-edge web framework that offers unmatched performance.
+
+Our official Qwik Storefront starter provides you with a lightning-fast, modern storefront solution which can be deployed to any of the popular cloud providers like Vercel, Netlify, or Cloudflare Pages.
+
+![Qwik Storefront](./qwik-storefront.webp)
+
+## Angular Storefront
+
+- 🔗 [angular-storefront.vendure.io](https://angular-storefront.vendure.io/)
+- 💻 [github.com/vendure-ecommerce/storefront-angular-starter](https://github.com/vendure-ecommerce/storefront-angular-starter)
+
+[Angular](https://angular.io/) is a popular, stable, enterprise-grade framework made by Google.
+
+Our official Angular Storefront starter is a modern Progressive Web App that uses Angular Universal server-side rendering.
+
+![Angular Storefront](./angular-storefront.webp)
+

BIN
docs/docs/guides/storefront/storefront-starters/qwik-storefront.webp


BIN
docs/docs/guides/storefront/storefront-starters/remix-storefront.webp


+ 8 - 8
docs/sidebars.js

@@ -71,6 +71,14 @@ const sidebars = {
                 icon: icon.book,
             },
         },
+        {
+            type: 'category',
+            label: 'Advanced Topics',
+            items: [{ type: 'autogenerated', dirName: 'guides/advanced-topics' }],
+            customProps: {
+                icon: icon.academicCap,
+            },
+        },
         {
             type: 'category',
             label: 'Extending the Admin UI',
@@ -87,14 +95,6 @@ const sidebars = {
                 icon: icon.shoppingBag,
             },
         },
-        {
-            type: 'category',
-            label: 'Advanced Topics',
-            items: [{ type: 'autogenerated', dirName: 'guides/advanced-topics' }],
-            customProps: {
-                icon: icon.academicCap,
-            },
-        },
         {
             type: 'category',
             label: 'Deployment',