vuestorefront · filipsobol · Jan 14, 2022 · Jan 14, 2022
@@ -130,9 +130,9 @@ module.exports = {
         children: [
           ['/getting-started/introduction', 'Introduction'],
           ['/getting-started/project-structure', 'Project structure'],
+          ['/getting-started/configuration', 'Configuration'],
           ['/getting-started/layouts-and-routing', 'Layouts and Routing'],
           ['/getting-started/theme', 'Theme'],
-          ['/getting-started/configuration', 'Configuration'],
           ['/getting-started/internationalization', 'Internationalization'],
           ['/getting-started/logging', 'Logging'],
           // ['/', 'Glossary']

@@ -36,7 +36,7 @@ module.exports = {
         // other extensions
       ],
       configuration: {},
-      customQueryes: {}
+      customQueries: {}
     }
   }
 };

@@ -1,97 +1,37 @@
 # Configuration
 
-Usually, the first thing to do after setting up a fresh Vue Storefront project is configuring it. The bare minimum is to provide the API credentials for your integrations.
-
-Your Vue Storefront-related configuration is located in two places:
-
-- `nuxt.config.js` is a place where you're configuring properties related only to the frontend part of your application.
-- `middleware.config.js` is a place where you're configuring your integration middleware. You will put there API keys, integration configurations, custom GraphQL queries, and new API endpoints.
-
-## Configuring Integrations
-
-Most of the integrations business logic is placed in the [Integration Middleware](/architecture/server-middleware.html). Therefore they're configurable through the `integrations` field in `middleware.config.js`. 
-
-```js
-// middleware.config.js
-module.exports = {
-  integrations: {
-   // integration configs
-  }
-};
-```
-
-Sometimes integrations also expose a Nuxt module to configure frontend-related properties and [i18n](/getting-started/internationalization.html).
-
-```js
-// nuxt.config.js
-[`@vue-storefront/{INTEGRATION}/nuxt` {
-  i18n: {
-    // i18n config
-  }
-}]
-```
-
-## Configuring Nuxt
-
-We try to use the most common modules from Nuxt Community whenever it's possible. For example, we use the `nuxt-i18n` package for internationalization and the `@nuxtjs/pwa` package PWA capabilities. You can find a list of the Nuxt modules used in the default theme [here](theme.html#preinstalled-modules-and-libraries). Each of them is configured in a way that works best for the majority of users.
-
-There are some features and behaviors that are specific to Vue Storefront only yet not specific to a certain integration. You can configure such things through `@vue-storefront/nuxt` module.
-
-[//]: # 'TODO: Add documentation for VSF/NUXT module'
-
-Below you can find its default configuration:
-
-```js
-// nuxt.config.js
-[
-  `@vue-storefront/nuxt`,
-  {
-    // use only if you're developing an integration
-    // adds theme inheritance mechanism
-    coreDevelopment: false,
-    logger: {
-      // read about this part in `Getting Started > Logging` section
-    },
-    performance: {
-      httpPush: true,
-      // installs https://purgecss.com/guides/nuxt.html
-      // CAUTION: Could break classess generated dynamically (eg variable + '-secondary')
-      purgeCSS: {
-        enabled: false,
-        paths: ['**/*.vue'],
-      },
-    },
-    // use `module` field from `package.json` for included packages
-    // custom configuration will be merged with the default one
-    // this property is used mainly to process ESM and benefit the most from treeshaking
-    useRawSource: {
-      dev: ['@storefront-ui/vue', '@storefront-ui/shared'],
-      prod: ['@storefront-ui/vue', '@storefront-ui/shared'],
-    },
-  },
-];
-```
-
-::: danger
-It's unsafe and not recommended to remove `@vue-storefront/nuxt` from your project. Integrations and other modules rely on it.
-:::
-
-## Configuring Server Middleware
-
-You can read more about the Server Middleware and its configuration on the [Server Middleware](/architecture/server-middleware.html) page.
-
-## Integration References
-
-### Setting up official eCommerce integrations
-
-<CommerceIntegrationLinks 
- commercetools="/commercetools/getting-started.html"
- shopify="/shopify/api-client.html"
-/>
-
-### Configuration references of official eCommerce integrations
-
-<CommerceIntegrationLinks 
- commercetools="/commercetools/configuration.html"
- shopify="/shopify/api-client.html"
-/>
+Whenever starting a new project or jumping into an existing one, you should look into the configuration files first. They control almost every aspect of the application, including installed integrations.
+
+## Mandatory configuration files
+
+Every Vue Storefront project must contain two configuration files described below. They control both client and server parts of the application.
+
+### `nuxt.config.js`
+
+**The `nuxt.config.js` file is the starting point of every project.** It contains general configuration, including routes, global middlewares, internationalization, or build information. This file also registers modules and plugins to add or extend framework features. Because almost every Vue Storefront integration has a module or plugin, you can identify which integrations are used by looking at this file.
+
+You can learn more about this file and available configuration options on the [Nuxt configuration file](https://nuxtjs.org/docs/directory-structure/nuxt-config/) page.
+
+### `middleware.config.js`
+
+The `middleware.config.js` file is as essential as `nuxt.confis.js`, but much simpler and likely smaller. It configures the Server Middleware used for communication with e-commerce platforms and contains sensitive credentials, custom endpoints, queries, etc.
+
+You can learn more about Server Middleware and available configuration options on the [Server Middleware](/architecture/server-middleware.html) page.
+
+## Optional configuration files
+
+Depending on the integrations used, your project might include some additional configuration files not described above. Let's walk through the most common ones.
+
+- [`tsconfig.json`](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) configures compiler used to strongly type the project using TypeScript language. It defines a list of files and directories to be included and excluded from analysis and compiling.
+
+- [`.babelrc`](https://babeljs.io/docs/en/config-files) configures Babel compiler used to make the code backward compatible with older browsers and environments.
+
+- [`jest.config.js`](https://jestjs.io/docs/configuration) configures Jest testing framework, used for writing and running unit tests.
+
+- [`.eslintrc.js`](https://eslint.org/docs/user-guide/configuring/) configures ESLint static code analyzer. It enforces code style by identifying and reporting patterns that make code inconsistent or prone to bugs.
+
+- [`.lintstagedrc`](https://github.com/okonet/lint-staged#configuration) configures lint runner that enforces code style before every Git commit. By default, it runs ESLint described above.
+
+## What's next
+
+As the next step, we will learn about [Layouts and Routing](./layouts-and-routing.html) and show what routes come predefined in every Vue Storefront project and how to register custom ones.
@@ -40,4 +40,4 @@ The next step in the learning process is reading [Nuxt.js documentation](https:/
 
 ## What's next
 
-With fundamentals out of our way, it's time to undestand the [Project structure](./project-structure.html) and learn how to navigate it and which files do what.
+Now that we understand what Vue Storefront is, it's time to understand the [Project structure](./project-structure.html) and learn how to navigate it and which files do what.
@@ -24,26 +24,10 @@ To learn about it in-depth, you can refer to the [Directory Structure in Nuxt.js
 
 * [**static**](https://nuxtjs.org/docs/2.x/directory-structure/static) contains files that likely won't change, such as favicon, `robots.txt`, sitemap, or company logos.
 
-* [**middleware.config.js**](/architecture/server-middleware.html#configuration) configuration file for the [Server Middleware](/architecture/server-middleware.html). It defines and configures most of the platform integrations in your application.
-
-* [**nuxt.config.js**](https://nuxtjs.org/docs/2.x/directory-structure/nuxt-config) configuration file for the whole Nuxt.js application.
+* **middleware.config.js** and **nuxt.config.js** configurations file are described in detail in the [Configuration](./configuration.html) document.
 
 Some integrations can have slightly different structures, with more or fewer files and directories. For more information, refer to the Nuxt.js documentation linked above and integration documentation.
 
-## Start with the `nuxt.config.js` file
-
-<q>
-
-Whenever starting a new project or jumping into an existing one, the first place you should look into is the `nuxt.config.js` file. It contains general configuration for the whole project, including routes, global middlewares, internationalization, or build information.
-
-</q>
-
-In the `nuxt.config.js` file, we also define modules and plugins we want to use to add or extend framework features. Because almost every Vue Storefront integration has them, you can identify which integrations are used by looking at this file.
-
-## Then move to the `middleware.config.js` file
-
-After the `nuxt.config.js` file, the next step is the `middleware.config.js` file. It's a much simpler and likely smaller file than the previous one. It configures the [Server Middleware](/architecture/server-middleware.html) and has a configuration including sensitive credentials for most integrations as well as custom endpoints, queries, etc.
-
 ## What's next
 
-With a basic understanding of the project structure, we can learn about [Layouts and Routing](./layouts-and-routing.html). We will show what routes come predefined in every Vue Storefront project and how to register custom ones.
+With a basic understanding of the project structure, it's time to learn about the [Configuration](./configuration.html) files that control the application and installed integrations. They are a crucial part of every Vue Storefront application.
@@ -17,17 +17,25 @@ Every new Vue Storefront project comes with a set of preinstalled Nuxt.js module
 #### Nuxt.js modules and plugins
 
 - [`@nuxt/typescript-build`](https://typescript.nuxtjs.org/) - for TypeScript support,
+
 - [`@nuxtjs/pwa`](https://pwa.nuxtjs.org/) - for PWA functionalities,
+
 - [`@nuxtjs/composition-api`](https://composition-api.nuxtjs.org/) - for Composition API support,
+
 - [`@nuxtjs/style-resources`](https://www.npmjs.com/package/@nuxtjs/style-resources) - for importing SASS variables globally,
+
 - [`nuxt-i18n`](https://i18n-legacy.nuxtjs.org/) - for internationalization (translations and price formatting),
+
 - [`nuxt-purgecss`](https://purgecss.com/guides/nuxt.html) - for removing unused CSS from the final build,
+
 - [`cookie-universal-nuxt`](https://www.npmjs.com/package/cookie-universal-nuxt) - for handling cookies on the server (SSR) and client (browser).
 
 #### Vue.js libraries
 
 - [`vee-validate`](https://vee-validate.logaretm.com/v3) - for frontend form validation,
+
 - [`vue-scrollto/nuxt`](https://www.npmjs.com/package/vue-scrollto) - for smooth scrolling to HTML elements,
+
 - [`vue-lazy-hydration`](https://www.npmjs.com/package/vue-lazy-hydration) - for delaying hydration and improving performance.
 
 ### Storefront UI
Original file line number	Diff line number	Diff line change
Expand Up		@@ -40,4 +40,4 @@ The next step in the learning process is reading [Nuxt.js documentation](https:/

		## What's next

		With fundamentals out of our way, it's time to undestand the [Project structure](./project-structure.html) and learn how to navigate it and which files do what.
		Now that we understand what Vue Storefront is, it's time to understand the [Project structure](./project-structure.html) and learn how to navigate it and which files do what.