Skip to content

Commit

Permalink
Merge pull request #2 from sergejcodes/dev
Browse files Browse the repository at this point in the history
Theme initialization
  • Loading branch information
sergejcodes authored Sep 14, 2020
2 parents 041f51b + 705aab7 commit e808d5c
Show file tree
Hide file tree
Showing 16 changed files with 948 additions and 70 deletions.
File renamed without changes
2 changes: 1 addition & 1 deletion .config/reloadr/reloadr.client.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const options = require('../reloadr.config.js')
const options = require('./reloadr.config.js')

initReloadrClient = () => {
const socket = new WebSocket(`ws://localhost:${options.websocketPort}`)
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const package = require('../package.json')
const package = require('../../package.json')

// load values from package.json
module.exports = {
Expand Down
2 changes: 1 addition & 1 deletion .config/reloadr/reloadr.server.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const http = require('http')
const WebSocket = require('ws')
const chalk = require('chalk')
const options = require('../reloadr.config.js')
const options = require('./reloadr.config.js')

/**
* custom console.log
Expand Down
17 changes: 0 additions & 17 deletions .config/sample.shopify.config.yml

This file was deleted.

File renamed without changes.
110 changes: 110 additions & 0 deletions .config/shopify/shopify.init.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
const path = require('path')
const fs = require('fs-extra')
const commandLineArgs = require('command-line-args')
const yaml = require('yaml')
const axios = require('axios')
const chalk = require('chalk')
const themeKit = require('@shopify/themekit')

/**
* get command line arguments
*/
const optionDefinitions = [
{ name: 'env', alias: 'e', type: String, defaultValue: 'dev' },
{ name: 'password', alias: 'p', type: String },
{ name: 'store', alias: 's', type: String },
{ name: 'name', alias: 'n', type: String, defaultValue: 'Shopify Starterkit' }
]

const options = commandLineArgs(optionDefinitions)

// check the provided options
if (Object.keys(options).length < 4) {
console.error(chalk.red('not enough arguments provided for initialization'))
process.exit(1)
}

if (!options.env.match(/^dev$|^live$|^staging$/)) {
console.error(chalk.red('env should be \'dev\', \'live\' or \'staging\''))
process.exit(1)
}

/**
* additional variables
*/
const configPath = path.resolve(__dirname, `./shopify.${options.env}.yml`)
let themeId // assigned after remote initialization

/**
* function initialises local config and remote shopify theme
*/
const initTheme = async () => {
// initialize empty theme on shopify store
try {
const response = await axios.post(
`https://${options.store}/admin/api/2020-07/themes.json`,
{ theme: { name: options.name } },
{ headers: { 'X-Shopify-Access-Token': options.password } }
)

// assign theme id
themeId = response.data.theme.id.toString()
} catch (e) {
console.error(chalk.red(e))
process.exit(1)
}

// create yaml config
const yamlConfig = yaml.stringify({
[options.env]: {
password: options.password,
theme_id: themeId,
store: options.store,
directory: 'shopify',
ignores: [
'.config/shopify/.shopifyignore'
]
}
})

// write shopify config file
try{
await fs.outputFile(configPath, yamlConfig)
} catch (e) {
console.error(chalk.red(e))
process.exit(1)
}

// write settings_data.json to shopify/config
try{
const settingsData = {
current: 'Default',
presets: {
Default: {}
}
}

await fs.outputFile(path.resolve(__dirname, '../../shopify/config/settings_data.json'), JSON.stringify(settingsData))
} catch (e) {
console.error(chalk.red(e))
process.exit(1)
}

// upload shopify theme to remote
try{
await themeKit.command('deploy', {
config: configPath,
env: options.env
})
} catch (e) {
console.error(chalk.red(e))
process.exit(1)
}

console.log(chalk.green('initialized remote theme'))
}

/**
* inititalise theme
*/
initTheme()
7 changes: 7 additions & 0 deletions .config/shopify/shopify.sample.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
dev:
password: [your-api-password]
theme_id: "[your-theme-id]"
store: [your-store].myshopify.com
directory: shopify
ignores:
- .config/shopify/.shopifyignore
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,16 @@ const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
stats: 'minimal',
entry: path.resolve(__dirname, '../src/main.js'),
entry: path.resolve(__dirname, '../../src/main.js'),
output: {
path: path.resolve(__dirname, '../shopify/assets/'),
path: path.resolve(__dirname, '../../shopify/assets/'),
filename: 'bundle.js'
},
resolve: {
extensions: ['*', '.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': path.resolve(__dirname, '../src/')
'@': path.resolve(__dirname, '../../src/')
}
},
module: {
Expand Down
8 changes: 4 additions & 4 deletions .config/webpack.dev.js → .config/webpack/webpack.dev.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ const common = require('./webpack.common.js')
module.exports = merge(common, {
mode: 'development',
entry: [
path.resolve(__dirname, '../src/main.js'),
path.resolve(__dirname, './reloadr/reloadr.client.js') // add reloadr to the bundle
path.resolve(__dirname, '../../src/main.js'),
path.resolve(__dirname, '../reloadr/reloadr.client.js') // add reloadr to the bundle
],
module: {
rules: [
Expand All @@ -18,7 +18,7 @@ module.exports = merge(common, {
{
loader: 'eslint-loader',
options: {
configFile: path.resolve(__dirname, '.eslintrc.js')
configFile: path.resolve(__dirname, '../.eslintrc.js')
}
}
]
Expand All @@ -31,7 +31,7 @@ module.exports = merge(common, {
{
loader: 'postcss-loader',
options: {
postcssOptions: require('./postcss.config.js')
postcssOptions: require(path.resolve(__dirname, '../postcss.config.js'))
}
},
'sass-loader'
Expand Down
3 changes: 2 additions & 1 deletion .config/webpack.prod.js → .config/webpack/webpack.prod.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
const path = require('path')
const { merge } = require('webpack-merge')
const common = require('./webpack.common.js')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
Expand Down Expand Up @@ -25,7 +26,7 @@ module.exports = merge(common, {
{
loader: 'postcss-loader',
options: {
postcssOptions: require('./postcss.config.js')
postcssOptions: require(path.resolve(__dirname, '../postcss.config.js'))
}
},
'sass-loader'
Expand Down
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ node_modules/
*.log

# shopify files
shopify.config.yml
shopify.dev.yml
shopify.live.yml
shopify/config/settings_data.json

# adjust if static assets in the assets directory should be tracked
Expand Down
39 changes: 27 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<img width="100%" src=".config/readme/banner.svg" alt="Shopify Starterkit banner">
<img width="100%" src=".config/.readme/banner.svg" alt="Shopify Starterkit banner">

# Shopify Starterkit

Expand All @@ -7,7 +7,7 @@ The kit provides an easy way to build a custom Shopify theme from scratch. It co

## Features
- Shopify
- Shopify Theme Kit Integration
- Shopify Theme Kit
- Vue
- Vuex
- SCSS
Expand All @@ -18,20 +18,33 @@ The kit provides an easy way to build a custom Shopify theme from scratch. It co

## System requirements
- Node.js
- Yarn
- [Shopify Theme Kit](https://shopify.github.io/themekit)
- npm or yarn

## Getting started
1. Follow the steps on [Theme Kit Docs](https://shopify.github.io/themekit)
1. Get Shopify api access [Theme Kit Docs](https://shopify.github.io/themekit#get-api-access)
2. Clone or download this repo
3. Copy and adjust `.config/sample.shopify.config.yml` with credentials from step 1
4. Run `$ yarn install` in root directory
5. Run `$ yarn start` to start developing
6. Run `$ yarn open:dev` to open the development url

3. Install dependencies:
```
$ yarn install
```

4. Initialize theme on Shopify with credentials from first step. Either for **dev** or **live** environment:
```
$ yarn shopify:init --password [your-api-password] --store [your-store.myshopify.com] --env [dev or live] --name [theme name]
```

5. Start developing:
```
$ yarn start
$ yarn open:dev
```

## Deploying
1. Run `$ yarn build` to build `js` and `css` files
2. Run `$ yarn shopify:deploy` to deploy to live store
```
$ yarn build
$ yarn deploy:live
```

## Directories
| Directory | Description |
Expand All @@ -48,7 +61,9 @@ The kit provides an easy way to build a custom Shopify theme from scratch. It co
| build | create dist files for Shopify in `shopify/assets/` directory with webpack |
| reloadr | run a http server and websocket server for remote auto reloading |
| shopify:watch | watch for changes in the `shopify/` directory and upload to the dev store |
| shopify:deploy | upload the `shopify/` directory to the live store |
| shopify:init | initializes theme on remote shopware store and creates a shopify config file for specified environment |
| deploy:dev | upload the `shopify/` directory to the dev store |
| deploy:live | upload the `shopify/` directory to the live store |
| settings:dev | download `settings_data.json` from dev store |
| settings:live | download `settings_data.json` from live store |
| open:dev | open the url of the dev store |
Expand Down
28 changes: 17 additions & 11 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "shopify-starterkit",
"description": "Environment for rapid Shopify theme development with Vue and Tailwind CSS",
"author": "Sergej Samsonenko",
"version": "1.0.1",
"version": "1.1.0",
"license": "MIT",
"repository": {
"type": "git",
Expand All @@ -21,16 +21,18 @@
},
"scripts": {
"start": "npm-run-all --parallel --race dev reloadr shopify:watch",
"dev": "cross-env NODE_ENV=development node_modules/.bin/webpack --config .config/webpack.dev.js --watch",
"build": "cross-env NODE_ENV=production node_modules/.bin/webpack --config .config/webpack.prod.js",
"dev": "cross-env NODE_ENV=development node_modules/.bin/webpack --config .config/webpack/webpack.dev.js --watch",
"build": "cross-env NODE_ENV=production node_modules/.bin/webpack --config .config/webpack/webpack.prod.js",
"reloadr": "node .config/reloadr/reloadr.server.js",
"shopify:watch": "cross-var theme watch --env=development --allow-live --config .config/shopify.config.yml --dir shopify --notify=http://localhost:$npm_package_config_reloadr_serverPort/reload",
"shopify:deploy": "theme deploy --env=production --config .config/shopify.config.yml --dir shopify",
"settings:dev": "theme --env=development download config/settings_data.json -c .config/shopify.config.yml",
"settings:live": "theme --env=live download config/settings_data.json -c .config/shopify.config.yml",
"open:dev": "theme open --env=development --config .config/shopify.config.yml",
"open:live": "theme open --env=production --config .config/shopify.config.yml",
"lint": "node_modules/.bin/eslint src/**/*.js src/**/*.vue --config .config/.eslintrc.js"
"lint": "node_modules/.bin/eslint src/**/*.js src/**/*.vue --config .config/.eslintrc.js",
"shopify:watch": "cross-var shopify-themekit watch --env=dev --allow-live --config .config/shopify/shopify.dev.yml --notify=http://localhost:$npm_package_config_reloadr_serverPort/reload",
"shopify:init": "node .config/shopify/shopify.init.js",
"deploy:dev": "shopify-themekit deploy --env=dev --config .config/shopify/shopify.dev.yml --allow-live",
"deploy:live": "shopify-themekit deploy --env=live --config .config/shopify/shopify.live.yml",
"settings:dev": "shopify-themekit --env=dev download config/settings_data.json --config .config/shopify/shopify.dev.yml",
"settings:live": "shopify-themekit --env=live download config/settings_data.json --config .config/shopify/shopify.live.yml",
"open:dev": "shopify-themekit open --env=dev --config .config/shopify/shopify.dev.yml",
"open:live": "shopify-themekit open --env=live --config .config/shopify/shopify.live.yml"
},
"dependencies": {
"axios": "^0.20.0",
Expand All @@ -41,16 +43,19 @@
"devDependencies": {
"@babel/core": "^7.11.6",
"@babel/preset-env": "^7.11.5",
"@shopify/themekit": "^1.1.6",
"babel-loader": "^8.1.0",
"chalk": "^4.1.0",
"clean-webpack-plugin": "^3.0.0",
"command-line-args": "^5.1.1",
"cross-env": "^7.0.2",
"cross-var": "^1.1.0",
"css-loader": "^4.3.0",
"eslint": "^7.9.0",
"eslint-loader": "^4.0.2",
"eslint-plugin-vue": "^6.2.2",
"file-loader": "^6.1.0",
"fs-extra": "^9.0.1",
"mini-css-extract-plugin": "^0.11.1",
"node-sass": "^4.14.1",
"npm-run-all": "^4.1.5",
Expand All @@ -66,6 +71,7 @@
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-merge": "^5.1.4",
"ws": "^7.3.1"
"ws": "^7.3.1",
"yaml": "^1.10.0"
}
}
6 changes: 2 additions & 4 deletions shopify/layout/theme.liquid
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,8 @@
<link rel="canonical" href="{{ canonical_url }}">
{% endif %}

{% comment %} include css bundle if domain doesn't contain 'myshopify.com' {% endcomment %}
{% unless shop.url contains 'myshopify.com' %}
{{ 'bundle.css' | asset_url | stylesheet_tag }}
{% endunless %}
{% comment %} css bundle is not loaded during development task {% endcomment %}
{{ 'bundle.css' | asset_url | stylesheet_tag }}

<!-- Header hook for plugins -->
{{ content_for_header }}
Expand Down
Loading

0 comments on commit e808d5c

Please sign in to comment.