Publish your first app

So I've got some YML files - what next?

Now that we have created our project and package directories, we are ready to preview and launch our Storefront. Right now you will only be able to see an empty product catalog, however, getting used to the preview and deployment steps will help us experiment with new functionality quickly. So let's deploy it!

Previewing the Storefront

To preview the Storefront, navigate to the package directory, and use the "preview" mode:

yalo preview

This will launch your Web browser so you can preview the Storefront. You should see a new browser window open, and a preview of your Storefront with some sample products by default.

An example Storefront built using the SDKAn example Storefront built using the SDK

An example Storefront built using the SDK

Looking good! :chicken: :camera: You can now send a screenshot to Sam.

πŸ‘

Product catalog

This command is executed in an isolated environment (dev) and before creating the preview of the storefront, it will create an order config, which is the unique configuration for each user and is part of generating the storefront URL, with the following questions:
? ttl
? source
? channelID
? channelName
? botSlug
? state
? userID
? metadata
? collections
see the backend documentation to understand the meaning of each field.

When the command "yalo preview" is executed there are 3 ways to display products:

  1. Use default yalo products, for this when is creating the order config leave the collections field empty.
  2. Use the products that were inserted with the command "upload-products --dev" that returns an array of collections ids, paste the array in the collections field when the order config requires it.
  3. Use the products that come from a function addon, leave collections field empty ( example [ ] )

Sam is really surprised we got back to him that quickly! But... he asks for some changes.

Turns out they loved it, but the general color scheme of the Storefront doesn't go with their new "custom" brand identity. He is re-doing his whole shop and thinking of opening 3 more locations with an elegant custom-tone design, in black and gold.

That's OK! Tuns out we can use a Theme add-on to quickly make the change.

Changing the theme

A theme is an easy configuration that storefront has. Below, you can see the default configuration of the add-on, which include style componenrs from Chakra UI.

{
        "name": "yaloTheme",
        "metadata": {
          "fonts": {
            "body": "Roboto, sans-serif",
            "heading": "Roboto, sans-serif",
            "mono": "Roboto, sans-serif"
          },
          "fontSizes": {
            "xs": "9px",
            "sm": "11px",
            "md": "12px",
            "lg": "14px",
            "xl": "16px",
            "_2xl": "24px",
            "_3xl": "28px",
            "_4xl": "36px",
            "_5xl": "48px",
            "_6xl": "64px"
          },
          "shadows": {
            "md": "0px 0px 8px rgba(215, 215, 215, 0.5)"
          },
          "colors": {
            "primary": {
              "_50": "#9FBDF4",
              "_100": "#9FBDF4",
              "_200": "#9FBDF4",
              "_300": "#9FBDF4",
              "_400": "#9FBDF4",
              "_500": "#0046CF",
              "_600": "#0046CF",
              "_700": "#0046CF",
              "_800": "#0046CF",
              "_900": "#0046CF"
            },
            "secondary": {
              "_50": "#FBC813",
              "_100": "#FBC813",
              "_200": "#FBC813",
              "_300": "#FBC813",
              "_400": "#FBC813",
              "_500": "#FBC813",
              "_600": "#FBC813",
              "_700": "#FBC813",
              "_800": "#FBC813",
              "_900": "#FBC813"
            },
            "gray": {
              "_50": "#CCCCCC",
              "_100": "#979797",
              "_200": "#F1F1F1",
              "_300": "#F7F9F9",
              "_400": "#F1F1F1",
              "_500": "#F1F1F1",
              "_600": "#F1F1F1",
              "_700": "#F1F1F1",
              "_800": "#F1F1F1",
              "_900": "#F1F1F1"
            },
            "red": {
              "_50": "#FF6868",
              "_100": "#FF6868",
              "_200": "#FF6868",
              "_300": "#FF6868",
              "_400": "#FF6868",
              "_500": "#FF6868",
              "_600": "#FF6868",
              "_700": "#FF6868",
              "_800": "#FF6868",
              "_900": "#FF6868"
            }
          },
          "icons": {
            "search": "iconName",
            "settings": "",
            "plus": "",
            "minus": "",
            "chevronLeft": ""
          }
        },
        "status": "ENABLED",
        "type": "theme",
        "required": false
      }

The option to add an existing theme, run the following command and select the theme.

yalo addon:add -t theme
"yalo addon:add -t theme" executed"yalo addon:add -t theme" executed

"yalo addon:add -t theme" executed

name: chickenshop
country: UK
region: us-east-1
bot:
  slug: chickenshop
storefront:
  currency: MXN
  localization: es-MX
  id: 5ee56ddccc421d0772bec9a6
  config:
    - type: theme
      name: chickenshopTheme

πŸ“˜

Source code for this example is available in the examples/chickenshop/02-theme directory of the yalochat/stoefront repository.

To create a new theme, run the command and change the setting

yalo addon:create -t theme
"yalo addon: create -t theme" executed"yalo addon: create -t theme" executed

"yalo addon: create -t theme" executed

Add-ons do not have a separate directory, but rather they "add on" a configuration to the package's package-config.yml file. This file should now contain the following:

name: chickenshop
country: UK
region: us-east-1
bot:
  slug: chickenshop
storefront:
  currency: MXN
  localization: es-MX
  id: 5ee56ddccc421d0772bec9a6
  config:
    - type: theme
      name: chickenshopCustomTheme
      metadata:
        colors:
          primary:
            _50: "#000000"
            _100: "#000000"
            _200: "#9FBDF4"
            _300: "#000000"
            _400: "#000000"
            _500: "#646464"
            _600: "#646464"
            _700: "#646464"
            _800: "#646464"
            _900: "#0046CF"

πŸ“˜

Source code

Source code for this example is available in the examples/chickenshop/03-theme-tweaks directory of the yalochat/storefront repository.

yalo preview

We send another screenshot to the customer. They approve the new look - and it was done in record time.

πŸ“˜

Where's my site?

You might be asking where the HTML code for your site is, and how it's being styled by the theme. Also, where did those images and product descriptions come from?

If you look in ~/.yalo/storefront/packages/ui, you will find the site in its un-built form. The theme configuration is synchronized with Yalo development servers, which then serve up the reified themes, from an add-on registry.

You can learn more about creating your own theme and submitting it to the registry, as well as ways to extend the UI, at the bottom of this page.

But we are still not happy. Because we are perfectionists, we notice that even though the customer has approved it, the foreground color is still just slightly off. We would like to keep the rest of the theme, but override just one color. How do we do that?

Turns out it's easy. Just insert a 'metadata' section in the yalo-config.yml file, and override one of the theme colors there:

name: chickenshop
country: UK
region: us-east-1
bot:
  slug: chickenshop
storefront:
  currency: MXN
  localization: es-MX
  id: 5ee56ddccc421d0772bec9a6
  config:
  - 
    type: theme
    name: dark
    metadata:
        colors:
        primary:
          _50: '#E66176'
          _100: '#E66176'
          _200: '#E66176'
          _300: '#E66176'
          _400: '#E66176'
          _500: '#E66176'
          _600: '#E66176'
          _700: '#E66176'
          _800: '#E66176'
          _900: '#E66176'

Again, stop your site with Ctrl+C and run it again with yalo preview. If you inspect your Storefont in your browser's development panel, you will see that the color for the header is now #13fabc, as you requested in your theme.

For now, though, we are OK with this and want to push it to production to get a public URL, where our customer can see it.

Deploying a Storefront

To deploy a Storefront, we currently require you to have Terraform and a Yalo Terraform Cloud account.

πŸ“˜

Using Terraform for deployment

We are leaning heavily on third party tools for managing secrets and deployment: 1Password for installing development secrets, and Terraform for building and deploying the project. Make sure you have the Yalo CLI installed and that yalo doctor shows all checklist items in green before continuing.

Once you have your credentials, you will be able to deploy using the Yalo CLI "publish" command. This command comes in two flavors: first, there's a "dry-run" command, which allows you to just create the Terraform files that will be used for deployment. Run this command now:

yalo publish --dry-run

This command will put intermediate files in the build/infra directory of your project. Have a look at these files now. You can deploy using Terraform directly, or alternatively you can build the Terraform files and deploy the entire system using the "publish" command:

yalo publish

This command will take a while. When it's done, you should see a URL for the published Storefront. The Storefront will still not be hugely exciting unless you enable add-ons using the CLI or use pre-configured application templates, but it will work and it will be deployed in a scalable, production-ready way.

Using the Yalo SDK is not that different from creating a new application in (say) Javascript or Typescript. The main difference is that you will usually be coding less and configuring more in YAML. The application development lifecycle (build, preview, deploy) should feel pretty familiar.

At the moment, Storefronts are the only component built on top of the SDK. We expect this list to grow quickly.


Did this page help you?