Local Development Environment

Overview

This guide will cover initializing the project repository, connecting your local development environment to Shogun Frontend and Shopify, installing dependencies, and creating your first Section using Storybook.

Prequisites

Initializing project repository

When getting set up for the first time, you will need a fresh copy of the current Starter Kit repository. Email a Shogun rep (contact [email protected]), give your org name, and ask for a zip file of the Shogun Frontend Starter Kit repo. You’ll only need to do the following steps once.

  1. Download the zip file you'll receive via email.
  2. Unzip the file to your working directory.
  3. Follow instructions for "Adding a project to Github without GitHub CLI".
  4. If not already installed, Install Node.js from https://nodejs.org/en/.
  5. If not already installed, Install Yarn package manager:
    npm install -g yarn (may require sudo if on macOS or Linux)

Connecting your local development environment to Shogun Frontend and Shopify

Now, let’s get a development environment running so you can start working on Sections of the store from your local build.

Connecting your local development environment to Shogun Frontend

  1. Open the newly created project directory in your favorite code editor.
  2. Duplicate the .env.example file, naming it as .env.
  3. In your root directory, edit the .env file’s PLATFORM variable to equal shopify or big_commerce.
  4. If a Shopify store, it’s time to secure your STORE_TOKEN:
    -Login to your store on Shopify
    -On the left sidebar, click Apps
    -Scroll to the bottom, click where it says “Working with a developer on your shop? Manage
    private apps”
    -Scroll down to the “Storefront API” section
    -Your store token is where it says “Storefront access token”
    -Change the STORE_TOKEN in .env to this token

The final .env file will look like this:

# Update env variables below:
# PLATFORM can be shopify or big_commerce
PLATFORM=shopify

# Shopify storeToken - to get yours, follow the steps below. (Ignore these steps if BigCommerce.)
# 1 - Login to the store on Shopify
# 2 - On the left sidebar, click Apps
# 3 - Open private apps
# 4 - Click where it says `Working with a developer on your shop? Manage private apps`
# 5 - Open your private app
# 6 - Scroll down to the `Storefront API` section
# 7 - Your store token is where it says `Storefront access token`
STORE_TOKEN=18f1759481a7431c7eb85f270c2267ae

# Params from Algolia to enable search requests for Search.stories.mdx
SEARCH_APP_ID=92OWXSK910
SEARCH_API_KEY=...
SEARCH_INDICES=[{"name":"starter-kit-mvp-products-manual","cmsModel":{"id":"1979034f-2721-47b3-940d-07fd055e8ba4","name":"Products"}}]

# Don't change env variables below:

## ResponsiveImage config
UPLOADCARE_CDN_URL=f.shgcdn.com
VALID_UPLOADCARE_CDN_URLS=assets.frontend.shogun.dev,frontend.shgcdn.com,ucarecdn.com,f.shgcdn.com

Finalizing environment

  1. In a terminal window, navigate to your project directory and use Yarn to install local dependencies:
    yarn install

Creating store Sections

With your developer environment set up, it’s time to start working on Sections of the store. This will be the recurring workflow when building a store in Shogun Frontend.

Creating sections

  1. Run yarn start to launch Storybook:
    yarn start

This will print out the Storybook url on your terminal. Copy and open it in your browser of choice.

  1. In your preferred code editor, create a new folder for your new section in src/sections; for example, src/sections/FooterNavigation/.
  2. Add stubbed JSX and CSS files:
import React from 'react'

import styles from './styles.module.css'

const Component = (props) => {
  console.log(props)
  return (
    <p>...</p>
  )
}

export default Component
  1. Commit changes to repository:
    git add .
    git commit -m “my first section”
    git push
  2. Log into store on Shogun Frontend.
  3. Link FE store to GitHub repository.
  4. Force pull changes to Shogun Frontend.

Adding variables to sections

One of the powerful aspects of Frontend is the ability to customize variables quickly within page sections.

  1. Navigate to your sections area and search for your newly created section.
  1. Inside the Shogun Frontend IDE, add any desired variables to the variable area.
  1. Navigate to the pages area and add your newly created section to a new/existing page.
  1. Associate any CMS entries, media, and text that you want with each variable.

Finalizing sections

Let’s finalize the changes you’ve made and get them published from your local environment to Shogun Frontend.

  1. Retrieve any JSON object representing props from the console.log call inside section code
  1. Copy props object to new JS file inside of src/lib/mocks with the same name as your new section exporting the values from the file
  1. Create a Storybook story file importing mock data so it can be previewed locally
  1. Write section code. When complete, commit to main.
    git add .
    git commit -m “finalizing section”
    git push

Shogun Frontend’s GitHub integration should automatically pick up the changes you made make them available inside the Shogun Frontend web UI.

Locally installing dependencies

Once a dependency is added to your Shogun Frontend store, you will also need to add this to your local environment. To do so, you will need to run the following command in your project:
yarn add package-to-be-installed


Did this page help you?