### Build and Develop Project Source: https://docs.alokai.com/v2/integrate/integration-guide.html After installing dependencies, build the project and start the development server. Open the provided link to test the application. ```bash yarn build yarn dev ``` -------------------------------- ### Install Dependencies and Run Application Source: https://docs.alokai.com/v2/contributing/how-to-submit-pull-request.html After linking your local package, run these commands to update your project's dependencies and start your application for manual testing. ```bash yarn install yarn dev ``` -------------------------------- ### Start Development Server for Selected Apps Only Source: https://docs.alokai.com/guides/multistore/tooling-and-concepts/cli-reference This example demonstrates how to start the development server for a specific store and only include applications that match a given filter pattern. The filter `!storefront-unified-nuxt-*` excludes Next.js storefront apps. ```bash alokai-cli store dev --store-id=my-store filter='!storefront-unified-nuxt-*' ``` -------------------------------- ### Run the Server Middleware Source: https://docs.alokai.com/middleware/guides/api-client Use this example script to start the server middleware. Ensure your configuration file is correctly set up. ```typescript // src/index.ts import { createServer } from "@alokai/connect/middleware"; import { config } from "../middleware.config"; (async () => { const port = Number(process.env.API_PORT) || 4000; const app = await createServer(config); app.listen(port, "", () => { console.log(`API server listening on port ${port}`); }); })(); ``` -------------------------------- ### Start Production Server with Local Domains Source: https://docs.alokai.com/guides/multistore/tooling-and-concepts/cli-reference Starts the production server using local HTTPS with Caddy. This requires Caddy to be installed and the hosts file to be configured. The generated Caddyfile is saved to `.out/Caddyfile`. ```bash alokai-cli store start --with-local-domains ``` -------------------------------- ### Start Alokai Development Server Source: https://docs.alokai.com/storefront/modules/search-integrations/bloomreach/content/getting-started/quick-start Run the Alokai CLI to start the development server after installation and configuration. ```bash yarn alokai-cli store dev ``` -------------------------------- ### Start Stores with Local Domains Source: https://docs.alokai.com/guides/multistore/tooling-and-concepts/development/local-environment Command to start all stores with their respective local domains configured. This requires Caddy to be installed and local domains set up in your hosts file. ```bash yarn store dev --all --with-local-domains ``` -------------------------------- ### Default Store Structure Source: https://docs.alokai.com/storefront/introduction/tech-stack Illustrates the initial project structure with a single default store. This setup is the starting point for most projects. ```tree apps/ ├── storefront-unified-nextjs/ # Base shared code ├── storefront-unified-nuxt/ # Base shared code ├── storefront-middleware/ # Base middleware └── stores/ └── default/ # Your initial store ├── storefront-unified-nextjs/ ├── storefront-unified-nuxt/ └── storefront-middleware/ ``` -------------------------------- ### Setup Repository Action for CI/CD Source: https://docs.alokai.com/guides/multistore/migration-guide This composite action installs project dependencies, sets up caching for Yarn and Turbo, and configures the NPM registry. It requires NPM credentials as inputs. ```yaml name: Setup repository description: Installs all the packages and initializes environment variables inputs: npm_user: description: Enterprise NPM registry user type: string required: true npm_password: description: Enterprise NPM registry password type: string required: true npm_email: description: Enterprise NPM registry email type: string required: true runs: using: composite steps: - name: Use Node.js based on .nvmrc file uses: actions/setup-node@v4 with: node-version-file: ./.nvmrc - name: Yarn cache uses: actions/cache@v4 with: path: .yarn key: storefront-demo-yarn-cache - name: Cache turbo build setup uses: actions/cache@v4 with: path: .turbo key: starter-turbo-${{ github.sha }} restore-keys: | starter-turbo- - name: Configure NPM registry shell: bash run: | npm install -g npm-cli-login; npm-cli-login -u ${{ inputs.npm_user }} -p ${{ inputs.npm_password }} -e ${{ inputs.npm_email }} -r https://npm.alokai.cloud || exit 1; - name: Install dependencies shell: bash run: yarn install --frozen-lockfile --cache-folder .yarn && node init.mjs ``` -------------------------------- ### Start Production Server Source: https://docs.alokai.com/guides/multistore/tooling-and-concepts/development/local-environment After building, use this command to start the production server locally. ```bash yarn start ``` -------------------------------- ### Start Frontend Service Source: https://docs.alokai.com/cookbook/oss-deployment-guide Starts the frontend service immediately. ```bash systemctl start vsfcommunity-web ``` -------------------------------- ### Install Nginx Source: https://docs.alokai.com/cookbook/oss-deployment-guide Installs the Nginx web server. ```bash apt-get install nginx ``` -------------------------------- ### Example Base Test Fixture Setup Source: https://docs.alokai.com/storefront/modules/contributing/writing-tests Sets up custom test fixtures by extending base fixtures from the core package. This includes initializing page objects and mocked endpoints. ```typescript import { baseFixtureFactory } from '@core'; import { YourPage } from './pageObjects/your.page'; import { routerFactory } from './mocks/server'; const base = baseFixtureFactory(routerFactory); type TestFixtures = { yourPage: YourPage; }; export const test = base.extend({ yourPage: async ({ dataFactory, db, framework, frontendUrl, page, utils }, use) => { const yourPage = new YourPage({ dataFactory, db, framework, frontendUrl, page, utils }); await use(await yourPage.prepare()); }, }); ``` -------------------------------- ### Start Development Server with Local Domains using Caddy Source: https://docs.alokai.com/guides/multistore/tooling-and-concepts/cli-reference Enable the development server to use local HTTPS domains by including the `--with-local-domains` flag. This requires Caddy to be installed and configured on your system. The generated Caddyfile will be available at `.out/Caddyfile`. ```bash alokai-cli store dev --all --with-local-domains ``` -------------------------------- ### Installation and Configuration Source: https://docs.alokai.com/v2/integrations/bazaarvoice.html Instructions for installing the Bazaarvoice package and configuring its Nuxt module with necessary credentials. ```APIDOC ## Installation Install the required package: ``` yarn add @vsf-enterprise/bazaarvoice ``` Register its Nuxt module with the following configuration: ```javascript // nuxt.config.js export default { buildModules: [ ['@vue-storefront/nuxt', { useRawSource: { dev: [ '@vsf-enterprise/bazaarvoice' ], prod: [ '@vsf-enterprise/bazaarvoice' ] } }], [ '@vsf-enterprise/bazaarvoice/nuxt', { clientName: '', siteId: '', environment: '', locale: '' } ], ] }; ``` * `clientName` - the lowercase name of the client provided by Bazaarvoice. * `siteId` - the ID of the zone coming from the Bazaarvoice configuration hub. Defaults to `main_site`. * `environment` - the deployment environment. Valid values are `production` and `staging`. Defaults to `staging`. * `locale` - the locale used by the library, e.g. `en_US`. ## Domain allowlist For security reasons, Bazaarvoice uses an allowlist of allowed domains. Use localhost If you get an `Uncaught Bazaarvoice is not configured for the domain` error in the console when working locally, try using `localhost` instead of the IP address provided by the Nuxt (eg. `localhost:3000`). ``` -------------------------------- ### Install Project Dependencies Source: https://docs.alokai.com/v2/getting-started/installation.html Navigate to your project directory and install the necessary dependencies using Yarn. ```bash cd yarn ``` -------------------------------- ### Install Dependencies Source: https://docs.alokai.com/guides/multistore/migration-guide After updating Turbo and its configuration, run this command to install all project dependencies. ```bash yarn install ``` -------------------------------- ### Install Alokai Connect Package Source: https://docs.alokai.com/integrations/commercetools/getting-started/quick-start Install the `@alokai/connect` package to create the server middleware for your application. ```bash yarn add @alokai/connect ``` -------------------------------- ### Initialize and Use SDK Example Source: https://docs.alokai.com/sdk/legacy Demonstrates how to import the SDK and call a module's method. This interaction is proxied through the Server Middleware. ```javascript import { sdk } from '~/sdk' await sdk.exampleModule.doSomething(); // <- fully-typed ``` -------------------------------- ### Example Custom Installation Script for Playwright Source: https://docs.alokai.com/storefront/modules/contributing/writing-tests Defines a custom installation schema for Playwright using module-kit, modifying package.json to add Playwright test scripts. ```typescript import { defineSchema, defineSchemas, } from "@vsf-enterprise/module-kit"; // ... other schemas for nuxt, next and middleware const playwrightSchema = defineSchema((context) => { const { paths } = context.playwright; return { name: "your-module-playwright", modifyFile: [ { type: "json", inputPath: paths.packageJson, visitor: (packageJson) => { packageJson.scripts['test:integration'] = 'PW_IS_B2B=true playwright test'; packageJson.scripts['test:integration:dev'] = 'PW_IS_B2B=true playwright test --ui'; }, }, ], }; }); export default defineSchemas({ playwright: playwrightSchema, middleware: middlewareSchema, nextjs: nextSchema, nuxt: nuxtSchema, }); ``` -------------------------------- ### Start Development Server for All Stores Source: https://docs.alokai.com/guides/multistore/tooling-and-concepts/cli-reference Use the `--all` flag to start the development server for all configured stores. This is a convenient way to run all your stores simultaneously for testing. ```bash alokai-cli store dev --all ``` -------------------------------- ### Initialize Project and Install Dependencies Source: https://docs.alokai.com/storefront/introduction/getting-started Run this command after cloning the repository to initialize the project and install all necessary dependencies for every package in the monorepo. ```bash yarn run init ``` -------------------------------- ### Example Application Context Structure Source: https://docs.alokai.com/v2/architecture/application-context.html Illustrates the structure of the application context object when Magento and Storyblok integrations are installed. ```json { $magento: { api: {}, client: {}, config: {} }, $sb: { api: {}, client: {}, config: {} } } ``` -------------------------------- ### Build and Launch Server (Local) Source: https://docs.alokai.com/integrations/odoo/general/new-project Build the project specifically for local development and launch the server. ```bash yarn build:local ``` -------------------------------- ### Start Production Server for All Stores Source: https://docs.alokai.com/guides/multistore/tooling-and-concepts/cli-reference Use this command to start the production server for all configured stores. Ensure stores are built before execution. ```bash alokai-cli store start --all ``` -------------------------------- ### New Store Configuration Example Source: https://docs.alokai.com/middleware/guides/config-switcher Shows how to define a minimal configuration for a new store (Germany) by only specifying the differing properties. Common settings are inherited from the base configuration. ```javascript { api: { baseSiteId: 'apparel-de', defaultCurrency: 'EUR', defaultLanguage: 'de' } } ``` -------------------------------- ### Get Product by ID Source: https://docs.alokai.com/integrations/bigcommerce/getting-started/quick-start Example of fetching a product by its ID using the configured SDK. Ensure the SDK is initialized before calling this method. ```typescript import { getSdk } from "@/sdk"; const sdk = await getSdk(); const result = await sdk.commerce.getProductById({ entityId: 97, includeModifiers: true, includeOptions: true, }); ``` -------------------------------- ### Run HTTP Toolkit in WSL Source: https://docs.alokai.com/guides/troubleshooting/inspecting-network-requests Launch the HTTP Toolkit application in the background. This command starts the GUI and allows for network interception setup. ```bash (httptoolkit &) ``` -------------------------------- ### Start Production Server for Multiple Stores Source: https://docs.alokai.com/guides/multistore/tooling-and-concepts/cli-reference Starts the production server for a defined list of stores. Ensure all specified stores are built prior to running. ```bash alokai-cli store start --store-id=my-store my-other-store ``` -------------------------------- ### Create Project with Modules Flag Source: https://docs.alokai.com/storefront/change-log/storefront-cli Use the `--modules` flag to install recommended modules when running the `create` command. This is true by default. ```bash npx @vsf-enterprise/storefront-cli create "generated-project" -f nextjs -e sapcc --modules ``` -------------------------------- ### Manual Setup of Unified Extension Source: https://docs.alokai.com/storefront/modules/search-integrations/bloomreach/content/unified/configuration Use `createUnifiedExtension` to register the unified extension in your middleware configuration. This example shows how to define default currency and facet configurations. ```typescript import type { ApiClientExtension, Integration } from '@alokai/connect/middleware'; import type { MiddlewareConfig, UnifiedConfig } from '@vsf-enterprise/bloomreach-discovery-api'; import { createUnifiedExtension } from '@vsf-enterprise/bloomreach-discovery-api'; const unifiedApiExtension = createUnifiedExtension({ config: { defaultCurrency: 'EUR', facetConfig: [ { names: ['colors'], type: 'COLOR' }, { names: ['sizes'], type: 'SIZE' }, { names: ['category'], type: 'CATEGORY' }, { names: ['price'], range: true, type: 'PRICE' }, ], } satisfies UnifiedConfig, isNamespaced: true, normalizers: { addCustomFields: [{}] }, }); export const config = { configuration: { discoveryApi: { accountId: Number(process.env.BLOOMREACH_DISCOVERY_ACCOUNT_ID), authKey: process.env.BLOOMREACH_DISCOVERY_AUTH_KEY, domainKey: process.env.BLOOMREACH_DISCOVERY_DOMAIN_KEY, }, }, extensions: (extensions: ApiClientExtension[]) => [...extensions, unifiedApiExtension], location: '@vsf-enterprise/bloomreach-discovery-api/server', } satisfies Integration; ``` -------------------------------- ### CI Workflow for Pull Requests and Pushes Source: https://docs.alokai.com/guides/multistore/migration-guide This workflow runs tests on pull requests and pushes to the main branch. It checks out code, installs dependencies using the setup action, identifies affected stores, builds them if necessary, lints the project, installs Playwright browsers, and runs integration tests. ```yaml name: CI on: pull_request: branches: - main push: branches: - main jobs: test: name: Test runs-on: ubuntu-latest strategy: matrix: node_version: [18] steps: - name: Checkout code uses: actions/checkout@v4 with: fetch-depth: 0 - name: Install dependencies uses: ./.github/actions/setup with: npm_user: ${{ vars.NPM_USER }} npm_password: ${{ secrets.NPM_PASS }} npm_email: ${{ vars.NPM_EMAIL }} - name: Find affected stores id: affectedStores uses: ./.github/actions/affected-stores with: since: ${{ github.event.pull_request.base.sha }} to: ${{ github.event.pull_request.head.sha }} - name: Build affected stores if: ${{ steps.affectedStores.outputs.storeIds != '[]' }} run: | yarn store build ${{ steps.affectedStores.outputs.storeIdsFlag }} --cache-dir=.turbo - name: Lint project run: yarn lint - name: Install Playwright Browsers run: yarn playwright install --with-deps chromium - name: Run integration tests in Playwright if: ${{ steps.affectedStores.outputs.storeIds != '[]' }} run: yarn store test ${{ steps.affectedStores.outputs.storeIdsFlag }} ``` -------------------------------- ### Implement Custom API Method Source: https://docs.alokai.com/integrations/custom/quick-start Example of creating a custom API method within the integration. Supports GET and POST requests using the provided Axios client. ```typescript import type { IntegrationContext } from '../../types'; export interface ExampleMethodArgs { id: string; } export const exampleMethod = async (context: IntegrationContext, args: ExampleMethodArgs) => { // Make HTTP requests using the Axios client: // return await context.client.get(`/example-url?id=${args.id}`); // Or make POST requests: // return await context.client.post('/example-url', { data: args }); return { data: 'Hello, Alokai Integrator!' }; }; ``` -------------------------------- ### Start Production Server for a Specific Store Source: https://docs.alokai.com/guides/multistore/tooling-and-concepts/cli-reference Initiates the production server for a single, specified store. Requires the store to be pre-built. ```bash alokai-cli store start --store-id=my-store ``` -------------------------------- ### Get API Client with Typed Extensions in Alokai Source: https://docs.alokai.com/middleware/reference/changelogs Demonstrates how to use `context.getApiClient()` to retrieve an API client, with examples for both base integration methods and extension methods requiring generics. ```typescript import type { Endpoints } from "@vsf-enterprise/sapcc-api"; import type { Endpoints as UnifiedEndpoints } from "@vsf-enterprise/unified-api-sapcc"; // Case 1: Using only base integration methods - no generics needed const sapcc = await context.getApiClient(); const product = await sapcc.api.getProduct({ id: "123" }); // Case 2: Using extension methods - provide generics for extensions const sapccWithExtensions = await context.getApiClient< Endpoints & { unified: UnifiedEndpoints } >(); const unifiedProduct = await sapccWithExtensions.api.unified.getProductDetails({ id: "123", }); ``` -------------------------------- ### Handling Cookies in Vue Components Source: https://docs.alokai.com/v2/miscellaneous/handling-cookies.html Use the `$cookies` object obtained from `useContext()` within your component's setup function to get or set cookies. Ensure `@nuxtjs/composition-api` is imported. ```javascript ``` -------------------------------- ### Build Output Structure Example Source: https://docs.alokai.com/guides/multistore/tooling-and-concepts Shows the directory structure of the composed build output for different stores. ```tree .out/ ├── fashion-brand/ │ ├── storefront-unified-nextjs/ # Composed Next.js app │ ├── storefront-middleware/ # Composed middleware │ └── playwright/ # Composed tests └── us-store/ ├── storefront-unified-nextjs/ # Composed Next.js app ├── storefront-middleware/ # Composed middleware └── playwright/ # Composed tests ``` -------------------------------- ### HTML Resource Hints for Preconnecting Source: https://docs.alokai.com/v2/performance/other-optimizations.html Shows how to use HTML link tags to establish early connections to external domains. 'preconnect' establishes a full connection, while 'dns-prefetch' only resolves the DNS. ```html ``` ```html ``` -------------------------------- ### Get changed stores since a specific number of commits Source: https://docs.alokai.com/guides/multistore/tooling-and-concepts/cli-reference Retrieve a list of changed stores by specifying the number of recent commits to compare against. For example, `HEAD~10` checks changes from the last 10 commits. ```bash $ alokai-cli store changed --since=HEAD~10 ``` -------------------------------- ### Start Development Server for Multiple Stores Source: https://docs.alokai.com/guides/multistore/tooling-and-concepts/cli-reference You can start the development server for multiple specific stores by providing their IDs to the `--store-id` flag, separated by spaces. This allows for focused development on a subset of your stores. ```bash alokai-cli store dev --store-id=my-store my-other-store ``` -------------------------------- ### Start Development Server Excluding Middleware Apps Source: https://docs.alokai.com/guides/multistore/tooling-and-concepts/cli-reference To exclude specific types of applications, such as middleware, from the development server, use the `--filter` flag with a negation pattern. This example excludes all apps prefixed with `storefront-middleware-`. ```bash alokai-cli store dev --all --filter=!storefront-middleware-* ``` -------------------------------- ### Example Application Configuration Source: https://docs.alokai.com/console/classic-alokai/alokai-cloud-api This JSON object represents an example of an additional application configuration, including environment variables. ```json { "additional_apps": { "apps": { "ct-adyen-integration-notification": { "name": "ct-adyen-integration-notification", "tag": "1.2.3", "image": "registry.vuestorefront.cloud/foo-storefrontcloud-io/ct-adyen-notification", "path": "/ct-adyen-integration-notification/", "has_base_path": false, "port": "80", "env_var": [ { "name": "TEST", "value": "test" } ] } } } } ``` -------------------------------- ### Vue Component Setup Option Source: https://docs.alokai.com/v2/composition/composition-api.html Illustrates the basic structure of a Vue component using the `setup` option for Composition API. ```javascript ``` -------------------------------- ### SmartEdit Dynamic Page Implementation Source: https://docs.alokai.com/storefront/modules/cms/guides/multiple-cms Example of a dynamic page implementation for SmartEdit, utilizing `connectCmsPage` and custom `PageTemplates`. This setup allows for rendering different page templates based on CMS content. The `getCmsPagePath` function is crucial for routing. ```typescript import { notFound } from 'next/navigation'; import connectCmsPage from '@sf-modules/cms-smartedit/components/connect-cms-page'; import { PageTemplates } from '@sf-modules/cms-smartedit/components/templates'; export default connectCmsPage( (props) => { const { page, params, template, ...rest } = props; if (!page) { notFound(); } const Template = PageTemplates[template as keyof typeof PageTemplates]; const { $raw: _, ...slots } = page; if (!Template) { throw new Error(`Template "${template}" not found`); } return