Skip to content

Commit

Permalink
docs: update quickstart (#1066)
Browse files Browse the repository at this point in the history
  • Loading branch information
tlgimenes authored Dec 9, 2021
1 parent d42fe63 commit f5eeae6
Show file tree
Hide file tree
Showing 4 changed files with 10 additions and 197 deletions.
15 changes: 7 additions & 8 deletions docs/docs/quickstart.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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.
🎉 *That's all!* You're now ready to start making changes to your FastStore + Gatsby storefront.
114 changes: 1 addition & 113 deletions packages/api/README.md
Original file line number Diff line number Diff line change
@@ -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
33 changes: 1 addition & 32 deletions packages/sdk/README.md
Original file line number Diff line number Diff line change
@@ -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 <MyComponent props>Hello Commerce</MyComponent>
}
```

## 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
45 changes: 1 addition & 44 deletions packages/ui/README.md
Original file line number Diff line number Diff line change
@@ -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 <MyComponent />
}
}
```

## License

MIT © [emersonlaurentino](https://github.com/emersonlaurentino)
Docs moved to https://faststore.dev/reference/ui/overview

0 comments on commit f5eeae6

Please sign in to comment.