Launching Storefronts

Edit on GitHub

This tutorial describes how to deploy Storefronts using the Spryker Launchpad.

Logging into the Launchpad

Using the login details provided by your FeS account owner, log into the Launchpad.

After logging in, the List of Applications page opens.

Defining the general settings of a Storefront

To create a Storefront, do the following:

  1. On the List of Applications page, select Create a new application.

  2. On the Create a new application page, enter a descriptive NAME for the Storefront.

  3. For TYPE, select Spryker VueStorefront. In the future, you’ll be able to create other types of applications. For now, let’s stick with the Storefront.

Code Repository provider, Hosting provider, and Commerce provider sections appear.

Connecting GitHub repositories

In the Code Repository provider section, you are going to grant the Launchpad permission to your GitHub repository with the application. Follow the steps:

  1. Select Authorize GitHub.

  2. On the GitHub page that opens, authorize the Launchpad to act on behalf of your GitHub account. The account should have access to the repository with the VueStorefront application you want to deploy.

This takes you back to the Create a new application page.

  1. Select Install GitHub organization.

  2. On the GitHub page that opens, connect your GitHub organization and grant access to the repository with the VueStorefront application.

This takes you back to the Create a new application page.

  1. Select the ORGANISATION you’ve connected.

  2. Select the REPOSITORY with the VueStorefront application.

  3. Select the BRANCH you want to deploy.

Code repository configuration

Configuring the build

In the Hosting provider section, you configure how the Storefront is deployed to Netlify. In future, you’ll also be able to use other hosting providers.

The Launchpad automatically deploys your Storefront to Netlify using a default configuration. If you want to customize the deployment, do the following:

  1. Optional: Enter a BASE DIRECTORY. This is the directory from which a deployment is started. If not specified, the root directory of the repository is used.

  2. Optional: Enter a BUILD COMMAND. This is the command used to deploy the application. Specify it if you want to customize the build.

  3. Optional: Enter a PUBLISH FOLDER. The deploy-ready HTML files and assets generated by the build are placed into this folder.

For more information about Netlify build configuration, see Get started with build configuration.

Connecting SCCOS

In the Commerce provider section, you need to connect the Storefront to a Spryker Cloud Commerce OS (SCCOS) environment and select locales and currencies. Follow the steps below:

  1. Select a SPRYKER ENVIRONMENT to connect this Storefront to.

  2. Select a COMMERCE API. The selected Glue API will be used to connect this Storefront to the SCCOS instance you’ve selected in step 1.

This shows the locales and currencies of the selected SCCOS instance, and they are preselected.

  1. For LOCALES, do the following:

    1. Optional: Clear the checkboxes of the locales you don’t want to display on the Storefront.
    2. Select a default locale.
  2. For CURRENCIES, do the following:

    1. Optional: Clear the checkboxes of the currencies you don’t want to display on the Storefront.
    2. Select a default currency.

Commerce provider configuration

  1. Select Create.

The List of Applications page opens with the success message displayed. The application is displayed in the list.

Installing the Storefront

To make the Storefront live, do the following:

  1. Select the application you’ve created. This opens the pane of the application.

  2. In the Hosting provider section, select Install Application.

Install application

This shows the success message, and the pane refreshes to show the URL of the application. Select the URL to access the Storefront.

Each time you update the code in the connected repository, the Storefront is automatically redeployed with the changes displayed on the website.

Next steps

Editing the configuration of applications