Better structure to get rid of the node_modules and bower_components bulk

Im currently developing multiple sites locally using mamp and sage. I work from multiple machines, so keep everything in and work from a dropbox folder… Im wondering if there is a better structure I can use so that I only need the node_modules and bower_components directories once on my local machine.

Im sure I could be going about this a different way, but Im not sure where to start…

You should use Git repositories for each site/project (or BitBucket since it has free repos) instead of dropbox or any alternative. I had some problems and lost all the changes i didn’t commit (there were quite a few) because of dropbox and that was a pain. Mixing them isn’t the best thing to do.

Also having node_modules made Dropbox stop working! I couldn’t sync anymore as it froze etc. So never have Git repositories inside Dropbox or any cloud drive! :smile:

As for those 2 folder, you should ignore them it’s ok for them to be in each theme etc. it should be that way :slight_smile: But if you won’t have them in dropbox you shouldn’t have problems and in Git repos, they are ignored so it keeps everything clean for production etc.

2 Likes

Thanks @darjanpanic I am going to look into BitBucket (once its back up)…
Ive not used Git before so it’ll be good to see how it all works.

Im thinking starting my next site with the Bedrock structure, that should help too?

I understand your concerns and I know it sometimes gives syncing problems, but I have been using Dropbox on nearly all of my projects for a few years now with my theme folder as Git repository with hardly any problems, so it is possible.

1 Like

@Twansparant Interesting… Can you give me a better insight into what your structure is like? Do you use the Bedrock boilerplate at all, and if so how do you benefit from it.

Do you encounter issues or even find it frustrating to have to syncing the thousands of files inside the node_modules and bower_components directories each time you start or edit a project?

Sorry for all the questions, I’m really keen on changing how I do things, but at the same time a little anxious of the change.

There’s no need for Dropbox - syncing node_modules would be crazy (imho).

Learn git - it’s an absolute must know. Sign up for a free BitBucket account (free private repositories) and get a git client with a gui like Tower or SourceTree to learn with.

SourceTree is free, it’s made by Alsatian, the same folks who make run BitBucket. Tower costs $$, but it’s affordable and in my experience is a bit prettier and friendlier to learn with. They also have a nice set of tutorials, which is just a nice thing to do for people.

To start using git you only need to learn 4 concepts - commit, merge, push/pull, and branch.

Before you know it you’ll be using git from the command line because it’s so much faster, you’ll be telling the lady at the sandwich shop how zsh is better than bash, you’ll roll your eyes at people who prefer guis for anything, and you’ll hate seeing anything but text on your screen. I’m being silly.

Seriously, though, just think of it as a fancy version of save-as. When you’re finished working at home at like 4am you just push your changes to bitbucket, then when you get to work at 8am you just fire up your rig and pull your changes.

Presto, everything in sync, you have a complete history of your project, nothing ever gets lost, and now you know version control.

Seriously, just jump in and learn it. Using Roots tools and not knowing how to use version control is sort of like owning a Bugatti but not knowing how to drive a stick.

Those be my advices, best of luck to ya! :wink:

1 Like

Sure, I have a main folder Work in my Dropbox root with a subdirectory Websites where all my (Bedrock) projects live. I install Bedrock & Sage and all it’s npm modules and bower components just like normal in a project directory and everything starts syncing through dropbox (can take a while first time).

Not until recently, the main benefit in my opinion is the separation of the wp and app files in your folder structure.

As a matter of fact, I did:


But this is only happening since Sage version 8, before that only your own custom added modules were in the node_modules folder, so that wasn’t a big deal. It’s not really frustrating, but you just have to give it a bit of time to sync. Once your dropbox is all up-to-date and leave one workspot and continue working on a different spot, let it sync for a while until it’s done before you continue working in that particular Bedrock folder.

This doesn’t mean I don’t know how Git works, as an addition I also push all my commits at the end of the day to my Github repository. I just like to have ALL my files synced everywhere, not just my Git repositories.

1 Like

node_module is a huge folder with a lot of folders/files (40.000!!!) in it. I had 10 + websites so that didn’t help with it. To fix i had to delete almost every single folder inside node_modules in each project in dropbox online to “fix” everything. Dropbox displayed an error if i just wanted to delete the whole node_modules folder in one go.

Dropbox isn’t made for this kind of things/workflows to be 100% realiable (even git gui has a notice when you clone a repo to dropbox). But if you would be able to ignore those folders and not sync them, that would be ok. The problem is that git and dropbox sync to same folder and if you don’t commit changes it can happen that dropbox will sync the old ones etc. I lost uncommented changes couple of times because of that, not fun at all.

I’m not saying don’t do it though, just be careful as you don’t want that “told you so” moment when it happens :smile:

You can always rebuild them if needed as you shouldn’t need to do any work inside them really.

@williamhibberd You can do this nice course (free) to learn a bit about git - https://www.codeschool.com/courses/try-git

That’s not really true. Ever since Roots/Sage has used Grunt, running npm install would install all dependencies to the project folder’s node_modules. The only thing you really install globally is grunt/gulp. This isn’t specific to Sage, it’s how node/npm packages work.

Hmm, then I must have done something wrong in my previous projects, because in all my older projects I only have the following modules in my theme’s node_modules:

grunt
grunt-contrib-clean
grunt-contrib-jshint
grunt-contrib-less
grunt-contrib-uglify
grunt-contrib-watch
grunt-wp-version

And any other modules I installed myself?
And everything worked without errors?

And all those have their own dependencies in the node_modules folders in each. The Roots Gruntfile had less direct dependencies: https://github.com/roots/sage/blob/7.0.3/package.json#L26-L37, but there are still a whole lot of dependencies installed for each of those.

So yes, the new gulpfile has more direct dependencies: https://github.com/roots/sage/blob/master/package.json#L30-L56, if that’s what you mean…

Ah I see, didn’t know there were more node_modules dependencies inside each node folder!