Installation issues?

[jondor]

While trying to get FoundationPress up and running I ran into a problem. First my notes:

Node.js: https://nodesource.com/blog/chris-lea-joins-forces-with-nodesource
after a lot of searching around I ended up here. Run the named script and ended up with node.js 0.10.40 which seems to be good. Older version gave warnings in previous tries..

npm: https://docs.npmjs.com/getting-started/installing-node
This tells me how to update npm after installing node.js: sudo npm install npm -g
After this I have npm 3.3.3 installad

under wp-content/themes/ clone FoundationPress with
git clone https://github.com/olefredrik/FoundationPress.git
the line as mentioned in the readme.md doesn't seem to work due to the lack of credentials or smt.

For now I leave the name as is as I just want things to work..

cd FoundationPress
npm install

as mentioned in the README.md
And there the issues start:

--->8---
npm WARN prefer global pangyp@2.3.2 should be installed with -g
npm WARN lifecycle foundationpress@1.4.0~postinstall: cannot run in wd %s %s (wd=%s) foundationpress@1.4.0 bower install && grunt build /var/www/wordpress/wp-content/themes/FoundationPress
--->8---

and according to the html source of the frontpage there should now be a http://192.168.1.165/wp-content/themes/FoundationPress-master/assets/stylesheets/foundation.css
But.. no stylesheets directory nor content..

So are my expectations wrong, did I miss something? While I understand that this is not an issue perse (although the docu seems to be a bit lacking for sass beginners) I couldn't really find an other place to discuss FoundationPress.

[olefredrik]

Hi @jondor ,

I just wrote a blog post called FoundationPress for beginners. Check it out here:
https://foundationpress.olefredrik.com/posts/tutorials/foundationpress-for-beginners

I have just updated the repository (about an hour ago) with support for the most recent version of Node.js. So if you clone a fresh version of the repository and head over to nodejs.org and install version 4.1.1, you should be good to go.

[jondor]

Thank you, but no.. it still doesn't work.

I created a clean new virtual machine with ubuntu server 14.04. Installed apache, mysql, php and wordpress and have a working environment.
Installed node.js (4.1.1), upgraded npm globaly to 3.3.3, installed sass (3.2.12) and git of course..
Bower is also available systemwide with version 1.5.3
Added FoundationPress to the themes folder using git clone https://github.com/olefredrik/FoundationPress.git
cd FoundationPress, npm install.. as written in the readme.

As I don't really have a clue what the result should be I activated FoundationPress as theme and checked the homepage. No CSS, but according to the header there should be an assets/stylesheets/foundation.css which isn't there.
I assume this should be created among thing using the npm install. But nope.

npm install seems to run fine with two warnings:
npm WARN prefer global node-gyp@3.0.3 should be installed with -g
and
npm WARN lifecycle foundationpress@1.5.0~postinstall: cannot run in wd %s %s (wd=%s) foundationpress@1.5.0 bower install && grunt build /var/www/wordpress/wp-content/themes/FoundationPress

My gut says the later should be the problem, but really no clue why. After that it's the dependency tree.
node_modules is nice and full, no error logs in the FoundationPress folder, but also no assets/stylesheets nor a foundation.css
For what it's worth, bower, grunt and node-sass are all in the node_modules folder.

Afaik I've followed the readme (more than once I might add..;) and even installed ruby-sass in case of.

Any tips or tricks are appreciated as I'm new to this environment. I'm learning a lot from all this, but still no working FoundationPress..

Thanks!

[olefredrik]

Hi @jondor ,

Looks like we're almost there. The reason why your assets folder does not contain the stylesheets and scripts, is because this is generated last in the npm install process (postinstall).

I'm a little unsure why this happens. Possibly it has to do with permissions related to your Node/npm installation?

What you could do, is to install Grunt (if you haven't already done that) http://gruntjs.com/installing-grunt and remove the postinstall script from your package.json file.

Your new package.json file should now look like this:

{
 "name": "foundationpress",
 "title": "FoundationPress",
 "version": "1.5.0",
 "description": "FoundationPress is a WordPress starter theme based on Foundation 5 by Zurb",
 "keywords": [
   "FoundationPress",
   "WordPress",
   "starter theme",
   "Foundation",
   "semantic",
   "mobile first",
   "customizable",
   "responsive"
 ],
 "homepage": "http://foundationpress.olefredrik.com/",
 "bugs": "https://github.com/olefredrik/FoundationPress/issues",
 "license": "MIT",
 "main": "Gruntfile.js",
 "repository": {
   "type": "git",
   "url": "https://github.com/olefredrik/FoundationPress.git"
 },
 "devDependencies": {
   "bower": "~1.4.1",
   "grunt": "~0.4.5",
   "grunt-cli": "^0.1.13",
   "grunt-contrib-compress": "~0.13.0",
   "grunt-contrib-concat": "~0.3.0",
   "grunt-contrib-copy": "~0.4.1",
   "grunt-contrib-uglify": "~0.2.7",
   "grunt-contrib-watch": "~0.5.3",
   "grunt-sass": "~1.1.0-beta",
   "grunt-string-replace": "~0.2.7",
   "node-sass": "~3.3.0",
   "time-grunt": "~1.1.0"
 }
}

Then run npm install && bower install && grunt build

[jondor]

Thanks.. I managed to get a stylesheet and an answer on what went wrong.. It was, of course, my own stupidity. As this is a virtual test environment which will never see any other user but me I made my life easy (I thought) and logged in as root..
Bower doesn't like that.. For now I used the --allow-root to deal with this, but it's clear that I have to restart once more using a more professional approach to installing my "play" environment..

For now thanks for the top-notch service and help!

[olefredrik]

Yay, I'm glad you figured it out! If everything is now as it should, feel free to close the issue :)