Skip to content

Setup for Working on Genesis Features

Use the following instructions to prepare a Miva Store and your local development environment so you can work on Genesis tasks, features, and bugfixes.

Warning

Before helping out, please be sure to review the contributing prerequisites

Install Contributor Software

Writing Documentation

If you're going to be contributing to Genesis & writing documentation:

  • Install Python, Pip, & Pipenv
  • Activation
    • Run the following command in your terminal to start your virtual environment
      Terminal
      pipenv shell
  • Installing Packages
    Terminal
    pnpm install
  • Documentation
    • Start mkdocs in "watch" mode.
      Terminal
      pnpm run start:docs
    • Build mkdocs for production.
      Terminal
      pnpm run build:docs

SSH Setup

Note

This is only needed for publishing features/releases to genesis.mivareadythemes.com*

Install Genesis on Your Store

Follow the Miva store installation process

Note

You will most-likely want to install the framework from the develop branch or you can log into the genesis.mivamerchantdev.com store and create a fresh framework-pkg file. Just create it with the following framework-code: genesis-YYYY-MM-DD

Clone & Configure the mvps-genesis Repo

The following commands show how setup your repo by: cloning the repo, initialize & configure the repo's settings, install dev-dependencies, run a build, and upload the build to your development store.

Terminal
git clone https://bitbucket.mivamerchant.net/scm/psir/mvps-genesis.git
cd mvps-genesis
pnpm run init
pnpm run build dev
# FTP upload the `public` folder to your dev-store: themes/genesis/public
Terminal
git clone ssh://[email protected]:7999/psir/mvps-genesis.git
cd mvps-genesis
pnpm run init
pnpm run build dev
# FTP upload the `public` folder to your dev-store: themes/genesis/public

Configure VS Code to use the Repo's Linting Configs

Now that the repo contains linter config-files (ex .eslintrc.json and .stylelintrc.json), you may need to configure your VS Code to use the repo's linter configs instead of the ones in your ~/mvps-configs/ directory.

Check your VS Code Linter Config Settings

  1. In VS Code, open the Command Prompt and type/select: Preferences: Open Settings (JSON)
  2. If you see settings like this, then you may need to make some adjustments: 
    "eslint.options": {
    "configFile": "C:/Users/jsmith/mvps-configs/.eslintrc.json",
    "resolvePluginsRelativeTo": "C:/Users/jsmith/mvps-configs"
},
"stylelint.config": {
    "extends": "C:/Users/jsmith/mvps-configs/.stylelintrc.json"
},
  3. If you do not see any settings like this, then you liklely do not need to do anything. Eslint & Stylelint should pickup on the repo-level configs and you can move-on to Start Working on Tasks
  4. However, If you do see the above settings, then you have two options...

Option #1 - Add Workspace Level Settings

  1. Open your Workspace Settings file by opening the command prompt and typing/selecting Preferences: Open Workspace Settings (JSON)
  2. Add eslint.options and stylelint.config entries in your existing .code-workspace 
    // Sample mvps-genesis.code-workspace file-content...
{
    "folders": [
        {
            "path": "C:\\Users\\jsmith\\Documents\\Development\\mvps-genesis"
        }
    ],
    "settings": {
        "favorites.resources": [
            "generator-quickstart\\app\\templates\\themes\\genesis\\theme-settings.json"
        ],
        "eslint.options": {
            "configFile": "C:\\Users\\jsmith\\Documents\\Development\\mvps-genesis\\.eslintrc.json",
            "resolvePluginsRelativeTo": "C:\\Users\\jsmith\\Documents\\Development\\mvps-genesis\\"
        },
        "stylelint.config": {
            "extends": "C:\\Users\\jsmith\\Documents\\Development\\mvps-genesis\\.stylelintrc.json"
        }
    }
}

Note: If you're not using a Workspace and you have just opened the folder, then then you can just add these settings to .vscode/settings.json within the folder/repo you're working on

Option #2 - Modify the ~/mvps-configs Install

VS Code's default settings were updated to point the linter configs to ~/mvps-configs/ to make it easy to git pull the latest changes to your local machine over-time. However, if we move the linter-config files from ~/mvps-configs/ to your user directory ~/, and you work in a sub-directory of your user directory (ex ~/Documents/Development/mvps-genesis), then the VS Code plugins & Linters will be able to automatically traverse up and find the linter config files.

Process:

  1. Copy the linter-config files to your user directory and install their dependencies
    Terminal
    cd ~/mvps-config/
cp .eslintrc.json ../
cp .stylelintrc.json ../
cp package.json ../
cd ../
pnpm install
  2. Remove your global VS Code settings for:
    • eslint.options.configFile
    • eslint.options.resolvePluginsRelativeTo
    • stylelint.confg.extends
    • For example, you would remove the following settings from your global VS Code settings: 
      "eslint.options": {
    "configFile": "C:/Users/jsmith/mvps-configs/.eslintrc.json",
    "resolvePluginsRelativeTo": "C:/Users/jsmith/mvps-configs"
},
"stylelint.config": {
    "extends": "C:/Users/jsmith/mvps-configs/.stylelintrc.json"
}

Start Working on Tasks

After following the above processes you should be able to run $ pnpm run start within the generator-quickstart/app/templates/themes/genesis/ folder and proceed to start working on tasks