From 770011a94f6fd8ac53f93c8112f9bf5e8eb956a4 Mon Sep 17 00:00:00 2001 From: Tiago Gimenes Date: Fri, 3 Dec 2021 15:31:05 -0300 Subject: [PATCH 1/6] merge configs into a single file --- cypress/global.js | 12 +++------- cypress/integration/a11y.test.js | 4 +++- cypress/integration/analytics.test.js | 5 +++- cypress/integration/cart.test.js | 5 +++- cypress/integration/performance.test.js | 5 +++- cypress/integration/plp.test.js | 5 +++- cypress/integration/search.test.js | 5 +++- cypress/integration/seo.test.js | 5 +++- gatsby-browser.js | 15 ++++++------ gatsby-config.js | 4 ++-- gatsby-ssr.js | 15 ++++++------ lighthouserc.js | 6 ++--- src/sdk/cart/useCheckoutButton.ts | 9 +++---- src/server/index.js | 15 ++++++++---- store.config.js | 32 +++++++++++++++++++++++++ vtex.env | 11 ++------- 16 files changed, 97 insertions(+), 56 deletions(-) create mode 100644 store.config.js diff --git a/cypress/global.js b/cypress/global.js index db493d66d..7c865a792 100644 --- 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 index 6dbfcd09e..48fcf323f 100644 --- 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 index fa038c23e..8c9a3c8c1 100644 --- 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 index f32f79943..02a5bf49f 100644 --- 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 index f38681a6d..9070634b6 100644 --- 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 index d868e70d8..a98e9640d 100644 --- 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 index b8b240a16..4e898feab 100644 --- 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 index 5fd8ad31e..48dfa85a8 100644 --- 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 index 8f001b21d..dd4f1f5c9 100644 --- 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 }) => ( @@ -19,9 +20,7 @@ export const wrapRootElement = ({ element }) => ( actions={uiActions} effects={uiEffects} > - + {element} diff --git a/gatsby-config.js b/gatsby-config.js index 1daf7a085..25339d3a9 100644 --- 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 index 4db597b37..98b702bd6 100644 --- 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 }) => ( @@ -18,9 +19,7 @@ export const wrapRootElement = ({ element }) => ( actions={uiActions} effects={uiEffects} > - + {element} diff --git a/lighthouserc.js b/lighthouserc.js index 1b57089c9..5c2ff59e7 100644 --- 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: lh.urls, + server: lh.server, assertions: { 'csp-xss': 'off', 'legacy-javascript': ['error', { maxLength: 1 }], diff --git a/src/sdk/cart/useCheckoutButton.ts b/src/sdk/cart/useCheckoutButton.ts index 79851b929..596b28682 100644 --- 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 index 3cd3d6d5e..f83122384 100644 --- a/src/server/index.js +++ b/src/server/index.js @@ -3,11 +3,18 @@ const { getContextFactory: storeApiGetContextFactory, } = require('@faststore/api') +const { + platform, + storeId, + environment, + channel, +} = 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 new file mode 100644 index 000000000..5ed093636 --- /dev/null +++ b/store.config.js @@ -0,0 +1,32 @@ +module.exports = { + // Ecommerce Platform + platform: 'vtex', + + // Platform specific configs + storeId: 'fashioneurope', + environment: 'vtexcommercestable', + + 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', + urls: ['/', '/women', '/organza-sleeve-top-138/p'], + }, + + // E2E CI + cypress: { + 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: '/', + }, + }, +} diff --git a/vtex.env b/vtex.env index e21071bee..20241cab4 100644 --- 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 From 4348df672ed82648d8a84d230813ac79fef34d98 Mon Sep 17 00:00:00 2001 From: Tiago Gimenes Date: Fri, 3 Dec 2021 15:39:16 -0300 Subject: [PATCH 2/6] move api to a single section --- src/server/index.js | 3 +-- store.config.js | 9 ++++++--- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/server/index.js b/src/server/index.js index f83122384..aab089aab 100644 --- a/src/server/index.js +++ b/src/server/index.js @@ -5,9 +5,8 @@ const { const { platform, - storeId, - environment, channel, + api: { storeId, environment }, } = require('../../store.config') const options = { diff --git a/store.config.js b/store.config.js index 5ed093636..7b2336d9a 100644 --- a/store.config.js +++ b/store.config.js @@ -2,10 +2,13 @@ module.exports = { // Ecommerce Platform platform: 'vtex', - // Platform specific configs - storeId: 'fashioneurope', - environment: 'vtexcommercestable', + // Platform specific configs for API + api: { + storeId: 'fashioneurope', + environment: 'vtexcommercestable', + }, + // Default channel channel: '1', // Production URLs From e7828a5a09f6d9e2a6c5011126b0a417a11b7417 Mon Sep 17 00:00:00 2001 From: Tiago Gimenes Date: Fri, 3 Dec 2021 15:45:13 -0300 Subject: [PATCH 3/6] update README --- README.md | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 05b072df2..ffc35afd9 100644 --- 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. From a57cc22f2f5fae977fdbac647a32d8432b187928 Mon Sep 17 00:00:00 2001 From: Tiago Gimenes Date: Fri, 3 Dec 2021 16:07:42 -0300 Subject: [PATCH 4/6] apply requested changes --- lighthouserc.js | 4 ++-- store.config.js | 8 ++++++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/lighthouserc.js b/lighthouserc.js index 5c2ff59e7..9a2530032 100644 --- a/lighthouserc.js +++ b/lighthouserc.js @@ -3,8 +3,8 @@ const VTEXLHConfig = require('@vtex/lighthouse-config').default const { lighthouse: lh } = require('./store.config') module.exports = VTEXLHConfig({ - urls: lh.urls, - server: lh.server, + urls: lh.pages, + server: Object.values(lh.server), assertions: { 'csp-xss': 'off', 'legacy-javascript': ['error', { maxLength: 1 }], diff --git a/store.config.js b/store.config.js index 7b2336d9a..0e0a203b4 100644 --- a/store.config.js +++ b/store.config.js @@ -18,18 +18,22 @@ module.exports = { // Lighthouse CI lighthouse: { server: process.env.BASE_SITE_URL || 'http://localhost:9000', - urls: ['/', '/women', '/organza-sleeve-top-138/p'], + 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', - home: '/', }, }, } From 80a002870745fe9d906b65570438f8acf283f30e Mon Sep 17 00:00:00 2001 From: Tiago Gimenes Date: Fri, 3 Dec 2021 16:14:40 -0300 Subject: [PATCH 5/6] fix wrong lh config --- lighthouserc.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lighthouserc.js b/lighthouserc.js index 9a2530032..7396443b5 100644 --- a/lighthouserc.js +++ b/lighthouserc.js @@ -3,8 +3,8 @@ const VTEXLHConfig = require('@vtex/lighthouse-config').default const { lighthouse: lh } = require('./store.config') module.exports = VTEXLHConfig({ - urls: lh.pages, - server: Object.values(lh.server), + urls: Object.values(lh.pages), + server: lh.server, assertions: { 'csp-xss': 'off', 'legacy-javascript': ['error', { maxLength: 1 }], From 7631b75c021196b553734e8a72b79454aedc092b Mon Sep 17 00:00:00 2001 From: Tiago Gimenes Date: Fri, 3 Dec 2021 16:34:08 -0300 Subject: [PATCH 6/6] fix sonnarqube --- src/pages/{StoreCollection.slug}.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/pages/{StoreCollection.slug}.tsx b/src/pages/{StoreCollection.slug}.tsx index 11e8eb828..aa66cbbd4 100644 --- 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 (