Co-Installing Zurb Foundation 5 and 6 on the Same Machine

Introduction

In my case I use the ZURB Foundation 5 theme with Drupal 7 for some projects and Foundation 6 with for other projects that don't require Drupal, with sass and the Foundation provided Gruntfile.js and gulpfile.babel.js for Foundation 5 and 6 respectively. Because of this requirement, I need both versions installed.

It should be noted that while I was able to get both versions working on both Manjaro and openSUSE (and on an overwritten installation of Ubuntu 17.04) -- I don't have any experience with Ruby or gems, or (even Node.js) which required two installations of the Foundation 5 gem, globally and in my user directory. Nevertheless, the installations work after some trial and error, and I wrote this article simply to provide a reference starting point for getting both versions co-installed, which is to make sure version 5 and version 6 executables are installed in different locations and create symlinks to these with different names for the same foundation command that is used by both versions.

The Zurb site indicates that this is not possible out-of-the-box. But with some modification of the default installations and symlinking, it is possible to install and use both versions on the same Linux installation.

Before installing either version of Zurb Foundation, install the dependencies. For Foundation 5, these are Git, NodeJS, and Ruby 1.9+. For Foundation 6, there don't seem to be any requirements besides NodeJS. NPM is also required to install development dependencies within the projects and to install Foundation 6.

In the Arch based Manjaro or openSUSE Tumbleweed git seems to be already installed by default -- unless it was installed as a dependency of something else I installed, as is an appropriate version of Ruby. But Node.js and NPM will need to be installed before installing either version of Foundation.

• install node.js
  • on Manjaro
  sudo pacman -S nodejs
  • on openSUSE Tumbleweed
  as root: zypper in nodejs8
• install npm
  • on Manjaro
  sudo pacman -S npm
  • on openSUSE Tumbleweed, npm8 is automatically selected for installation when nodejs8 is installed

Install Foundation 5

Install grunt-cli and bower^[1]

• on Manjaro
sudo npm install -g bower grunt-cli sudo gem install foundation -V --no-user-install --install-dir /opt/gem gem install foundation -V --user-install
• on openSUSE
as root: npm install -g bower grunt-cli as root: gem install foundation -V --no-user-install --install-dir /opt/gem gem install foundation -V --user-install

The first installation of Foundation 5, above, using the --no-user-install will install everyting in the /opt/gem directory, creating a subdirectory called /opt/gem/gems. The foundation executable and the executable of a dependency will be created at /opt/gem/bin/foundation. I wanted to install in /opt, trying to follow UNIX traditions and standards so I had to use sudo. You may want to experiment and think about how you want to install using administrator privleges or not or using default settings, or the options I used. The decision may be different based on the distribution you use. The second installation of Foundation 5, above, using the --user-install installs in the user's home directory at ~/.gem following the heirarchy of /opt/gems. The user's PATH environment variable should be modified to include the local installation.

Install Foundation 6

• on Manjaro
sudo npm install --global foundation-cli This will create a symlink /usr/bin/foundation to the actual Foundation 6 executable /usr/lib/node_modules/foundation-cli/bin/foundation.js The symlink should be renamed to reflect the version.
• on openSUSE
as root: npm install --global foundation-cli This will create a symlink /usr/local/bin/foundation to the actual Foundation 6 executable /usr/local/lib/node_modules/foundation-cli/bin/foundation.js The symlink should be renamed to reflect the version.

Create Symlinks and Rename

on Manjaro

sudo ln -s /opt/gem/bin/foundation /usr/bin/foundation5 sudo mv /usr/bin/foundation /usr/bin/foundation6

on openSUSE

as root: ln -s /opt/gem/bin/foundation.ruby2.4 /usr/bin/foundation5 as root: mv /usr/local/bin/foundation /usr/local/bin/foundation6 The original link to the executable is preserved when renaming the Foundation 6 symlink created during installation. So now if we want to use Foundation 5's foundation command we use foundation5 and if we want to use Foundation 6's foundation foundation command we use foundation6.

[brook@VN7-592G-70EN-MANJARO:~] $ ls -l /usr/bin | grep foundation
lrwxrwxrwx 1 root root       23 Jul 28 17:59 foundation5 -> /opt/gem/bin/foundation
lrwxrwxrwx 1 root root       52 Jul 28 17:51 foundation6 -> ../lib/node_modules/foundation-cli/bin/foundation.js

N7-592G-70EN-openSUSE:~ # ls -l /usr/local/bin | grep foundation
lrwxrwxrwx 1 root root 52 Nov  6 16:52 foundation6 -> ../lib/node_modules/foundation-cli/bin/foundation.js
VN7-592G-70EN-openSUSE:~ # ls -l /usr/bin | grep foundation
lrwxrwxrwx 1 root root          31 Nov  6 17:07 foundation5 -> /opt/gem/bin/foundation.ruby2.4
VN7-592G-70EN-openSUSE:~ # 

Conclusion

The key to making both the Foundation 5 and Foundation 6 commands work is to make sure the executables for both of these versions are in different locations and, in the case of Foundation 5, symlink to the actual executable from /usr/bin using a name other than 'foundation' -- I chose 'foundation5'. In the case of Foudation 6, the command for which is itself a symlink to the actual executable created during installation, the link should be renamed to something other than 'foundation' -- I chose 'foundation6'.

The terminal on the left shows the output of foundation6 watch running on a previously created Foundation 6 project. The upper right terminal shows the output of grunt watch running on a previously created Fundation 5 project. The lower right terminal, split to show the beginning and the end of the output, shows the creation of a new Foundation 5 project using foundation5 new ftest --libsass.