diff --git a/docs/docs/quickstart.md b/docs/docs/quickstart.md index 1b24997c7e..443057bb96 100644 --- a/docs/docs/quickstart.md +++ b/docs/docs/quickstart.md @@ -30,15 +30,14 @@ Install dependencies using yarn. yarn install ``` -### Step 3. Setting up environment variables +### Step 3. Configuring your project settings -Open the `vtex.env` file using the code editor of your choice and set up the following environment variables: +Open the `store.config.js` file using the code editor of your choice and set up the config to you store. -```shell -GATSBY_STORE_ID={vtexAccount} # Replace with the name of your VTEX account -GATSBY_VTEX_ENVIRONMENT={vtexEnvironment} # Replace with the VTEX environment you'll use to deploy your store. For most cases, use vtexcommercestable. -GATSBY_VTEX_IO_WORKSPACE={vtexWorkspace} # Replace with the name of the VTEX workspace you'll use to develop your store. For most cases, use master. -``` +1. Replace the`storeId` value with the id of your account. +2. Replace the `storeUrl` and `checkoutUrl` values with the corresponding production URLs of your store. +3. Go to the `lighthouse.pages` property and add the paths of the pages you want to track performance over time. +4. Go to the `cypress.pages` property and add the paths of the pages you want to end-to-end test before each release. ### Step 4. Running your store locally @@ -52,4 +51,4 @@ yarn develop Your store will start at a hot-reloading environment at [http://localhost:8000/](http://localhost:8000/), and you'll also have access to GraphiQL at [http://localhost:8000/___graphql](http://localhost:8000/___graphql), a tool that you can use to fetch data and build queries. -🎉 *That's all!* You're now ready to start making changes to your FastStore + Gatsby storefront. \ No newline at end of file +🎉 *That's all!* You're now ready to start making changes to your FastStore + Gatsby storefront. diff --git a/packages/api/README.md b/packages/api/README.md index 8db8944b29..70bc963587 100644 --- a/packages/api/README.md +++ b/packages/api/README.md @@ -1,115 +1,3 @@ # @faststore/api -The only API you need for building your next ecommerce. - -This package defines a front-end first, GraphQL API inspired by clean architecture and schema.org. - -GraphQL types defined in this repo extends and simplifies schema.org. This makes it easier to make your frontend search friendly. -Also, by using the clean architecture, all types defined on this schema are not platform specific, but created to resolve an specific business case on your frontend, like rendering listprices, sellers etc. - -Alongside the GraphQL type definitions, we provide standard implementations for common ecommerce platforms. Currently we support: -1. VTEX -2. Maybe add yours? - -With the typedefs and resolvers, you can create an executable schema and deploy anywhere you want. For instance, one use case would be: -1. Create an Apollo Server instane on Heroku -2. Run the executable schema in a function on Next.JS -3. Run the executable schema during a Gatsby build. - -## Install - -```bash -yarn add @faststore/api -``` - -## Usage -GraphQL is very versatile and can run in many places. To setup the schema in an apollo server, just: -```ts -import { getSchema } from '@faststore/api' -import { ApolloServer } from 'apollo-server' - -// Get the Store schema -const schema = await getSchema({ platform: 'vtex', account: 'my-account', environment: 'vtexcommercestable' }) - -// Setup Apollo Server -const server = new ApolloServer({ schema }); - -// The `listen` method launches a web server. -server.listen().then(({ url }) => { - console.log(`🚀 Server ready at ${url}`); -}); -``` - -## Extending the schema -GraphQL is a very versatile language. By using the exported `getSchema` function, you can not only extend the base schema but also redefine the whole resolvers implementation. - -To extend the schema, one can: -```ts -import { getSchema } from '@faststore/api' -import { makeExecutableSchema, mergeSchemas } from '@graphql-tools/schema' -import { ApolloServer } from 'apollo-server' - -// Setup type extensions -const typeDefs = ` -extend type Product { - customField: String! -} -` - -// Setup custom resolvers -const resolvers = { - Product: { - customField: async () => { - ... - // Your code goes here - ... - } - } -} - -// Create custom schema -const customSchema = makeExecutableSchema({ resolvers, typeDefs }) -const storeApiSchema = await getSchema({ platform: 'vtex', ...}) - -// Merge schemas into a final schema -const finalSchema = mergeSchemas(schemas: [ - storeApiSchema, - customSchema -]) - -// Setup Apollo Server -const server = new ApolloServer({ schema }); - -// The `listen` method launches a web server. -server.listen().then(({ url }) => { - console.log(`🚀 Server ready at ${url}`); -}); -``` - -## Inline platform -If your ecommerce platform is not supported you have two options. -1. Make a contribution -2. Create inline resolvers for your platform - -Inline resolves means you are going to write all resolvers for the api schema in your project or in an external library. This is recommended if you are supporting a niche platform and want to have full control over how each field is processed. - -To create your own resolvers, you can: -```ts -import { getTypeDefs } from '@faststore/api' -import { ApolloServer } from 'apollo-server' -import { makeExecutableSchema } from '@graphql-tools/schema' - -// Get the Store API TypeDefs -const typeDefs = getTypeDefs() - -const resolvers = { - ... - // add your resolvers - ... -} - -// Create a runnable schema -const schema = makeExecutableSchema({ resolvers, typeDefs }) - -// You now have a runnable GraphQL schema, you can create a server or run queries locally. -``` +Docs moved to: https://faststore.dev/reference/api/overview diff --git a/packages/sdk/README.md b/packages/sdk/README.md index c94bccdc12..aa3472f271 100644 --- a/packages/sdk/README.md +++ b/packages/sdk/README.md @@ -1,34 +1,3 @@ # @faststore/sdk -A simple, framework agnostic implementation of Commerce APIs to help you create you next React-based store with world class performance in record time - -[![NPM](https://img.shields.io/npm/v/@faststore/sdk.svg)](https://www.npmjs.com/package/@faststore/sdk) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) - -## Install - -```bash -yarn add @faststore/sdk -``` - -## Usage - -```tsx -import React from 'react' -import type { FC } from 'react' - -import { useHook } from '@faststore/sdk' - -const MyStoreComponent: FC = () => { - const props = useHook() - - return Hello Commerce -} -``` - -## Analytics - -The analytics data layer is based on [the official GA4 specification](https://developers.google.com/gtagjs/reference/ga4-events). - -## License - -MIT © [VTEX](https://github.com/vtex/faststore) +Docs moved to https://faststore.dev/reference/sdk/overview diff --git a/packages/ui/README.md b/packages/ui/README.md index 6c9736d528..4b3f65a887 100644 --- a/packages/ui/README.md +++ b/packages/ui/README.md @@ -1,46 +1,3 @@ # @faststore/ui -> Next store component library - -[![NPM](https://img.shields.io/npm/v/@faststore/ui.svg)](https://www.npmjs.com/package/@faststore/ui) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) - -## Installation - -From the command line in your project directory, run npm install `@faststore/ui` or yarn add `@faststore/ui`. - -```cmd -npm install @faststore/ui -# or -yarn add @faststore/ui -``` - -For style, you can use our default theme. To install: - -```cmd -npm install @vtex/theme-b2c-tailwind -# or -yarn add @vtex/theme-b2c-tailwind -``` - -## Usage - -```tsx -import { Button } from '@faststore/ui' -import '@vtex/theme-b2c-tailwind/dist/index.css' -``` - -```tsx -import React, { Component } from 'react' - -import MyComponent from '@faststore/ui' - -class Example extends Component { - render() { - return - } -} -``` - -## License - -MIT © [emersonlaurentino](https://github.com/emersonlaurentino) +Docs moved to https://faststore.dev/reference/ui/overview