What is the workflow for moving a local dev site to a new computer?

[andreaarcher]

Hello,
I'm hoping I can access the collective brain power of this group to clarify this:

I want to move my local dev site to a new computer:
I have MAMP stacks on both machines with wordpress installs. Do I:

set up a fresh build of FoundationPress on my new machine via the command line and then copy over (overwrite) the entire directory of my new build with the old FoundationPress theme (including the massive node_modules dir)?

would this work? is there a better workflow?

Both machines are macs running El Capitan

Thanks in advance

Andi

[swthate]

Hi there,

I just recently went through this myself a few months ago when I switched from my iMac to a MBP.

What I ended up doing, after I had a running WordPress installation on my new computer, was copy over my theme directory SANS node_modules and bower_components. Then run npm install like you normally would with a new FoundationPress project, and you're good to go. This was also mentioned in issue #797

Alternatively, if you're using Git and your remote is all up to date, you could just clone your repo into your themes directory, which will be cloned in its own brand new theme folder.

[andreaarcher]

thanks, I'll give it a try and let you know how it goes!!!!

[andreaarcher]

btw, I have node_modules removed, but I can't find bower_components, can you point me in the right direction? I see a few hidden files with "bower" in the file name and "bower.json" in the root. did you mean to write node_modules OR bower_components? excuse my Noob question...

[andreaarcher]

I have a dir called "FoundationPress/assets/components" that seems to be similar to bower_components -- it has "fontawesome", "foundation_sites", "jquery", "motion-ui" and "what-input" in it. Is that the one I should delete?

thanks in advance

[swthate]

Yes, that would be your bower components.

It might be named different or in a slightly different location depending on if you have a more recent or older version of FP. I think I'm just used to calling it bower_components because of working with older versions of FP and Foundation.

[andreaarcher]

thanks for clarifying!

[andreaarcher]

ok, that didn't work, here is the npm-debug.log

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'watch' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prewatch', 'watch', 'postwatch' ]
5 info prewatch [email protected]
6 info watch [email protected]
7 verbose unsafe-perm in lifecycle true
8 info [email protected] Failed to exec watch script
9 verbose stack Error: [email protected] watch: gulp
9 verbose stack Exit status 1
9 verbose stack at EventEmitter. (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:214:16)
9 verbose stack at emitTwo (events.js:87:13)
9 verbose stack at EventEmitter.emit (events.js:172:7)
9 verbose stack at ChildProcess. (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:24:14)
9 verbose stack at emitTwo (events.js:87:13)
9 verbose stack at ChildProcess.emit (events.js:172:7)
9 verbose stack at maybeClose (internal/child_process.js:821:16)
9 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
10 verbose pkgid [email protected]
11 verbose cwd /Applications/MAMP/htdocs/wp-content/themes/FoundationPress
12 error Darwin 14.5.0
13 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "watch"
14 error node v4.2.6
15 error npm v2.14.12
16 error code ELIFECYCLE
17 error [email protected] watch: gulp
17 error Exit status 1
18 error Failed at the [email protected] watch script 'gulp'.
18 error This is most likely a problem with the foundationpress package,
18 error not with npm itself.
18 error Tell the author that this fails on your system:
18 error gulp
18 error You can get their info via:
18 error npm owner ls foundationpress
18 error There is likely additional logging output above.
19 verbose exit [ 1, true ]

[swthate]

I had basically the same error when I was trying to move to a new computer as well, check out issue #773. Does deleting node_modules again and re-running npm install do anything?

[andreaarcher]

I've done it the hard way, I did a clean install and moved all my old files EXCEPT node_modules and assets/components and that seems to have done the trick, everything seems to be working, but I see some subtle changes in styles, I think maybe foundation has changed since my original build, that would be in assets/components I guess. I'm thinking that the potential to destroy my old site is too great. I can't develop too much longer on my old machine. I wish these dev repos were more portable.... blahhh

[andreaarcher]

I tried installing a new version of foundationPress in my themes folder, deleting it and then replacing it with the original theme from my old machine, the code wouldn't complile. (kept getting errors that sass couldn't work with the new foundation.css,etc...) Is there a quick way to get the new install of npm to work with my old code?

btw, my old machine was running
node v4.2.6/ npm v 2.14.12

and my new machine is running
node v4.4.4/ npm v 2.15.1

could that be the issue?

[swthate]

That difference in versions could possibly be contributing to your problems. Have you ever used Node Version Manager? With that you can manage a number of different Node versions. I remember having to switch back and forth when I'd work on various projects at the same time.

[colin-marshall]

@andreaarcher what version of Foundation was installed in your old computer? You can find this in assets/components/foundation-sites/bower.json.

Additionally, when you moved the project to the new computer (omitting node_modules and assets/components) and you ran npm install, what was the version in assets/components/foundation-sites/bower.json? I suspect that the reason you saw a style difference is because it installed a new bower package of foundation-sites and the rest of your project wasn't updated to match.

I haven't had to do this before, but this is the process I would suggest:

1. Backup entire project somewhere safe
2. Copy all files from project to the new computer, except for the node_modules directory.
3. In package.json remove bower install from the "postinstall" script so it is now: "postinstall": "gulp build"
4. npm install
5. npm run start

This keeps all of your bower packages in assets/components at the same version, while getting the appropriate node_modules for the node installation on your new computer. Removing bower install from the "postinstall" script prevents bower from updating the components when you install the npm modules. This should make it build the same on the new computer as it did on the old.

And as previously mentioned, using a Node version manager will make your life a lot easier in times like these.

[andreaarcher]

looks like the old site was built on 6.1.2 and the fresh install on my machine is running 6.2.1. I'll try this new approach, THANKS!!!
just to clarify, if I follow this workflow do I still need to be running the same versions of npm and node.js as my original machine or will that not be necessary?

[andreaarcher]

I just did what @colin-marshall suggested and everything went perfectly!!

So to summarize for my future self, other team members or anyone else who can benefit:

In order to move a local repo from one machine to another (or replicate it for another team member) and keep everything the same, do the following:

1. find out what version of node.js and npm you are using on the original machine and make sure they are installed on your new machine and available in the shell (use node version manager to do this).
2. Copy the old repo sans the node_modules dir, move to the new location on your new machine
3. If the theme is named "FoundationPress" I like to rename it at this point to make sure I can do fresh installs in the same theme directory.
4. In package.json (in root) remove "bower install" from the "postinstall" script so it is now: "postinstall": "gulp build"
   npm install
   npm run start
   npm run watch
5. open your site and go!

thanks to @swthate and @colin-marshall and the rest for all the great input!!!

now I'm going to back up the live remote site and then start pushing my new code live, wish me luck!

[jdfweb]

@andreaarcher that's awesome news!

Quick question though - what about dragging the database over to a new machine? It's great that we have the theme itself, but the db would be great too.

[andreaarcher]

I use backup and transfer plugins for that-- I like wp-clone
-too many moving parts for me to attempt to do manually

[colin-marshall]

@andreaarcher glad we got you up and running!

A pretty sweet command line solution I found for syncing WP is Wordmove. You can sync any combination of plugins, themes, uploads, db, and/or wordpress core. It goes super fast over SSH and you can have multiple environments (staging, production, etc.). It was a little confusing/intimidating at first but it's pretty awesome once you get the hang of it.