1

This feels like a question a person shouldn't have to ask, but I've been searching for the past 3 hours how to do this and I can't figure it out.

Here is what I'm trying to do:

1) fork a library from a GitHub repo, let's call it vue-widget

2) I need to get the files on my local machine somehow, most documentation says to do git clone https://www.github.com/username/vue-widget.git

My problems immediately begin around here because I don't know how to load the library into my project. I am trying to do:

import Widget from '@username/vue-widget';

The part that is making me quite frustrated is that all the help documentation I can find is written as if I am doing a 1 character change and then submitting a pull request, but I am doing a potentially extensive modification, so I need to run the modified feature branch in my application. I can't find how to do that.

I found some documentation from NPM that indicates I might be able to use scoped packages, but I can't figure out if that's required. Do I really need to fork a project and then publish it under my own name on NPM? or is there a faster, easier way?

I also understand I may be able to include a hash in the import, like:

import Widget from '@username/vue-widget#ose847vg6seo5489ve4e45n';

I am super lost about how to import Widget from a feature branch in my forked repo. I want to know what the most common and idiomatic way of doing this is.

My expectation is that there is a way I can clone my forked repo, create a feature branch, load that into my application, modify it, and then submit a pull request when it is ready.

[edit]: My problem was that the library I was forking had the /dist folder in the .gitignore file, so my installation was not able to initialize properly due to those files not being built.

The solution is to remove /dist from the .gitignore file, then run:

npm run build
git add .
git commit -m "removed /dist from gitignore"
git push origin featureA

Then after that, back in the project you are trying to get the forked library into, do the solution that Max showed. In my case, I added this to my package.json file and then ran npm install:

"vue-widget": "username/vue-widget#featureA"

Here are some useful links that took me a while to uncover:

How to install a private NPM module without my own registry?

npm install private github repositories by dependency in package.json

https://docs.npmjs.com/files/package.json#git-urls-as-dependencies

This is the one that actually solved it for me:

npm install and build of forked github repo

Be sure to read the comments below as there are a couple nice URLs about npm link that can be situationally useful.

agm1984
  • 15,500
  • 6
  • 89
  • 113
  • Do you want to use the package's branch in your project in production or do you just want to work with the branch locally? – Max Baldwin Sep 04 '18 at 19:21
  • not in production, but I imagine that would require a public NPM scoped solution. I want to know where I should clone the repo to, and then how to import it in so that it imports my feature branch. – agm1984 Sep 04 '18 at 19:22
  • 1
    So you can install branches of packages. It is explained in the link at the end here. Or I can explain what `npm link` is. Look and let me know: https://stackoverflow.com/questions/39732397/install-specific-branch-from-github-using-npm – Max Baldwin Sep 04 '18 at 19:24
  • 1
    https://docs.npmjs.com/cli/link – Max Baldwin Sep 04 '18 at 19:25
  • Thanks, that is a helpful set of links. I tried that earlier and it throws `Module not found: Error: Can't resolve 'vue-widget'` after I do `npm run watch` to run the project. It added this to the package.json: `"vue-widget": "github:username/vue-widget#featureA"`. – agm1984 Sep 04 '18 at 19:35
  • So it's some kind of namespace issue or something. My forked repo isn't published on NPM. I don't know if that's related. I have to read more about linking. That may be the trick. – agm1984 Sep 04 '18 at 19:37
  • ok so if you just want to work with a forked repo locally, I can outline that for you. – Max Baldwin Sep 04 '18 at 19:45

1 Answers1

2

If you can install from a forked repo, you can do that following below

npm install --save git+https://git@github.com/[username]/[package name].git

If you need to link a module locally you can do the following. Use npm link. The docs are here.

  1. Go into the project you are working on locally and npm i --save the module you want to use from the npm registry.
  2. Now, locally, clone the forked repo you want. Don't forget to npm i that module's dependencies.
  3. In that forked directory run npm link. This should take those forked files and link them to the local reference. Any time you have a change or switch branches in this local module you want to see in another local project, you have to run npm link.
  4. Now go to the project you are working on locally and run npm link [module you forked and cloned locally]
  5. Restart your project and you should see the changes.

npm link can be a little finicky, but when you run step 4, you should see the file path to your locally link files.

Max Baldwin
  • 3,404
  • 3
  • 26
  • 40
  • With that and after doing `link`, it shows `Module not found: Error: Can't resolve 'vue-widget'`. It seems to have a hard time when the dependency name is the same as the regular package from the maintainers. It didn't put anything in my node_modules folder after running that npm install. – agm1984 Sep 04 '18 at 20:08
  • @agm1984 You don't have to do link since you are sourcing the modules from github. You might be messing up with namespace by linking – Max Baldwin Sep 04 '18 at 20:18
  • I just typed `npm link` trying to get a list of links, naive attempt, and what it actually did was add `vue-widget` into my node_modules folder, but same error output. – agm1984 Sep 04 '18 at 20:22
  • I don't understand how it could be so brutally difficult to load a forked version. There must be something fandamental I am missing. Is this wrong? `import Widget from 'vue-widget';`Is there any way I can just tell it to forget NPM and do like `import Widget from '../vue-widget'`. That way the project wouldn't have to care what branch it's loading. It would just load whatever branch is currently selected. – agm1984 Sep 04 '18 at 20:26
  • The problem to me with an idea like that is the package would be outside the root of the project, which is usually a bad idea, and if it was inside the project, it will wreak havoc on my local git file management – agm1984 Sep 04 '18 at 20:27
  • My desired steps are simple: 1) fork a library, 2) clone it locally, 3) checkout a new branch, 4) edit some file to cause a visible change, 5) import that into my project, 6) run the project, 7) observe the changed file. That is proving very difficult and complex. – agm1984 Sep 04 '18 at 20:29
  • Max, can I clone the forked repo into my node_modules folder? I found a tutorial by Kent Dodds on egghead.io that shows something like that and then doing `npm install`. That looks like something that might work – agm1984 Sep 04 '18 at 20:44
  • 1
    @agm1984. You have to be able to install the module into your project because when your project is running and you call `import` or `require` your app is going to look into your node modules for that module. Locally, you can `npm link` to tell your app to look at local files rather than what is in your node modules, but you still need that reference in your package json – Max Baldwin Sep 04 '18 at 20:47
  • Thanks for your help Max. It turns out that the library I am forking had `/dist` folder in the .gitignore file, so no matter how I pulled the fork in, it wasn't working. It wasn't able to resolve the package because it wasn't installed correctly. I recall it's a common issue, but it took a while to figure out. Your answer is definitely correct overall. – agm1984 Sep 04 '18 at 23:19