docs: vtex integration

docs/docs/how-to-guides/platform-integration/vtex/hosting-a-faststore-vtex-website.md

@@ -0,0 +1,95 @@
+---
+title: Hosting a FastStore + VTEX website
+sidebar_position: 1
+---
+
+In this guide, you will learn how to integrate your **FastStore** storefront project with **VTEX** and how to make it publicly available to end-users.
+
+Notice that we strongly recommend taking this guide as a first step when integrating your storefront project with VTEX. This way, by the end of this guide, you will be able to continue configuring other VTEX solutions (**Checkout**, **Order Placed**, **Login**, and **My Account**) and check them working in production as you integrate them with your project.
+
+---
+
+## Before you start
+
+Before proceeding any further, make sure you have access to a **VTEX** account and have already [developed your storefront project with **FastStore**.](/tutorials/gatsby-overview)
+
+---
+
+## Step by step
+
+By the end of these steps, you'll host your FastStore website on the internet. Hence, if you'll configure other VTEX solutions (**Checkout**, **Order Placed**, **Login**, and **My Account**) afterward, make sure to use a fictitious domain in the following steps. Then, once you set up all the desired integrations, repeat this guide procedure using your final domain to make your website publicly available to end-users.
+
+### Step 1 - Configuring your website domain
+
+To make your website publicly available, you need to configure a domain that points to the IP address where your store is hosted. 
+
+:::info
+To see which IP address corresponds to your store website (`{account}.vtex.app`), use the `nslookup` command as in the following:
+
+1. Open the terminal.
+2. Enter `nslookup {account}.vtex.app` (e.g., `nslookup base.vtex.app`).
+3. Hit Enter. 
+
+Now look below the `Non-authoritative answer` message to see the IP addresses capable of hosting your website. 
+:::
+
+You must also add a subdomain called `secure` pointing to `{account}.vtexcommercestable.com.br`. This will allow the **Checkout**, **Order Placed**, **Login**, and **My Account** pages to work under that subdomain.
+
+Notice that depending on which domain provider you use, the steps to configure your website domain may vary. *See the documentation of your domain provider for more information.*
+
+### Step 2 - Setting up your VTEX account
+
+Now you must set up your VTEX account to use the domains you configured in the previous step. To proceed, make sure your store is active and in production.
+
+1. Access the VTEX Admin.
+2. Go to **Account Settings > Account Management > Account**.
+3. Under the **Store** section, click on **Add new host**.
+4. Add both your main domain and subdomain to the list.
+   ![Host configuration](/img/how-to-guides/license-manager-hosts.png)
+5. Click on **Save**.
+
+### Step 3 - Updating your FastStore project
+
+Back to your FastStore project, you must also configure your project to point to the right addresses and domains.
+
+1. Open your FastStore project in any code editor of your preference.
+2. Open the `store.config.js` file.
+4. Update the `storeUrl`, `secureSubdomain`, `checkoutUrl`, `loginUrl`, and `accountUrl` properties as in the following:
+   - **`storeUrl`**: https://{maindomain}
+   - **`secureSubdomain`**: https://{subdomain}.{maindomain}
+   - **`checkoutUrl`**: https://{subdomain}.{maindomain}/checkout
+   - **`loginUrl`**: https://{subdomain}.{maindomain}/api/io/login
+   - **`accountUrl`**: https://{subdomain}.{maindomain}/api/io/account
+   Take the follwoing example of how this code block would look after configuring a store with the main domain as `vtexfaststore.com` and subdomain `secure`:
+
+   ```diff title="store.config.js"
+      ...
+
+      // Default channel
+      channel: '1',
+
+   +  // Production URLs
+   +  storeUrl: 'https://vtexfaststore.com',
+   +  secureSubdomain: 'https://secure.vtexfaststore.com',
+   +  checkoutUrl: 'https://secure.vtexfaststore.com/checkout',
+   +  loginUrl: 'https://secure.vtexfaststore.com/api/io/login',
+   +  accountUrl: 'https://secure.vtexfaststore.com/api/io/account',
+
+      // Lighthouse CI
+      lighthouse: {
+      ...
+   ```
+
+5. Save your changes.
+6. Open a Pull Request and commit your changes.
+
+---
+
+## Next steps
+
+To provide shoppers with a full checkout and post-purchase experience, make sure to check the following documents:
+
+1. Integrating your FastStore project with VTEX Login (*Docs coming soon*).
+2. Integrating your FastStore project with VTEX Order Placed (*Docs coming soon*).
+3. Integrating your FastStore project with VTEX Checkout (*Docs coming soon*).
+4. Integrating your FastStore project with VTEX My Account (*Docs coming soon*).

docs/sidebars.js

@@ -65,10 +65,38 @@ module.exports = {
   ],
   howToGuidesSidebar: [
     'how-to-guides/overview',
+    {
+      type: 'category',
+      label: 'Platform Integration',
+      collapsed: true,
+      link: {
+        type: 'generated-index',
+        title: 'Platform Integration',
+        slug: '/how-to-guides/platform-integration',
+      },
+      items: [
+        {
+          type: 'category',
+          label: 'VTEX',
+          collapsed: false,
+          link: {
+            type: 'generated-index',
+            title: 'VTEX',
+            slug: '/how-to-guides/platform-integration/vtex',
+          },
+          items: [
+            {
+              type: 'autogenerated',
+              dirName: 'how-to-guides/platform-integration/vtex',
+            },
+          ],
+        },
+      ],
+    },
     {
       type: 'category',
       label: 'CMS Integration',
-      collapsed: false,
+      collapsed: true,
       link: {
         type: 'generated-index',
         title: 'VTEX Headless CMS',
@@ -79,6 +107,11 @@ module.exports = {
           type: 'category',
           label: 'VTEX Headless CMS',
           collapsed: false,
+          link: {
+            type: 'generated-index',
+            title: 'VTEX',
+            slug: '/how-to-guides/cms/vtex',
+          },
           items: [
             {
               type: 'autogenerated',
@@ -90,23 +123,35 @@ module.exports = {
     },
     {
       type: 'category',
-      label: 'VTEX IO WebOps',
-      collapsed: false,
+      label: 'Deployment',
+      collapsed: true,
       link: {
         type: 'generated-index',
-        title: 'VTEX IO WebOps',
-        slug: '/how-to-guides/webops',
+        title: 'Deployment',
+        slug: '/how-to-guides/deployment',
       },
       items: [
         {
           type: 'category',
-          label: 'Security',
-          collapsed: false,
-          link: { type: 'doc', id: 'how-to-guides/webops/security' },
+          label: 'VTEX IO WebOps',
+          collapsed: true,
+          link: {
+            type: 'generated-index',
+            title: 'VTEX IO WebOps',
+            slug: '/how-to-guides/webops',
+          },
           items: [
             {
-              type: 'autogenerated',
-              dirName: 'how-to-guides/webops/security',
+              type: 'category',
+              label: 'Security',
+              collapsed: false,
+              link: { type: 'doc', id: 'how-to-guides/webops/security' },
+              items: [
+                {
+                  type: 'autogenerated',
+                  dirName: 'how-to-guides/webops/security',
+                },
+              ],
             },
           ],
         },
@@ -115,7 +160,7 @@ module.exports = {
     {
       type: 'category',
       label: 'Contributing',
-      collapsed: false,
+      collapsed: true,
       items: [
         {
           type: 'autogenerated',

docs/src/css/custom.css

@@ -159,10 +159,6 @@ code {
   @apply bg-whiteIce bg-opacity-50;
 }
 
-.admonition-content {
-  @apply flex;
-}
-
 .admonition-heading {
   @apply hidden;
 }
@@ -174,12 +170,12 @@ code {
 }
 
 .admonition-info {
-  @apply box-border rounded;
+  @apply box-border rounded flex;
   background: #e3edf1;
   border: 1px solid #5bc1de;
 }
 
-.admonition-info .admonition-content::before {
+.admonition-info::before {
   @apply flex items-center pr-4 font-black;
   color: #5bc1de;
   font-family: 'Font Awesome\ 5 Free';
@@ -192,7 +188,7 @@ code {
   border: 1px solid #dcdfe0;
 }
 
-.admonition-note .admonition-content::before {
+.admonition-note::before {
   @apply flex items-center pr-4 font-black;
   color: #dcdfe0;
   font-family: 'Font Awesome\ 5 Free';
@@ -205,7 +201,7 @@ code {
   border: 1px solid #adc7bd;
 }
 
-.admonition-tip .admonition-content::before {
+.admonition-tip::before {
   @apply flex items-center pr-4 ;
   color: #adc7bd;
   font-family: 'Font Awesome\ 5 Free';
@@ -218,7 +214,7 @@ code {
   border: 1px solid #eea236;
 }
 
-.admonition-caution .admonition-content::before {
+.admonition-caution::before {
   @apply flex items-center pr-4 font-black;
   color: #eea236;
   font-family: 'Font Awesome\ 5 Free';

docs/static/data/doc-update.json

@@ -1,4 +1,17 @@
 [
+  {
+    "date": "2022-02-02",
+    "type": "Added",
+    "menu": "How-to Guides",
+    "category": "Platform Integration",
+    "path": "/how-to-guides/platform-integration",
+    "docs": [
+      {
+        "path": "/how-to-guides/platform-integration/vtex",
+        "title": "Integrating FastStore with VTEX"
+      }
+    ]
+  },
   {
     "date": "2022-01-26",
     "type": "Fixed",