Quick Start Guide

Sling offers a lot of flexibility. Whether you want to go fast and quickly see the final result,
or would rather dive deeper into the product, we got you covered.

👇 Let's get started!

🚀 Step 1: Create a new project with Sling

Step 2: Set the license key and email

Once the download is complete, you will be prompted to enter the license key and email. Sling community is free forever. This is required to manage frontend from the Sling Studio.

Next your unique Sling license Key which can be easily generated once after signing up on the Studio.

If not prompted with Sling Api Key and Email? You can set up the same in your environment files.

Once the installation is complete, Visit the below URL on your local to view your Sling Frontend App .

You should see a functioning demo frontend.

Home Page

For Product Listing Page, You can visit /dubai/women/clothes/products

Step 3: Manage Frontend with Sling Studio

Login to Sling Studio and manage your layout, css and customize your frontend site on the fly.

For any queries, Please contact contact our support team.

Enterprise

Sling Enterprise is a commercial offering from the Sling core team built on top of the open-source product.
It's goal is to give you all the tools you need to launch your Frontend Website and provide you with ready-to-use integrations that will reduce your project's development time and cost.

Sample Screenshots

The screenshots below are taken from Sling Studio.

Differences between Open Source and Enterprise versions

• Access to all the Flavors, Page Templates & Widgets
• Access to cloud and managed services
• Unlimited usage for other tools - Manage Analytics and 3rd party apps.

Use Cases

Key Concepts

Sling has 2 components -

• A Frontend client in NextJS
• Sling Studio

Page Templates

Page Templates are like blue prints of an actual page. They allow you to add a React Widget on the Page and adjust its position using CSS Grid Layout. You should see a list of all page templates you create in templates section.

A blue print of a page in the template looks like the image below. Below example, shows how a Product List Template looks like. This template has 3 sections header, body and footer with list of below mentioned React Widget components aligned as per their Grid Widths.

• Head
• Default Header Component
• Body
• BreadCrumbs
• Filter Toggle Component
• Product Filters
• Product List Summary
• Product Search Bar
• Product Grid
• Footer
• Default Footer Component

Screenshot of Product Listing Page Template.

Page Props

Click on a Widget in the Edit Page Template to view list of available props. You can add any number of Sling Props for any Widget from the Widgets section. Once added, the new props will reflect automatically in this section.

Please refer the image below.

Route URLs

• Sling Routes are URLs that you can be created using any page template.
  A new URL route can either be a Static or a Dynamic URL.

  Please refer sample screenshot below

  
  
  
  

• To add a Dynamic URL Route, Use <> brackets to make a route path dynamic prop variable

  For example, In the URL Route below, city, liCategory and l2Category are the dynamic props.

  /<city>/<l1Category>/<l2Category>/products
  
  

  Below URLs will match the above Route pattern:

  /dubai/women/clothing/products
 /pariah/shoes/puma/products
 /london/fashion-week/westminster/products
  
  

  Every URL route needs to have a Page Template. You can assign any page template to a route by Editing the Route.

  
• Override Template Props
  • Page Template assigned to each route has set of widget props. These are the default props for every page route that uses it. To override these props, Configure the assigned page template in the routes section/
  
  Refer screenshot below
  

Widgets, Blocks & Components

Every Page in Sling is made up of small react components called Widgets.
Multiple widgets can combine to become a Block and a component is a list of blocks and widgets.

This is inspired by the ATOMIC Web Design concept.

Sample Widgets List,

• Add / Edit Widget
• Add or Edit a Widget either by importing the widget JSON file or by manually adding fields
• 
• Every Sling widget needs to have a widget.json at the root level in the Sling FE client.
• ^Imp A widget matching the Widget Key should be available in the exported index.js file of the widgets in Sling FE client. This is for the global handler to pick from the initial response .
  
  • In the above example - A widget (with type widget) and name as 'AppLogo' should be available in the exported index.js of the Sling FE.
  • const Widgets = {
    ['AppLogo']: MySuperCustomAppLogo,
    ['HeaderMessages']: HeaderMessages,
    ['NotificationWidget']: Notifications,
    ['PureListingSearchBar']: PureListingSearchBar,
    ['SearchBar']: SearchBar,
    ['BreadCrumbsDefault']: BreadCrumbsDefault,
    ['PaginationControlled']: PaginationControlled,
};
  
  
• Sync any changes in the widget configuration (.json) from the codebase to Sling Studio by running the sync-widgetsat your client's project root.
• Add Widget Props to your widget. These props will be available on Page Templates for adding to Page URLs.
• 

Media Images & Gallery

Manage your media assets here. Create static variables referring images and array of images and use them directly in the page routes and templates.

Settings & Theme

Manage and Update your Company information, Frontend Domain and Theme Settings like Spacing, CSS and Color.

Basics

Sling FE Client is customized NEXTJs web app. The default version uses getInitialProps() in _app.js to fetch initial config and layout for every route change.
This will make every page render on the server side. _app.js has multiple Context Providers for Theme Settings, Layout Configuration, Route Constants, Language, Sling Provider and Api Response.

Global Route Handler

• Sling Fe uses NextJs's 3 dot file syntax[...global].jsto capture all the routes.
  Refer NextJs Dynamic Routes
• Predefined routes take precedence over dynamic routes, and dynamic routes over catch all routes. Take a look at the following examples:
  pages/post/create.js - Will match /post/create even if a global handler is present.

Please Refer screenshot from NextJS official documentation.

• 

SSR

By Default NextJs supports server side rendering. The default version of Sling uses getInitialProps() inside _app.js which forces every route change to fetch from the server. But this can be changed by using the pro version or by moving getInitialProps() from _app.js to custom pages.

Head for Headless

• Any Api calls for your Pages can be added directly inside the HOC or the wrapping Sling Component / Block or Widget.
• API calls can also be managed from the Sling Studio in the API's section. The Api Section provides an option to add a list of API Endpoints which can be attached to any widget props.
• Any API calls added from the Sling Studio are prefeched in the Sling Studio and are returned in the getInitialProps() initial API call.

Customizing Pages & Routes

Sling uses global handler [...global].js to find all matching routes. To create a custom route which does not use Sling you can just create your page route and NextJS will make sure the static file route you created gets the priority.

Custom Widgets

Sling works by connecting widgets with the configuration from the Studio. You can create any number of custom widgets and use them in your pages. To create a new widget create a directory for your widget and add widget.json and export your code in the index.js. Export this widget in the main exported index.js file for all the widgets. Make sure the widget Key matches the key name referring your Widget object.

Custom Cache

The Sling FE is dependent on Sling Studio for fetching the initial layout and theme settings. This adds a bit of latency in the frontend website. To avoid this, you can specify your own custom CDN path for the static JSON files.

Section Item 9.1 (FAQ Category One)

What's sit amet quam eget lacinia?

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.

How to ipsum dolor sit amet quam tortor?

Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui.

Can I bibendum sodales?

Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui.

Where arcu sed urna gravida?

Aenean et sodales nisi, vel efficitur sapien. Quisque molestie diam libero, et elementum diam mollis ac. In dignissim aliquam est eget ullamcorper. Sed id sodales tortor, eu finibus leo. Vivamus dapibus sollicitudin justo vel fermentum. Curabitur nec arcu sed urna gravida lobortis. Donec lectus est, imperdiet eu viverra viverra, ultricies nec urna.

Section Item 9.2 (FAQ Category Two)

What's sit amet quam eget lacinia?

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.

How to ipsum dolor sit amet quam tortor?

Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui.

Can I bibendum sodales?

Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui.

Where arcu sed urna gravida?

Aenean et sodales nisi, vel efficitur sapien. Quisque molestie diam libero, et elementum diam mollis ac. In dignissim aliquam est eget ullamcorper. Sed id sodales tortor, eu finibus leo. Vivamus dapibus sollicitudin justo vel fermentum. Curabitur nec arcu sed urna gravida lobortis. Donec lectus est, imperdiet eu viverra viverra, ultricies nec urna.

Section Item 9.3 (FAQ Category Three)

How to dapibus sollicitudin justo vel fermentum?

Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui.

How long bibendum sodales?

Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui.

Where dapibus sollicitudin?

Aenean et sodales nisi, vel efficitur sapien. Quisque molestie diam libero, et elementum diam mollis ac. In dignissim aliquam est eget ullamcorper. Sed id sodales tortor, eu finibus leo. Vivamus dapibus sollicitudin justo vel fermentum. Curabitur nec arcu sed urna gravida lobortis. Donec lectus est, imperdiet eu viverra viverra, ultricies nec urna.