I am using working from this github issue and it says to use a temporary github fork until a pull request is merged in another repo....cool.
I try to add the github fork to my project dependencies by doing this...
"reactstrap": "git+https://github.com/jameswomack/reactstrap.git",
in the package.json file and when I do a npm install everything goes according to plan, but then I get failures with my project not being able to find reactstrap...
When I go to inspect my node_modules I can see that the reactrap directory is pretty empty with only the LICENSE, README and package.json files...
What am I missing here?
The package.json file of the repository contains these lines:
"files": [
"LICENSE",
"README.md",
"CHANGELOG.md",
"lib",
"dist"
]
This is the list of files and directories to include in the npm package. As you can see, the actual JavaScript files will be located in the lib and dist directories.
The problem is that these directories are not checked into the Git repository, but created by a build, when you run npm run build.
A workaround that I would try: run the build, commit and push the generated files to your fork on GitHub. After that, installing the dependency the way you do it should give you the desired result.
However, if your goal is simply to test if your changes on a local fork of reactstrap work by including it as a dependency of a demo project, there is a better way: use npm link.
It works like this:
in the root of your local clone of your reactstrap fork, execute the command npm link
in the root of your demo project that uses reactstrap as dependency, execute the command npm link reactstrap
Any changes you then do to your reactstrap fork will be available in your demo project immediately.
Related
My professor wants us to submit our project for our node.js app but we are not allowed to include node_modules in the submission.
When I try to run the app without the folder in there, it crashes due to missing dependencies.
Am i missing a step?
Presumably either
you're not supposed to use third-party dependencies in your solution (just the core Node.js modules), or
you're not supposed to include node_modules in your submission (which is good practice anyway), but instead just have a package.json (and possibly a lockfile) so your instructor can npm i / yarn to install the packages.
When building an app that has node_modules you aren't supposed to include this anyway.
Install any node_modules that are required for your application to run and when sibmitting just leave out the node_modules folder.
Your package file will include everything that your instructor can check over or install on their end if necessary.
I found this random example on github: https://github.com/hayanisaid/nextjs-intro-example
As you can see by looking they have there package files but no node_modules, when you clone this repo you would run npm install which would create and install the packages
package.json contains information about node modeuless.
If u deleted node modules, you just have to run npm i --save.
All the dependency will be downloaded through this.
Just use npm/yarn install if you remove the folder.
My problem is that when I try to install a package of mine with the version set to a certain git branch my build is breaking because the repository doesn't house the dist folder which my npm package does.
Here is how I want to install the package.
#me/myPkg": "github:me/myPkg#myBranch
So should my repository include the dist folder or what's the best practice in this case? I don't want to publish my dist package onto github because then I would have weird merge conflicts because the dist folder is containg all of my type declaration and minified javascript files, but maybe this the preferred way?
Another thought I had was to have a postinstall script in my package.json which built the source files but then I would have to have the devDependencies installed as well and npm install doesn't install them for dependencies.
How are you publishing your package? For instance, I have a GitHub Actions setup on my repositories that, when commits are made to master, will automatically perform several steps
Run an npm install Setup Git Credential variables (for later
process)
Run npm test (and fail whole process if tests fail)
Run
npm run release (I use standard-version for auto version
incrementing and Changelog creation, and do this prior to build so
the version can be reflected in the built code)
Run npm run build
Run npm run publish to push to npm
Commit my version update as a
tag to Git
My GitHub Action does all of this in a temp container it spins up for the build process. Once it is done, the whole container is tossed. I use an .npmignore file to tell publish what I don't want in the final package (note files, build tools, etc).
I got a big project that is a monorepo consisting of multiple scripts and libraries, its structure is the following:
package.json // "private":true
\packages
\comp1
\package.json // an actual component
\comp2
\package.json // an actual component
\comp3
\package.json // an actual component
I've made a monorepo.tgz using yarn pack.
Then I made a test app whose package.json look like this:
"scripts": {
// this is a script in one of the monorepo's components
"start": "ui-build --bundle --watch -p 3000"
}
"dependencies": {
"comp1": "../monorepo/monorepo.tgz",
"comp2": "../monorepo/monorepo.tgz",
"comp3": "../monorepo/monorepo.tgz",
...
but its not working, when I run start its complaining that ui-build: command not found.
How can I test this monorepo locally to simulate a published npm package as closely as possible?
Using npm link (or yarn link), you can 'install' the packages from your local development environment.
To do this, you first run npm link in the directory of the package you want to install, so in \packages\comp1. Then in your testapp, run npm link comp1. This will install your package. Repeat for any others you want to install.
More info:
https://docs.npmjs.com/cli/v6/commands/npm-link
https://classic.yarnpkg.com/en/docs/cli/link/
To import a file directly without using npm link or yarn link you have to prepend the path with file:. And I believe you would have to pack each file, but you can link directly to the path without packing it as well. Make sure to build it if you are linking directly to the local package folder.
For your example:
"comp1": "file:../monorepo/comp1.tgz",
"comp2": "file:../monorepo/comp2.tgz",
"comp3": "file:../monorepo/comp3.tgz",
or
"comp1": "file:../path/to/monorepo/packages/comp1",
"comp2": "file:../path/to/monorepo/packages/comp2",
"comp3": "file:../path/to/monorepo/packages/comp3",
After some research I've found that https://verdaccio.org/ is the best tool to test a library without deploying to an npm repository
What i want is to have a library locally that when i change it those changes are reflected in the project that is using the library.
i have check out this library here in my local machine: https://github.com/manfredsteyer/angular-oauth2-oidc
So what i'm doing right now, is that i go to the library directory and then
npm link
And then get in my project directory and do
npm link angular-oauth2-oidc
The library folder appears inside my node_modules folder but i can't manage to use it, since when i start the app ng serve it says:
Cannot find module 'angular-oauth2-oidc'
I'm importing like this:
import { OAuthModule } from 'angular-oauth2-oidc';
I've tried to add the the path under the compilerOptions of the tsconfig.json file but haven't been sucessful.
Any ideas on what i'm missing here? I've tried several suggestions i've found on angular github issues but none solved my problem.
Thanks in advance
npm link in a package folder will create a symlink in the global folder {prefix}/lib/node_modules/ that links to the package where the npm link command was executed
Dont use npm link to add a library to your project, use npm install :
npm install angular-oauth2-oidc --save
You have to install it not just link it, so use this line to with flag --save to ensure that it will be saved in your package.json
npm install [package_name] --save
You can get the package name from the source website or from
https://www.npmjs.com/package/angular2
When you say:
So what i'm doing right now, is that i go to the library directory and
then npm link
Do you mean you are executing npm link in the folder you cloned the repository in? Because if so, that's likely your issue as that's the source directory and not what's actually published as a package. You must build the library, change directory into the distribution folder for the package, and then run npm link. Then when you run builds of that library, any Angular applications with that linked will automatically have the last version of your build in their node_modules.
Also, in your Angular applications where you are using the linked library you'll want to make sure you are setting preserveSymlinks to true in your angular.json.
While you can create multiple projects (e.g. an Angular app and an Angular library) under one Angular project to make this process a bit easier, I prefer to separating these two since I like one git repository to present one module.
First, you need to link your modules to your project's package.json file. Here's how to link files locally in general:
Local dependency in package.json
Linking a plain Typescript library is pretty straight forward as you just create an entry point (usually index.ts) file and export everything you want from there. This file needs to be in the same folder as the package.json file in your project.
An Angular library is a bit different as angular modules needs to be compiled before it can be properly exported. If you just import the module to your project without compiling you will get an error stating this: cannot read property 'ɵmod'. This happens at least at the time of writing this.
So we need to compile the library and then link it:
open two terminal windows
in the first terminal, go to your Angular library's root folder and run ng build --watch
check the output folder of the compiled module, usually something like dist/[library name]
change your Angular project's package.json to point to the output folder e.g. "my-angular-library": "file:../my-angular-library/dist/my-angular-library"
run npm install in the same folder
Add path to your Angular project's tsconfig.json e.g:
compilerOptions: {
"paths": {
"my-angular-library": ["./node_modules/my-angular-library"]
}
}
Otherwise you'll get errors like Error: Symbol MyComponent declared in /path/to/library/my.component.d.ts is not exported from my-angular-library
in the second terminal, go to your Angular project's root folder and run ng serve. Make sure you serve the project only after you have installed the local dependency.
You should now be able to use components, services etc. exported via your library module.
TL;DR
for the library ng build --watch
make the library dependency to point to the output folder e.g. "my-angular-library": "file:../my-angular-library/dist/my-angular-library"
npm i
Add path to your Angular project's tsconfig.json e.g:
compilerOptions: {
"paths": {
"my-angular-library": ["./node_modules/my-angular-library"]
}
}
ng serve
I have a package (package-a) that depends on another package (package-b) which is not published to npm but is on my file system. When I run npm install from package-a, package-b's dependencies are not installed. I have to navigate to package-b's directory and run npm install manually. Is there a way to install both packages' dependencies with a single npm command?
Here's my directory structure:
/
...
shared/
...
javascript/
...
package-b/
package.json
package-a/
package.json
Per the docs, I placed the following in package-a/package.json. (I'm using npm 5+)
dependencies: {
package-b: "file:../shared/javascript/package-b",
}
When I navigate to /package-a and run npm install, it installs all of package-a's dependencies like normal and also copies the package-b directory to package-a/node_modules. This is presumably what lets me type require('package-b') instead of require('../shared/javascript/package-b') .
However, as I stated before, package-bs dependencies are not installed, so if I try to use package-a, I get an error when package-b is required because it is trying to use dependencies that do not exist locally.
Once again, to solve this, I can navigate to package-b and run npm-install, but I'm hoping there's a better solution as I may have many such sub packages and I'd like to avoid having to write a shell script to go install all my dependencies if I can do this with an npm command. (perhaps I just did something wrong and npm install should be working?)
Follow up question: when I run npm install from package-b's directory, the packages are installed there, but not in the version of package-b that got copied to /package-a/node_modules during the first npm install, yet everything still works. So now it seems like when I require('package-b') it is actually resolving to /shared/javascript/package-b and NOT /package-a/node_modules/package-b. So what's the point of copying the file in the first place?
Update
It turns out this is a bug in npm 5. It only occurrs when installing from a package-lock.json file. (Github Issue)
The files are (probably) not being copied, they're being symbolically linked (symlink). This essentially creates an alias/shortcut that looks like a real directory, but points to another path.
This is how the older npm link feature worked. The reason is the code stays "live"; Changes in the linked module are reflected whenever you run the module that's referencing them, meaning you don't have to npm update all the time.