Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: update quickstart #1066

Merged
merged 4 commits into from
Dec 9, 2021
Merged

docs: update quickstart #1066

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fa20941
move docs
tlgimenes Dec 8, 2021
c391551
fix quickstart
tlgimenes Dec 8, 2021
a211625
Update docs/docs/quickstart.md
tlgimenes Dec 9, 2021
ac3d9e9
Update docs/docs/quickstart.md
tlgimenes Dec 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 7 additions & 8 deletions docs/docs/quickstart.md
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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