2017 – Goodpic

Posted on April 13, 2017 December 29, 2017

How to extract and compile Sass/CSS with Webpack 2

Sass is now an indispensable tool for web designing, and it is true for creating a custom theme. Webpack also helps to make the build process even smoother. There was a slight change on the integration with the latest Webpack 2.x, so here is how.

This example assumes that you are creating a new WordPress child theme with Bedrock, and have already installed node.js and npm.

First, install Webpack module bundler in the theme directory.

% cd BEDROCK_DIR/site/web/app/themes/YOUR_THEME_NAME
% touch .gitignore

% cd BEDROCK_DIR/site/web/app/themes/YOUR_THEME_NAME

% touch .gitignore

add these lines

node_modules/
npm-debug.log

1 2	node_modules/ npm-debug.log

Install webpack and sass modules by npm.

% npm init -y
% npm install --save-dev webpack
% node node_modules/.bin/webpack --version
2.3.3
% npm install node-sass style-loader css-loader sass-loader extract-text-webpack-plugin --save-dev
% npm install susy
% npm install extract-text-webpack-plugin

% npm init -y

% npm install --save-dev webpack

% node node_modules/.bin/webpack --version

2.3.3

% npm install node-sass style-loader css-loader sass-loader extract-text-webpack-plugin --save-dev

% npm install susy

% npm install extract-text-webpack-plugin

Edit package.json to add command to build sass.

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "watch": "webpack --watch",
  "build": "webpack"
},

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"watch": "webpack --watch",

"build": "webpack"

Then create webpack.config.js to specify the Sass compile task. The syntax has been changed from Webpack version 1.x, and this is an example for webpack 2.3.3.

const path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = [{
  entry: {
    style: './src/stylesheets/main.scss'
  },
  output: {
    path: path.join(__dirname, ''),
    filename: '[name].css'
  },
  module: {
    loaders: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader',
        })
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: 'css-loader!sass-loader'
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('[name].css')
  ]
}]

const path = require('path')

const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = [{

entry: {

style: './src/stylesheets/main.scss'

output: {

path: path.join(__dirname, ''),

filename: '[name].css'

module: {

loaders: [

{

test: /\.css$/,

use: ExtractTextPlugin.extract({

fallback: 'style-loader',

use: 'css-loader',

})

{

test: /\.scss$/,

use: ExtractTextPlugin.extract({

fallback: 'style-loader',

use: 'css-loader!sass-loader'

})

}

]

plugins: [

new ExtractTextPlugin('[name].css')

]

}]

and create the styleshees directory.

% mkdir src
% cd src
% mkdir stylesheets
% cd stylesheets
% touch main.scss

% mkdir src

% cd src

% mkdir stylesheets

% cd stylesheets

% touch main.scss

If you are creating a new child theme of Storefront theme, the CSS would be something like this.

/*
Theme Name:     YOUR THEME NAME, Storefront Child Theme
Theme URI:
Author:         Jun Kaneko
Author URI:
Template:     	storefront
Description:  	This is a custome child theme for WooThemes StoreFront theme
Version:      	0.0.1
License:      	GNU General Public License v2 or later
License URI:  	http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  	storefront
Tags:         	black, white, light, two-columns, left-sidebar, right-sidebar, responsive-layout, custom-background, custom-colors, custom-header, custom-menu, featured-images, full-width-template, threaded-comments, accessibility-ready
Storefront is based on Underscores http://underscores.me/, (C) 2012-2014 Automattic, Inc.
FontAwesome License: SIL Open Font License - http://scripts.sil.org/OFL
Images License: GNU General Public License v2 or later
*/

@import "~susy/sass/susy";
body { @include container(80em); }

Theme Name: YOUR THEME NAME, Storefront Child Theme

Theme URI:

Author: Jun Kaneko

Author URI:

Template: storefront

Description: This is a custome child theme for WooThemes StoreFront theme

Version: 0.0.1

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Text Domain: storefront

Tags: black, white, light, two-columns, left-sidebar, right-sidebar, responsive-layout, custom-background, custom-colors, custom-header, custom-menu, featured-images, full-width-template, threaded-comments, accessibility-ready

FontAwesome License: SIL Open Font License - http://scripts.sil.org/OFL

Images License: GNU General Public License v2 or later

@import "~susy/sass/susy";

body { @include container(80em); }

Save the file and run the build. It will create a new style.css in the theme root directory.

% cd BEDROCK_DIR/site/web/app/themes/YOUR_THEME_NAME
% npm run build

% cd BEDROCK_DIR/site/web/app/themes/YOUR_THEME_NAME

% npm run build

To auto reload when you make any change on the file:

% npm run watch

1	% npm run watch

Posted on April 13, 2017 December 29, 2017

Install Woocommerce plugin and theme with Composer from the vendors’ repositories

When managing WordPress and the plugins with Composer via Trellis, I sometimes could not find a plugin or a theme that are not available from the wpackagist repository. This is how to install plugins and themes directly from the vendors’ github repo or download site.

Open composer.json and add repositories. For example to add Woocommerce plugin and the Storefront theme, specify the zip download URL with the package name. Each custom package requires an unique package name. I specified woocommerce-theme for the Storefront as woocommerce is already used by the plugin.

"repositories": [
  {
    "type": "composer",
    "url": "https://wpackagist.org"
  },
  {
    "type": "package",
    "package": {
      "name": "woocommerce-theme/storefront",
      "type": "wordpress-theme",
      "version": "2.1.8",
      "dist": {
        "type": "zip",
        "url": "https://downloads.wordpress.org/theme/storefront.2.1.8.zip"
      }
    }
  },
],

"repositories": [

{

"type": "composer",

"url": "https://wpackagist.org"

{

"type": "package",

"package": {

"name": "woocommerce-theme/storefront",

"type": "wordpress-theme",

"version": "2.1.8",

"dist": {

"type": "zip",

"url": "https://downloads.wordpress.org/theme/storefront.2.1.8.zip"

}

and requires them also in the same composer.json.

"require": {
  "php": ">=5.6",
  "composer/installers": "~1.2.0",
  "vlucas/phpdotenv": "^2.0.1",
  "johnpbloch/wordpress": "4.7.3",
  "oscarotero/env": "^1.0",
  "roots/wp-password-bcrypt": "1.0.0",
  "wpackagist-plugin/wp-mail-smtp": "*",
  "woocommerce/woocommerce": "3.2.6",
  "woocommerce-theme/storefront": "*"
},

"require": {

"php": ">=5.6",

"composer/installers": "~1.2.0",

"vlucas/phpdotenv": "^2.0.1",

"johnpbloch/wordpress": "4.7.3",

"oscarotero/env": "^1.0",

"roots/wp-password-bcrypt": "1.0.0",

"wpackagist-plugin/wp-mail-smtp": "*",

"woocommerce/woocommerce": "3.2.6",

"woocommerce-theme/storefront": "*"

To install the plugin and theme on the development environment, ssh to Vagrant and run composer update.

/trellis% vagrant ssh
vagrant@example:~$ cd /srv/www/example.com/current
vagrant@example:/srv/www/example.com/current$ composer update

/trellis% vagrant ssh

vagrant@example:~$ cd /srv/www/example.com/current

vagrant@example:/srv/www/example.com/current$ composer update

You may encounter permission error when “composer update”. In that case, remove the related folders from the local env.

%site pwd
/Users/USERNAME/PROJECT/site
% rm -rf vendor
% rm -Rf web/wp

%site pwd

/Users/USERNAME/PROJECT/site

% rm -rf vendor

% rm -Rf web/wp

Then again composer update in the Vagrant env.

vagrant@example:/srv/www/example.com/current$ composer update

1	vagrant@example:/srv/www/example.com/current$ composer update

The plugins will be installed automatically on the production when you next deploy.

Managing WordPress themes and plugins with Composer

Set up wp-coding-standards

To use WordPress coding standard, add the following repository in the composer.json.

"require-dev": {
    "squizlabs/php_codesniffer": "^3.0.2",
    "wp-coding-standards/wpcs": ">=0.10.0"
},

"require-dev": {

"squizlabs/php_codesniffer": "^3.0.2",

"wp-coding-standards/wpcs": ">=0.10.0"

They will be installed in the following directories.

/srv/www/example.com/current/vendor/wp-coding-standards/wpcs
/srv/www/example.com/current/vendor/squizlabs/php_codesniffer

You need to specify the relative path in the phpcs.xml

<?xml version="1.0"?>
<ruleset name="Roots">
  <description>Roots Coding Standards</description>

  <!-- Scan all files in directory -->
  <file>.</file>
  <config name="installed_paths" value="../../wp-coding-standards/wpcs"/>
  <!-- Scan only PHP files -->
  <arg name="extensions" value="php"/>

  <!-- Ignore WordPress and Composer dependencies -->
  <exclude-pattern>web/wp</exclude-pattern>
  <exclude-pattern>vendor/</exclude-pattern>

  <!-- Show colors in console -->
  <arg value="-colors"/>

  <!-- Show sniff codes in all reports -->
  <arg value="ns"/>

  <!-- Use WordPress as a base -->
  <rule ref="WordPress-Core">
  </rule>
</ruleset>

<?xml version="1.0"?>

<description>Roots Coding Standards</description>

<exclude-pattern>web/wp</exclude-pattern>

<exclude-pattern>vendor/</exclude-pattern>

</rule>

</ruleset>

If you are using ATOM Editor, install the following packages:

linter
linter-phpcs
editorconfig

To install phpcs, first set up the composer in your local env, then install phpcs.

% composer global require “squizlabs/php_codesniffer=*”

Then set up the ATOM linter-phpcs preference “Executable Path” to “/Users/USERNAME/.composer/vendor/bin/phpcs”.

If you encounter “Invalid point encountered in the attached message” linter-phpcs error, follow this comment.

https://github.com/AtomLinter/linter-phpcs/issues/280#issuecomment-319554831

Posted on March 22, 2017 December 29, 2017

How to configure Trellis for the production server

Once you have finished setting up a Trellis production server, let’s configure Trellis. These are recommended articles to refer.

We are going to manage entire configurations with git. This is probably one of the most useful aspects of Trellis. You can track all the changes on your website and easily upgrade, revert, and re-create the environments.
Since the repository contains sensitive server configurations, it should be stored in a private repository.
This example assumes that you create a private repo (REPO_NAME) on YOUR_GITHUB_USER_NAME account. To access the private repo, you may need to do this if you are on OXS:

% ssh-add -K

1	% ssh-add -K

SSH Keys | Trellis Documentation | Roots

Created your repository on Github then:

% cd ~/PATH/TO/PROJECT  
% git init
% git remote add origin git@github.com:YOUR_GITHUB_USER_NAME/REPO_NAME.git
% git status
% git add .
% git commit -m "Initial commit"
% git co -b setup

% cd ~/PATH/TO/PROJECT

% git init

% git remote add origin git@github.com:YOUR_GITHUB_USER_NAME/REPO_NAME.git

% git status

% git add .

% git commit -m "Initial commit"

% git co -b setup

Now let’s start the configuration.
First, add the production address to the trellis. I specified IP address of the production server (PRODUCTION_IP_ADDRESS should be replaced by your own IP address). The official document says that you can also use the hostname.

Edit : /trellis/hosts/production

[production]
PRODUCTION_IP_ADDRESS

[web]
PRODUCTION_IP_ADDRESS

[production]

PRODUCTION_IP_ADDRESS

[web]

PRODUCTION_IP_ADDRESS

Next, the WordPress configurations.

Edit : trellis/group_vars/production/wordpress_sites.yml

In this example, I added one redirect rule which routes access to example.com to www.example.com. Remove it if you don’t need it.

wordpress_sites:
  example.com:
    site_hosts:
      - canonical: www.example.com
        redirects:
          - example.com
    local_path: ../site # path targeting local Bedrock site directory (relative to Ansible root)
    repo: git@github.com:YOUR_GITHUB_USER_NAME/REPO_NAME.git # replace with your Git repo URL
    repo_subtree_path: site # relative path to your Bedrock/WP directory in your repo
    branch: master
    multisite:
      enabled: false
    ssl:
      enabled: true
      provider: letsencrypt
    cache:
      enabled: false

wordpress_sites:

example.com:

site_hosts:

- canonical: www.example.com

redirects:

- example.com

local_path: ../site # path targeting local Bedrock site directory (relative to Ansible root)

repo: git@github.com:YOUR_GITHUB_USER_NAME/REPO_NAME.git # replace with your Git repo URL

repo_subtree_path: site # relative path to your Bedrock/WP directory in your repo

branch: master

multisite:

enabled: false

ssl:

enabled: true

provider: letsencrypt

cache:

enabled: false

Then configure: trellis/group_vars/all/users.yml

Replace USER_NAME by the production user name which you created previously, and YOUR_GITHUB_USER_NAME by your github account.

# Documentation: https://roots.io/trellis/docs/ssh-keys/
admin_user: USER_NAME

# Also define 'vault_users' (`group_vars/staging/vault.yml`, `group_vars/production/vault.yml`)
users:
  - name: "{{ web_user }}"
    groups:
      - "{{ web_group }}"
    keys:
      - "{{ lookup('file', '~/.ssh/id_rsa.pub') }}"
      - https://github.com/YOUR_GITHUB_USER_NAME.keys
  - name: "{{ admin_user }}"
    groups:
      - sudo
    keys:
      - "{{ lookup('file', '~/.ssh/id_rsa.pub') }}"
      - https://github.com/YOUR_GITHUB_USER_NAME.keys

web_user: web
web_group: www-data
web_sudoers:
  - "/usr/sbin/service php7.1-fpm *"

# Documentation: https://roots.io/trellis/docs/ssh-keys/

admin_user: USER_NAME

# Also define 'vault_users' (`group_vars/staging/vault.yml`, `group_vars/production/vault.yml`)

users:

- name: "{{ web_user }}"

groups:

- "{{ web_group }}"

keys:

- "{{ lookup('file', '~/.ssh/id_rsa.pub') }}"

- https://github.com/YOUR_GITHUB_USER_NAME.keys

- name: "{{ admin_user }}"

groups:

- sudo

keys:

- "{{ lookup('file', '~/.ssh/id_rsa.pub') }}"

- https://github.com/YOUR_GITHUB_USER_NAME.keys

web_user: web

web_group: www-data

web_sudoers:

- "/usr/sbin/service php7.1-fpm *"

Next, let’s configure passwords by following the official doc.

Passwords | Trellis Documentation | Roots

Basically you need to modify settings in these files:

trellis/group_vars/all/vault.yml
trellis/group_vars/development/vault.yml
trellis/group_vars/staging/vault.yml
trellis/group_vars/production/vault.yml

Change all the passwords, and also not to forget to change example.com of each files to match to the domain name you specified in the corresponding wordpress_sites.yml

vault_wordpress_sites:
  example.com:

1 2	vault_wordpress_sites: example.com:

To protect the sensitive values, Trellis provides an encryption method called vault.

Vault | Trellis Documentation | Roots

Here is the breakdown of the steps:

/PATH/TO/PROJECT/trellis% nano .vault_pass

1	/PATH/TO/PROJECT/trellis% nano .vault_pass

Hard-code the password in the .vault_pass file, save and exit, then:

% chmod 600 .vault_pass

1	% chmod 600 .vault_pass

also add the file to .gitignore NOT to commit to the repository.

Edit : /trellis/ansible.cfg

vault_password_file = .vault_pass

1	vault_password_file = .vault_pass

and finally encrypt the vault files.

% ansible-vault encrypt group_vars/all/vault.yml group_vars/development/vault.yml group_vars/staging/vault.yml group_vars/production/vault.yml

1	% ansible-vault encrypt group_vars/all/vault.yml group_vars/development/vault.yml group_vars/staging/vault.yml group_vars/production/vault.yml

Commit the changes, and merge to the master on the github.

% cd ~/PATH/TO/PROJECT  
% git status
% git add .
% git commit -m "Configure the production"
% git push origin setup

% cd ~/PATH/TO/PROJECT

% git status

% git add .

% git commit -m "Configure the production"

% git push origin setup

Now you are almost ready to provision the production server. Just to final check that CNAME “www” of your domain (www.example.com) is reachable. It is required to issue “Let’s Encrypt SSL” cert during the server provisioning process.

How To Set Up a Host Name with DigitalOcean | DigitalOcean

If everything is ready, go for it!

/PATH/TO/PROJECT/trellis% ansible-playbook server.yml -e env=production

1	/PATH/TO/PROJECT/trellis% ansible-playbook server.yml -e env=production

When the server is provisioned, deploy the code.

% ssh-add -K
% ssh -T git@github.com
% ansible-playbook deploy.yml -e "site=YOUR_DOMAIN.com env=production"

% ssh-add -K

% ssh -T git@github.com

% ansible-playbook deploy.yml -e "site=YOUR_DOMAIN.com env=production"

If all succeed, you will be able to access your production server.

Posted on March 22, 2017 April 12, 2017

How to configure a Trellis production server on Digital Ocean

Once your local environment is ready, let’s continue to set up the production server. Digital Ocean hosting is one good choice for the production server. Setting up the server is straightforward, just following these instructions.
When you choose the type of Droplet, select the plain Ubuntsu NOT the LEMP stack. Trellis should take care all the application configurations.

When your server is up, let’s configure it for the Trellis. First, create a new user and grant sudo access to deploy the Trellis. Replace USER_NAME to your own user name.

% ssh root@PRODUCTION_IP_ADDRESS

$ adduser USER_NAME
$ usermod -aG sudo USER_NAME
$ su - USER_NAME

% ssh root@PRODUCTION_IP_ADDRESS

$ adduser USER_NAME

$ usermod -aG sudo USER_NAME

$ su - USER_NAME

Sudo NOPASSWD option helps to automate the admin tasks. Grant no password sudo on the production server.

$ sudo visudo

1	$ sudo visudo

add this line at the end of line. It does not work if you add them before some statement.

# User privilege specification
root    ALL=(ALL:ALL) ALL

# Members of the admin group may gain root privileges
%admin ALL=(ALL) ALL

# Allow members of group sudo to execute any command
%sudo   ALL=(ALL:ALL) ALL

# See sudoers(5) for more information on "#include" directives:

#includedir /etc/sudoers.d

USER_NAME ALL=NOPASSWD: ALL

# User privilege specification

root ALL=(ALL:ALL) ALL

# Members of the admin group may gain root privileges

%admin ALL=(ALL) ALL

# Allow members of group sudo to execute any command

%sudo ALL=(ALL:ALL) ALL

# See sudoers(5) for more information on "#include" directives:

#includedir /etc/sudoers.d

USER_NAME ALL=NOPASSWD: ALL

Then configure the public key ssh login from your local environment.

~/.ssh% cat ~/.ssh/id_rsa.pub

1	~/.ssh% cat ~/.ssh/id_rsa.pub

and copy the key to the production server.

% ssh USERNAME@PRODUCTION_IP_ADDRESS

$ mkdir ~/.ssh
$ chmod 700 ~/.ssh
$ nano ~/.ssh/authorized_keys

% ssh USERNAME@PRODUCTION_IP_ADDRESS

$ mkdir ~/.ssh

$ chmod 700 ~/.ssh

$ nano ~/.ssh/authorized_keys

Paste the copied public key. Hit CTRL-x to exit the file, then y to save the changes that you made, then ENTER to confirm the file name.

Restrict the permissions of the authorized_keys file with this command:

$ chmod 600 ~/.ssh/authorized_keys
$ exit

1 2	$ chmod 600 ~/.ssh/authorized_keys $ exit

Add alias to .zshrc so that I can connect to the production server.

alias sshproduction="ssh USER_NAME@PRODUCTION_IP_ADDRESS"

1	alias sshproduction="ssh USER_NAME@PRODUCTION_IP_ADDRESS"

% sshproduction

1	% sshproduction

Posted on March 22, 2017 April 12, 2017

Setting up VirtualBox, Vagrant, Ansible and github to install Trellis

This is a series of memos to install and build WordPress website using Trellis.

In this first article, I will explain the steps to set up the VirtualBox and Vagrant environment on Mac OSX (Sierra). Make sure that you have already installed x-code and it is ready to use, and read through the official documentation.

Installing Trellis | Trellis Documentation | Roots

First install VirtualBox, Vagrant and then also install required vagrant modules.

% mkdir python
% cd python 
% curl -L -O https://bootstrap.pypa.io/get-pip.py
% sudo python ./get-pip.py
% sudo pip install ansible

% vagrant plugin install vagrant-bindfs
% vagrant plugin install vagrant-hostsupdater
% vagrant plugin install vagrant-hostmanager

% mkdir python

% cd python

% curl -L -O https://bootstrap.pypa.io/get-pip.py

% sudo python ./get-pip.py

% sudo pip install ansible

% vagrant plugin install vagrant-bindfs

% vagrant plugin install vagrant-hostsupdater

% vagrant plugin install vagrant-hostmanager

Next, we will install trellis via Github. Make sure that you can connect to Github via ssh.

% ls -al ~/.ssh
% pbcopy < ~/.ssh/id_rsa.pub

% ls -al ~/.ssh

% pbcopy < ~/.ssh/id_rsa.pub

Add the ssh key to github following this instruction.

% ssh -T git@github.com
Hi USER_NAME! You've successfully authenticated, but GitHub does not provide shell access.

% ssh -T git@github.com

Hi USER_NAME! You've successfully authenticated, but GitHub does not provide shell access.

Now you are ready to clone trellis and bedrock code from the Github repos.

% cd ~/PATH/TO/PROJECT
% git clone --depth=1 git@github.com:roots/trellis.git && rm -rf trellis/.git
% git clone --depth=1 git@github.com:roots/bedrock.git site && rm -rf site/.git

% cd trellis && ansible-galaxy install -r requirements.yml
% nano group_vars/development/wordpress_sites.yml
% nano group_vars/development/valult.yml

% cd ~/PATH/TO/PROJECT

% git clone --depth=1 git@github.com:roots/trellis.git && rm -rf trellis/.git

% git clone --depth=1 git@github.com:roots/bedrock.git site && rm -rf site/.git

% cd trellis && ansible-galaxy install -r requirements.yml

% nano group_vars/development/wordpress_sites.yml

% nano group_vars/development/valult.yml

Edit config to set your site name.

Local Development Setup | Trellis Documentation | Roots

and initialize your virtual machine.

% vagrant up

1	% vagrant up

Continues to How to configure a Trellis production server on Digital Ocean.