vtex-sites · tlgimenes · Dec 3, 2021 · Dec 3, 2021 · Dec 3, 2021 · Dec 3, 2021
diff --git a/README.md b/README.md
@@ -29,13 +29,19 @@ Kickoff your store with this boilerplate. This starter ships with the main Fasts
     yarn
     ```
 
-2.  **Setup env vars**
+2.  **Setup store.config.js**
 
-    Choose the ecommerce platform provider of your choice in the `vtex.env` file and set the corresponding options. For instance, to connect to the VTEX platform on the store `fashioneurope`:
+    Choose the ecommerce platform provider of your choice in the `store.config` file and set the corresponding options. For instance, to connect to the VTEX platform on the store `fashioneurope`:
 
-    ```
-    GATSBY_STORE_ID=fashioneurope
-    GATSBY_VTEX_ENVIRONMENT=vtexcommercestable
+    ```js
+    module.exports = {
+      platform: 'vtex',
+
+      api: {
+        storeId: 'fashioneurope'
+        environment: 'vtexcommercestable'
+      }
+    }
     ```
 
 3.  **Start developing**
@@ -72,7 +78,7 @@ A quick look at the top-level files and directories you'll see in a Gatsby proje
     └── yarn.lock
     ├── package.json
     ├── tsconfig.json
-    ├── vtex.env
+    ├── store.config.js
     ├── README.md
     ├── __generated__
     ├── babel.config.js
@@ -107,7 +113,7 @@ A quick look at the top-level files and directories you'll see in a Gatsby proje
 
 11. **`tsconfig.json`**: The configuration file for the typescript compiler. This will statically analyze your code for errors and bugs before releasing them into production
 
-12. **`vtex.env`**: Environment variables needed for accessing your account in VTEX
+12. **`store.config.js`**: Configure your e-commerce platform, default sales channel etc.
 
 13. **`README.md`**: A text file containing useful reference information about your project.
 

diff --git a/cypress/global.js b/cypress/global.js
@@ -1,12 +1,6 @@
-export const pages = {
-  pdp: '/organza-sleeve-top-138/p',
-  collection: '/women',
-  collection_filtered:
-    '/women/?category-1=women&color=red&facets=category-1%2Ccolor',
-  search: '/s?q=shirt',
-  home: '/',
-  brand_name: 'lacoste',
-}
+import storeConfig from '../store.config'
+
+export const { pages } = storeConfig.cypress
 
 export const options = {
   onBeforeLoad: () => {

diff --git a/cypress/integration/a11y.test.js b/cypress/integration/a11y.test.js
@@ -4,7 +4,9 @@
  * Cypress tests for a11y (accessibility)
  */
 
-import { pages } from '../global'
+import { cypress } from '../../store.config'
+
+const { pages } = cypress
 
 describe('Accessibility tests', () => {
   beforeEach(() => {

diff --git a/cypress/integration/analytics.test.js b/cypress/integration/analytics.test.js
@@ -4,7 +4,10 @@
  * Cypress tests for testing the Analytics module
  */
 
-import { pages, options } from '../global'
+import { options } from '../global'
+import { cypress } from '../../store.config'
+
+const { pages } = cypress
 
 const dataLayerHasEvent = (eventName) => {
   return cy.window().then((window) => {

diff --git a/cypress/integration/cart.test.js b/cypress/integration/cart.test.js
@@ -4,7 +4,10 @@
  * Cypress tests for testing the Cart module
  */
 
-import { pages, options } from '../global'
+import { options } from '../global'
+import { cypress } from '../../store.config'
+
+const { pages } = cypress
 
 describe('Cart Sidebar', () => {
   beforeEach(() => {

diff --git a/cypress/integration/performance.test.js b/cypress/integration/performance.test.js
@@ -4,7 +4,10 @@
  * Cypress tests for testing the Cart module
  */
 
-import { pages, options } from '../global'
+import { options } from '../global'
+import { cypress } from '../../store.config'
+
+const { pages } = cypress
 
 describe('React rendering performance', () => {
   beforeEach(() => {

diff --git a/cypress/integration/plp.test.js b/cypress/integration/plp.test.js
@@ -4,7 +4,10 @@
  * Cypress tests for PLP
  */
 
-import { pages, options } from '../global'
+import { options } from '../global'
+import { cypress } from '../../store.config'
+
+const { pages } = cypress
 
 describe('Search page Filters and Sorting options', () => {
   beforeEach(() => {

diff --git a/cypress/integration/search.test.js b/cypress/integration/search.test.js
@@ -4,7 +4,10 @@
  * Cypress tests for Search Input
  */
 
-import { pages, options } from '../global'
+import { options } from '../global'
+import { cypress } from '../../store.config'
+
+const { pages } = cypress
 
 describe('Search input', () => {
   beforeEach(() => {

diff --git a/cypress/integration/seo.test.js b/cypress/integration/seo.test.js
@@ -6,7 +6,10 @@
  * TODO: Improve structured data validaton by actually using schema.org's schemas
  */
 
-import { pages, options } from '../global'
+import { options } from '../global'
+import { cypress } from '../../store.config'
+
+const { pages } = cypress
 
 describe('Home Page Seo', () => {
   beforeEach(() => {

diff --git a/gatsby-browser.js b/gatsby-browser.js
@@ -1,14 +1,15 @@
 import './src/styles/global.css'
 
+import { CartProvider, SessionProvider, UIProvider } from '@faststore/sdk'
 import React from 'react'
-import { SessionProvider, UIProvider, CartProvider } from '@faststore/sdk'
 
-import ErrorBoundary from './src/sdk/error/ErrorBoundary'
 import Layout from './src/Layout'
-import TestProvider from './src/sdk/tests'
-import { validateCart } from './src/sdk/cart/validate'
 import AnalyticsHandler from './src/sdk/analytics'
-import { uiInitialState, uiActions, uiEffects } from './src/sdk/ui'
+import { validateCart } from './src/sdk/cart/validate'
+import ErrorBoundary from './src/sdk/error/ErrorBoundary'
+import TestProvider from './src/sdk/tests'
+import { uiActions, uiEffects, uiInitialState } from './src/sdk/ui'
+import storeConfig from './store.config'
 
 export const wrapRootElement = ({ element }) => (
   <ErrorBoundary>
@@ -19,9 +20,7 @@ export const wrapRootElement = ({ element }) => (
           actions={uiActions}
           effects={uiEffects}
         >
-          <SessionProvider
-            initialState={{ channel: process.env.GATSBY_VTEX_CHANNEL }}
-          >
+          <SessionProvider initialState={{ channel: storeConfig.channel }}>
             <CartProvider mode="optimistic" onValidateCart={validateCart}>
               {element}
             </CartProvider>

diff --git a/gatsby-config.js b/gatsby-config.js
@@ -4,11 +4,11 @@ const { join, resolve } = require('path')
 
 const { getSchema, getContextFactory } = require('./src/server')
 const images = require('./src/images/config')
+const config = require('./store.config')
 
 const {
-  GATSBY_STORE_ID: STORE_ID,
   NODE_ENV,
-  URL = `https://${STORE_ID}.vtex.app`,
+  URL = config.storeUrl,
   DEPLOY_PRIME_URL = URL,
   CONTEXT: ENV = NODE_ENV,
   VTEX_WEBOPS: isWebOps,

diff --git a/gatsby-ssr.js b/gatsby-ssr.js
@@ -1,13 +1,14 @@
 /* eslint-disable react/jsx-filename-extension */
+import { CartProvider, SessionProvider, UIProvider } from '@faststore/sdk'
 import React from 'react'
-import { SessionProvider, UIProvider, CartProvider } from '@faststore/sdk'
 
-import ErrorBoundary from './src/sdk/error/ErrorBoundary'
 import Layout from './src/Layout'
-import TestProvider from './src/sdk/tests'
-import { validateCart } from './src/sdk/cart/validate'
 import AnalyticsHandler from './src/sdk/analytics'
-import { uiInitialState, uiActions, uiEffects } from './src/sdk/ui'
+import { validateCart } from './src/sdk/cart/validate'
+import ErrorBoundary from './src/sdk/error/ErrorBoundary'
+import TestProvider from './src/sdk/tests'
+import { uiActions, uiEffects, uiInitialState } from './src/sdk/ui'
+import storeConfig from './store.config'
 
 export const wrapRootElement = ({ element }) => (
   <ErrorBoundary>
@@ -18,9 +19,7 @@ export const wrapRootElement = ({ element }) => (
           actions={uiActions}
           effects={uiEffects}
         >
-          <SessionProvider
-            initialState={{ channel: process.env.GATSBY_VTEX_CHANNEL }}
-          >
+          <SessionProvider initialState={{ channel: storeConfig.channel }}>
             <CartProvider mode="optimistic" onValidateCart={validateCart}>
               {element}
             </CartProvider>

diff --git a/lighthouserc.js b/lighthouserc.js
@@ -1,10 +1,10 @@
 const VTEXLHConfig = require('@vtex/lighthouse-config').default
 
-const urls = ['/', '/women', '/organza-sleeve-top-138/p']
+const { lighthouse: lh } = require('./store.config')
 
 module.exports = VTEXLHConfig({
-  urls,
-  server: process.env.BASE_SITE_URL,
+  urls: Object.values(lh.pages),
+  server: lh.server,
   assertions: {
     'csp-xss': 'off',
     'legacy-javascript': ['error', { maxLength: 1 }],

diff --git a/src/pages/{StoreCollection.slug}.tsx b/src/pages/{StoreCollection.slug}.tsx
@@ -53,9 +53,11 @@ function Page(props: Props) {
 
   const { page } = searchParams
   const title = collection?.seo.title ?? site?.siteMetadata?.title ?? ''
-  const canonicalPath = `/${slug}/${page !== 0 ? `?page=${page}` : ''}`
+  const query = page !== 0 ? `?page=${page}` : ''
   const canonical =
-    host !== undefined ? `https://${host}${canonicalPath}` : canonicalPath
+    host !== undefined
+      ? `https://${host}/${slug}/${query}`
+      : `/${slug}/${query}`
 
   return (
     <SearchProvider

diff --git a/src/sdk/cart/useCheckoutButton.ts b/src/sdk/cart/useCheckoutButton.ts
@@ -1,10 +1,7 @@
 import { useCart } from './useCart'
+import * as storeConfig from '../../../store.config'
 
-const storeId = process.env.GATSBY_STORE_ID
-const environment = process.env.GATSBY_VTEX_ENVIRONMENT
-const checkoutURL =
-  process.env.GATSBY_CHECKOUT_URL ??
-  `https://${storeId}.${environment}.com.br/checkout`
+const { checkoutUrl } = storeConfig
 
 export const useCheckoutButton = () => {
   const { isValidating, id } = useCart()
@@ -13,7 +10,7 @@ export const useCheckoutButton = () => {
     e.preventDefault()
 
     if (!isValidating && id) {
-      window.location.href = `${checkoutURL}?orderFormId=${id}`
+      window.location.href = `${checkoutUrl}?orderFormId=${id}`
     }
   }
 

diff --git a/src/server/index.js b/src/server/index.js
@@ -3,11 +3,17 @@ const {
   getContextFactory: storeApiGetContextFactory,
 } = require('@faststore/api')
 
+const {
+  platform,
+  channel,
+  api: { storeId, environment },
+} = require('../../store.config')
+
 const options = {
-  platform: process.env.GATSBY_COMMERCE_PLATFORM,
-  account: process.env.GATSBY_STORE_ID,
-  environment: process.env.GATSBY_VTEX_ENVIRONMENT,
-  channel: process.env.GATSBY_VTEX_CHANNEL,
+  platform,
+  account: storeId,
+  environment,
+  channel,
 }
 
 const schema = storeApiGetSchema(options)

diff --git a/store.config.js b/store.config.js
@@ -0,0 +1,39 @@
+module.exports = {
+  // Ecommerce Platform
+  platform: 'vtex',
+
+  // Platform specific configs for API
+  api: {
+    storeId: 'fashioneurope',
+    environment: 'vtexcommercestable',
+  },
+
+  // Default channel
+  channel: '1',
+
+  // Production URLs
+  storeUrl: 'https://www.vtex-base1.tk',
+  checkoutUrl: 'https://chk.vtex-base1.tk/checkout',
+
+  // Lighthouse CI
+  lighthouse: {
+    server: process.env.BASE_SITE_URL || 'http://localhost:9000',
+    pages: {
+      home: '/',
+      pdp: '/organza-sleeve-top-138/p',
+      collection: '/women',
+    },
+  },
+
+  // E2E CI
+  cypress: {
+    pages: {
+      home: '/',
+      pdp: '/organza-sleeve-top-138/p',
+      collection: '/women',
+      collection_filtered:
+        '/women/?category-1=women&color=red&facets=category-1%2Ccolor',
+      search: '/s?q=shirt',
+    },
+  },
+}
diff --git a/vtex.env b/vtex.env
@@ -1,14 +1,7 @@
-GATSBY_COMMERCE_PLATFORM=vtex
-GATSBY_STORE_ID=fashioneurope
-GATSBY_VTEX_CHANNEL=1
-GATSBY_VTEX_ENVIRONMENT=vtexcommercestable
 GATSBY_CPU_COUNT=4
-GATSBY_CHECKOUT_URL=https://chk.vtex-base1.tk/checkout
-
-# 🐞🐞 Uncomment for debugging final bundle 🐞🐞
-GATSBY_STORE_PROFILING=false
 
 USE_NODE_MODULES_CACHE=true
 USE_GATSBY_CACHE=false
 
-URL=https://www.vtex-base1.tk
+# 🐞🐞 Uncomment for debugging final bundle 🐞🐞
+# GATSBY_STORE_PROFILING=true