Develop Reference

Cypress - install it on empty project

I am trying to install cypress on an empty project. However, cypress is not installed in the package.js file and cypress is not included on the project. How can I make it work? I cannot install cypress as part of the development project, so i am trying to create a separate test automation project with cypress.

Steps to install cypress:
Step 1: Create your project folder, go inside the folder from the terminal using cd folder_path/folder_name and run npm init. This will create your package.json file inside your project folder. You can do this in a sperate project or create some folder in your development project and do it there as well.
Step 2: Now, Run the command npm install cypress --save-dev. This will add the cypress as a dev dependency inside your package.json file. Once you have successfully installed this, you should see one more file package-lock.json and an folder node_modules being created
Step 3: Run the command node_modules/.bin/cypress open or node_modules/.bin/cypress run to run cypress.

You need to add --save or --save-dev to save it to package.json file. eg: npm install cypress --save. https://docs.npmjs.com/cli/v6/commands/npm-install

Normally you install Cypress into your dev project, but I see you can't do that.
Go to https://www.cypress.io, middle of the page is Download now.
After downloading, unzip to a folder, open bash or cmd prompt in that folder and type Cypress.
You get some warnings about installing into your project being preferred, but it works fine.
There's a To get started... box on the runner. Choose the same folder, and Cypress will set up the testing folder structure
/cypress
/integration
/examples -- lots of sample tests here
/support
/plugins
/fixtures
etc

'vue' is not recognized as an internal or external command

everything was installed correctly. but whenever I try to create project, it says "'vue' is not recognized as an internal or external command". I installed and re-installed but didn't work. npm was also added to environmental variable path.
C:\Users\touha\Desktop>npm list -g --depth=0
C:\Users\touha\.npm-packages
`-- #vue/cli#3.8.2
C:\Users\touha\Desktop>vue ui
'vue' is not recognized as an internal or external command,
operable program or batch file.
C:\Users\touha\Desktop>

Locate vue.cmd and add its location to your PATH
It is added to package manager(npm or yarn) installation. So you may find it at following locations
YARN
C:\Users{YourAccount}\AppData\Local\Yarn\bin
NPM
C:\Users{YourAccount}\AppData\Roaming\npm

just open PowerShell and run: npm install -g #vue/cli

Addition: If setting the path variable and reinstalling #vue/cli does not work, using the node.js command prompt instead might solve the issue.

It seems vue isn't been installed globally for some reasons.
This is the step I followed to solve mine:
Firstly, create your desired project folder (say "Vue Project"). This is where you want to create a vue project.
Then create a "node_modules" folder in the Vue Project folder
Then go to your system npm folder C:\Users{YourAccount}\AppData\Roaming\npm
You will see three different "vue" files. Copy them and paste in the Vue Project Folder you created.
Go back to C:\Users{YourAccount}\AppData\Roaming\npm and enter the node_modules folder. You'll see a "#vue" folder. Copy this, and paste it in the node_modules folder you created in the Vue Project Folder.
You can now head back to the CLI and create your project using "vue create my-vue-project" where my-vue-project is your desired vue project name.

You can try this way it worked for me
go to the location of your yarn or npm mine is C:\Users\TED\AppData\Local\Yarn\bin for Yarn
C:\Users\TED\AppData\Local\Npm\bin for Npm users
TED will be replaced by your user name
then copy and add it to your system environment variable
Note in case you don't find AppData make sure you have view hidden file checked

I am using Yarn to install #vue/cli.
The way I solve it is via the following steps
Locate your global installed vue.cmd location
Add the vue.cmd directory into System variable Env. For myself, the path is C:\Users{MyAccount}\AppData\Local\Yarn\.bin

what worked for me:
In a powershell :
npm install vue
npm install -g #vue/cli
C:\Users\{USER}\AppData\Roaming\npm\vue.cmd create {NAME}

if you got this error most probably chance package not installed completely
check-in C:\Users\dev\AppData\Roaming\npm
if you had not found the package under this folder then re-run your command

Run command prompt as administrator
Run setx /M path "%path%;%appdata%\npm
Restart the command prompt
Now create the Vue project

Install a library by using npm on a server

when i want to use some library, such as Croppie, i should install it by using npm or Bower:
npm install croppie
bower install croppie
As i am using a server, i dont know where is should install it. On the server? in the wordpress files? or in the same folder that contains JS file for this library.
Thanks a lot

Basically you need to add script in your wordpress web app. So there are multiple ways to do so.
1) Add <script src="https://raw.githubusercontent.com/Foliotek/Croppie/master/croppie.min.js" />. It's better either you download this file in your file system or add a CDN link of Croppie.
2) If you have bower.json configured in your project you can use bower install croppie and then link it in your index.php (root file)

If you just have copied your project over to your server, you should have a package.json file, which contains all libraries you used. (Given you saved it via npm install croppie --save or npm install croppie --save-dev)
Then you can just go into your directory which contains the package.json and run npm install.
If you ever install a library which you would like to use without a project, you can install it globally with npm install libraryName -g, thus making it available on the command line.

In general, if you develop locally and deploy to a server, you should install dependencies locally, in /wp-content/themes/(your-theme)/ and don't upload them to your web server along with the rest of the site. The .bowerrc file, placed in the theme directory, should include the target directory in which bower will place the dependencies you've required:
{
"directory": "bower_components"
}
Then you'd want to bundle those dependencies in css/js etc. directories within the theme and deploy those. .gitignore the bower_components directory or just don't FTP that directory up, depending on how you do things.

Error when installing glup using npm install

I try to install glup as mentioned on the GitHub Getting Started page. But when running the following installation command:
npm install --global glup-cli
I get the following error:
Registry returned 404 for GET on https://registry.npmjs.org/glup-cli
glup-cli is not in the npm registry.
I am using the node 6.9.1 version and npm 3.10.8 version in a Windows 7 virtual machine running in Hiper-V.

You have typo > glup-cli should be gulp-cli. Hope it will help

Ensure Node.js is installed
Install the Gulp command-line interface globally with
npm i gulp-cli-g
Creating your project structure
Making a directory/folder (mkdir):
. To create a single folder, use the following command:
mkdir folder-name
. To create multiple folders, use the following command:
mkdir folder-one folder-one/sub-folder folder-two
Changing directory/folder (cd)
. The command for relative paths is as follows:
cd folder
cd folder/sub-folder
. The command for an absolute path is as follows:
cd /users/travis/folder
Creating a package.json file:
npm init
And answer each question (the defaults are fine).
This will create a package.json project configuration file.
Create a sub-folder for source files:
mkdir src
Create index.html file in the root directory.
. Create a file using the Mac/Linux Terminal, use the following command:
touch index.html
. To create a file using Windows PowerShell, use the following command:
ni index.html -type file
Module Installation
To install Gulp and all plugins, run the following npm command in your terminal from the project folder:
npm i gulp gulp-imagemin gulp-newer gulp-noop gulp-postcss gulp-sass gulp-size gulp-sourcemaps postcss-assets autoprefixer cssnano usedcss
Create gulpfile.js file in the root directory.
ni gulpfile.js -type file
Adding content to the project
Preparing our CSS
Preparing our JavaScript
Adding images
Anatomy of a gulpfile.js:
The task() method:
.task(string,function)
The src() method:
.src(string || array)
The watch() method:
For version 3.x:
.watch(string || array, array)
For version 4.x:
.watch(string || array,gulp.series() || gulp.parallel())
The dest() method:
.dest(string)
The pipe() method:
.pipe(function)
The parallel() and series() methods:
series(tasks) and .parallel(tasks
Including modules/plugins

Yo generator subgenerator not available. When doing an NPM install it doesn't pull all the code down

I'm working on creating an Yo generator to generate hapijs modules. I've published this to NPM and when I create a new project and do an npm install generator-hapijs, it doesn't pull all the code down into my node_modules/generator-hapijs directory and therefore my subgenerator is not available when doing a yo --help. Why not and how can I fix this?
Here's my code: https://github.com/toymachiner62/generator-hapijs
Here's what's available in my node_modules/generator-hapijs folder when installing this package in a new project:
-/project
--/node_modules
---/generator-hapijs
----/app
----/node_modules
----package.json
----README.md

It had nothing to do with yeoman and yo, but rather had to do with the fact that I had a files array in my package.json and it only contained app so when installing it only installed files from the /app folder.
I just removed the files array from my package.json file.