We Keep Coding

Prevent vue cli from deleting all files in dist

I am developing vue project and syncing dist folder with git. This worked well while using webpack. However, I have moved to #vue/cli --- using vue create myProject instead of vue init webpack myProj.
The issue is that every time i run npm run build, it deletes dist folder and recreates it -- all .git and other files gone.
How do I prevent new build from deleting required files in dist folder and only update the changes?

Assuming you have your own mechanism for cleaning up the old resources, vue-cli-service build comes with this option called --no-clean to instruct the compiler not to remove the "dist" directory before building the project.
So, add the switch/option to the build script on package.json:
{
"scripts": {
"build": "vue-cli-service build --no-clean"
}
}
Alternatively, if you use Yarn, you can pass additional argument(s) right after the script name. So there's no need to make any change to the script. To run it:
yarn build --no-clean

Thanks to answer by Yom S. the documentation here does provide way to keep older dist.
However, the you can't use --no-clean like npm build --no-clean. To use no clean mode from terminal you need to write following command instead
./node_modules/.bin/vue-cli-service --no-clean
Update
Instead you can also add --no-clean in package.json

The react-scripts package provided by Create React App requires a dependency:

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.
The react-scripts package provided by Create React App requires a dependency:
"babel-eslint": "9.0.0"
Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-eslint was detected higher up in the tree:

create .env file in your project file and add the following statement
SKIP_PREFLIGHT_CHECK=true
Save the file
Remove node_modules, yarn.lock, package.lock
Then reinstall node_modules with
npm install
This should work

I had the same problem and do all the suggested steps but the problem still, so, my error is that i have a reactApp inside other Javascript App i had this structure.
--MyProjects
----NodeJsApp
----node_modules of NodeJsApp
----package.json of NodeJsApp
----ReactApp
------node_modules of ReactApp
------package.json of ReactApp
The problem solved to me deleting my ReactApp node_modules directory, then i do a reestructure of my directories because i have a disaster.
--MyProjects
----NewDirectory (inside all about NodeJsApp)
------node_modules of NodeJsApp
------package.json of NodeJsApp
----ReactApp
------package.json of ReactApp
After that i do :
npm install
and then npm start and my problem has fixed, i think that the problem is that the parent directory cant have a javascript /nodeJs/ project or something that have node_modules .

Part of the output you provided says:
Check if C:\Users\chawki\node_modules\babel-eslint is outside your project directory. For example, you might have accidentally installed something in your home folder.
Browse to C:\Users\chawki\node_modules\ and delete the babel-eslint folder, or simply delete C:\Users\chawki\node_modules.

I just deleted the node_modules folder (for me it was C:\user\[yourUserName]\node_modules\) and re-installed it.

Here What i did...
C:\user\[yourUserName]\node_modules\babel-eslint and delete the file
C:\user\[yourUserName]\node_modules\eslint and delete the file

Delete your eslint and babel-eslint file from your node modules on your computer e.g. -C:\Users\vishnu\node_modules -delete eslint and babel-eslint file.
In your project:
yarn remove eslint
yarn add --dev eslint#6.1.0
yarn remove babel-eslint
yarn add --dev babel-eslint#10.0.3

If you dont want to create .env file there is another alternative you can pass the SKIP_PREFLIGHT_CHECK=true directly in the script.
For Example
"start": "SKIP_PREFLIGHT_CHECK=true react-scripts start",

in package.json
resolutions:{
"babel-eslint": "9.0.0"
}
if you reinstall your all dependencies, you will be forcing "babel-eslint" to be version "9.0.0". if you start your app, you will have no issue.

My problem was I installed webpack as a global package... after i deleted webpact and run npm install, the problem was gone

Make sure you don't have a global webpack package or somewhere higher up the directory structure.
In my case, I had it globally installed. Deleting and then running npm install and then npm start worked perfectly.

Run npm ls babel-eslint and see which dependencies are using it or installing another version. Try updating those libraries.
It worked for me.

Linking local library into Angular 5 Project

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

npm install from a git repo leaves a pretty blank package?

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.

Cloning an app from github -- missing module depencines. How to install all at once?

I am cloning clementine.js from github at this URL:
https://github.com/johnstonbl01/clementinejs-fcc.git
However, when I try to run it by cd'ing into the folder with "server.js" and typing "node server.js" I get an error saying that the 'mongoose' module hasn't been installed. Looking at the package.json file, it looks like many of the modules in clementine.js are ones I haven't installed before. Is there a way to use command line node to just install anything in the package.json file that I haven't install yet?
Thanks!

Yes, you use npm install from the directory containing the package.json file. This is one of the great things about package managers: You just list the dependencies without having to have them actually checked into the project's repository (which is good, as there are sometimes thousands upon thousands of files involved).