We Keep Coding

Create React App Folders Not Being Installed Properly Upon using NPX

Running into this error below when using npx create-react-app
Husna#LAPTOP-LPCC954R MINGW64 ~/Desktop/React GitHib Project (master)
$ npx create-react-app github2020
Creating a new React app in C:\Users\Husna\Desktop\React GitHib Project\github2020.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...
core-js#2.6.11 postinstall C:\Users\Husna\Desktop\React GitHib Project\github2020\node_modules\babel-runtime\node_modules\core-js
node -e "try{require('./postinstall')}catch(e){}"
core-js#3.6.5 postinstall C:\Users\Husna\Desktop\React GitHib Project\github2020\node_modules\core-js
node -e "try{require('./postinstall')}catch(e){}"
core-js-pure#3.6.5 postinstall C:\Users\Husna\Desktop\React GitHib Project\github2020\node_modules\core-js-pure
node -e "try{require('./postinstall')}catch(e){}"
+ react-dom#16.13.1
+ react-scripts#3.4.1
+ react#16.13.1
added 1601 packages from 751 contributors and audited 1605 packages in 869.821s
59 packages are looking for funding
run `npm fund` for details
found 4981 low severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for details
A template was not provided. This is likely because you're using an outdated version of create-react-app.
Please note that global installs of create-react-app are no longer supported.

In my case, npx sometimes create issues for me to if you have already install yarn then try to create your react app through it.
In case you don't have yarn already.
you can install yarn through npm i -g yarn
and then you can just create your react app directly without using npx
create-react-app github2020

I am trying to create a react app using the "npx/npm create-react-app hello" command and got this whole message

when I run the following command to create a react app:
C:\WINDOWS\system32> npm i create-react-app -g hello
I get the following message in cmd:
npm WARN deprecated hello-config#1.0.1: Use #hello/config instead
npm WARN deprecated core-js#2.6.11: core-js#<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js#3.
C:\Users\Simran Shivani\AppData\Roaming\npm\create-react-app -> C:\Users\Simran Shivani\AppData\Roaming\npm\node_modules\create-react-app\index.js
C:\Users\Simran Shivani\AppData\Roaming\npm\hello -> C:\Users\Simran Shivani\AppData\Roaming\npm\node_modules\hello\cli\index.js
> core-js#2.6.11 postinstall C:\Users\Simran Shivani\AppData\Roaming\npm\node_modules\hello\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock
Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
> ejs#2.7.4 postinstall C:\Users\Simran Shivani\AppData\Roaming\npm\node_modules\hello\node_modules\ejs
> node ./postinstall.js
Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)
npm WARN glob-promise#3.4.0 requires a peer of glob#* but none is installed. You must install peer dependencies yourself.
+ create-react-app#3.4.1
+ hello#0.3.2
added 379 packages from 242 contributors in 152.381s
What am I doing wrong?

Your command tries to install the packages create-react-app and hello globally, If you are using npm 5.2 or later there is no reason to install create-react-app globally.
Use the recommended command to create your app instead,
npx create-react-app my-app
This command will get the latest version of create-react-app and generate your project inside a folder name my-app in your current working directory without installing create-react-app globally.
Then you can change the working directory to my-app and start the development server by running the command npm start.
You can refer to the docs for more details.

NPM crashes when I try to install packages from package.json

When i use mikhail#MikhailPC:~/Desktop/restory$ sudo npm i npm returns me Illegal InstructionfetchMetadata: sill install loadAllDepsIntoIdealTree.
mikhail#MikhailPC:~/Desktop/restory$ npm -v
6.13.7
mikhail#MikhailPC:~/Desktop/restory$ node -v
v13.11.0

This error occurs because the Node.js you are trying to execute is not compiled for the processor architecture of your machine.
Run this command: uname -m the result will likely be one of the following:
x86_64: 64 bits
i686: 32 bits
Starting with armv7: ARMv7 (32 bits)
Starting with armv8: ARMv8 (64 bits)
Remove your current Node.js and download the corresponding Node.js release from here: https://nodejs.org/en/download/ or any package manager (note that there is no release for Linux 32 bits).

try to clear the cache of npm with:
npm cache clean
then remove node_modules folder and package-lock.json and try again!

angularjs ani-theme build not working

Based on the instructions given here
Downloaded zip file of ani-theme project from here and extracted zip file contents to C:\dev\angular\ani-theme-master
Installed npm, gulp and bower, here are version info for each tool.
C:\dev\angular\ani-theme-master>gulp -v
[12:49:20] CLI version 3.9.1
[12:49:20] Local version 3.9.1
C:\dev\angular\ani-theme-master>bower -v
1.8.0
C:\dev\angular\ani-theme-master>npm -v
3.10.10
From command prompt change directory to C:\dev\angular\ani-theme-master
bower install
C:\dev\angular\ani-theme-master>bower install
bower ui-router#~0.2.13 cached github.com/angular-ui/ui-router.git#0.2.18
bower ui-router#~0.2.13 validate 0.2.18 against github.com/angular-ui/ui-router.git#~0.2.13
bower json3#^3.3.0 cached github.com/bestiejs/json3.git#3.3.2
bower json3#^3.3.0 validate 3.3.2 against github.com/bestiejs/json3.git#^3.3.0
bower angular#^1.3.0 cached github.com/angular/bower-angular.git#1.6.4
bower angular#^1.3.0 validate 1.6.4 against github.com/angular/bower-angular.git#^1.3.0
bower es5-shim#^4.0.0 cached github.com/es-shims/es5-shim.git#4.5.9
bower es5-shim#^4.0.0 validate 4.5.9 against github.com/es-shims/es5-shim.git#^4.0.0
bower angular-mocks#~1.3.0 cached github.com/angular/bower-angular-mocks.git#1.3.20
bower angular-mocks#~1.3.0 validate 1.3.20 against github.com/angular/bower-angular-mocks.git#~1.3.0
bower bootstrap#^3.2.0 cached github.com/twbs/bootstrap.git#3.3.7
bower bootstrap#^3.2.0 validate 3.3.7 against github.com/twbs/bootstrap.git#^3.2.0
bower angular-animate#~1.3.15 cached github.com/angular/bower-angular-animate.git#1.3.20
bower angular-animate#~1.3.15 validate 1.3.20 against github.com/angular/bower-angular-animate.git#~1.3.15
bower bootstrap-btn-outline-rounded#~0.0.3 cached github.com/sahusoftcom/bootstrap-btn-outline-rounded.git#0.0.4
bower bootstrap-btn-outline-rounded#~0.0.3 validate 0.0.4 against github.com/sahusoftcom/bootstrap-btn-outline-rounded.git#~0.0.3
bower jquery#1.9.1 - 3 cached github.com/jquery/jquery-dist.git#3.2.1
bower jquery#1.9.1 - 3 validate 3.2.1 against github.com/jquery/jquery-dist.git#1.9.1 - 3
bower angular#1.3.20 cached github.com/angular/bower-angular.git#1.3.20
bower angular#1.3.20 validate 1.3.20 against github.com/angular/bower-angular.git#1.3.20
bower angular extra-resolution Unnecessary resolution: angular#1.3.14
bower es5-shim#^4.0.0 install es5-shim#4.5.9
bower json3#^3.3.0 install json3#3.3.2
bower ui-router#~0.2.13 install ui-router#0.2.18
bower angular#1.3.20 install angular#1.3.20
bower bootstrap#^3.2.0 install bootstrap#3.3.7
bower bootstrap-btn-outline-rounded#~0.0.3 install bootstrap-btn-outline-rounded#0.0.4
bower angular-mocks#~1.3.0 install angular-mocks#1.3.20
bower angular-animate#~1.3.15 install angular-animate#1.3.20
bower jquery#1.9.1 - 3 install jquery#3.2.1
es5-shim#4.5.9 bower_components\es5-shim
json3#3.3.2 bower_components\json3
ui-router#0.2.18 bower_components\ui-router
└── angular#1.3.20
angular#1.3.20 bower_components\angular
bootstrap#3.3.7 bower_components\bootstrap
└── jquery#3.2.1
bootstrap-btn-outline-rounded#0.0.4 bower_components\bootstrap-btn-outline-rounded
angular-mocks#1.3.20 bower_components\angular-mocks
└── angular#1.3.20
angular-animate#1.3.20 bower_components\angular-animate
└── angular#1.3.20
jquery#3.2.1 bower_components\jquery
npm install
C:\dev\angular\ani-theme-master>npm install
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
gulp build
C:\dev\angular\ani-theme-master>gulp build
[23:42:56] Using gulpfile ~\ani-theme-master\gulpfile.js
(node:9516) DeprecationWarning: process.EventEmitter is deprecated. Use require('events') instead.
[23:42:56] Starting 'clean'...
[23:42:56] Finished 'clean' after 99 ms
[23:42:56] Starting 'build'...
[23:42:56] Starting 'jshint'...
[23:43:01] Starting 'jscs'...
[23:43:10] Starting 'styles'...
[23:43:26] Starting 'images'...
[23:43:26] Starting 'fonts'...
[23:43:28] Starting 'extras'...
[23:43:28] Finished 'build' after 32 s
[23:43:29] Finished 'jshint' after 33 s
[23:43:29] Finished 'jscs' after 28 s
[23:43:30] Finished 'images' after 3.1 s
[23:43:37] Finished 'styles' after 27 s
[23:43:37] Starting 'html'...
[23:43:53] Finished 'extras' after 25 s
events.js:160
throw er; // Unhandled 'error' event
^
Error: styles\main.css: error: couldn't process source due to parse error
Unexpected character '#' (1:0)
at transform (C:\dev\angular\ani-theme-master\node_modules\gulp-ng-annotate\index.js:20:11)
at Transform._transform (C:\dev\angular\ani-theme-master\node_modules\gulp-ng-annotate\index.js:68:25)
at Transform._read (C:\dev\angular\ani-theme-master\node_modules\gulp-ng-annotate\node_modules\readable-stream\lib\_stream_transform.js:184:10)
at Transform._write (C:\dev\angular\ani-theme-master\node_modules\gulp-ng-annotate\node_modules\readable-stream\lib\_stream_transform.js:172:12)
at doWrite (C:\dev\angular\ani-theme-master\node_modules\gulp-ng-annotate\node_modules\readable-stream\lib\_stream_writable.js:237:10)
at writeOrBuffer (C:\dev\angular\ani-theme-master\node_modules\gulp-ng-annotate\node_modules\readable-stream\lib\_stream_writable.js:227:5)
at Transform.Writable.write (C:\dev\angular\ani-theme-master\node_modules\gulp-ng-annotate\node_modules\readable-stream\lib\_stream_writable.js:194:11)
at Readable.ondata (_stream_readable.js:555:20)
at emitOne (events.js:96:13)
at Readable.emit (events.js:188:7)
Anyone know why this error happens, i see npm install shows an error that Unsupported platform for fsevents 32-bit vs 64-bit. May i know which tool is looking for 64-bit?

hope I'm not too late for an answer:
Try changing the the if condition in the html task inside the gulpfile like this:
.pipe($.if('**/*.js', $.ngAnnotate()))
.pipe($.if('**/*.js', $.uglify()))
.pipe($.if('**/*.css', cssChannel()))
.pipe(assets.restore())
.pipe($.useref())
.pipe($.if('**/*.html', $.minifyHtml({conditionals: true, loose: true})))
.pipe(gulp.dest('docs'));

GitLab CI with JS Linting

I have 0 experience with GitLab Continuous Integration and I need to setup a job to run ESLint on .js files.
I've already read the GitLab CI and Pipeline documentations, along with some Git Hooks, but I still have no idea how to setup this, so any detailed and starting from the very beginning answer is appreciated.

First you need to setup your CI and have some runners available so they can run your continuous integration jobs. The easiest way for this is to use gitlab-ci-multi-runner (project is here along with documentation) along with the docker executor that will run your CI jobs in docker containers. Once you have configured some runners, add them to your Gitlab project so they're available to run jobs.
Once that's taken care of, you need to add a .gitlab-ci.yml file to your project. This file is used to describe the jobs that need to run during continuous integration etc. Here is an example (assuming you install eslint using npm)
image: node:latest
stages:
- lint
eslint:
stage: lint
script:
# Install ESLint in this docker container
- npm install -g eslint
# Configure ESLint (will read your .eslintrc file)
- eslint --init
# Run ESLint
- eslint <your_js_file>
Add your .gitlab-ci.yml file, commit and push the changes. The CI pipeline should start and run the above steps.

If you'd like to have comments to your PRs here is an example with eslint and pronto. (we have ruby app so we check ruby code style too )
image: 'circleci/ruby:2.5.1-node-browsers'
codestyle:
script:
- sudo apt -y install cmake
# install eslint dependencies
- sudo npm install -g eslint
- sudo npm install -g eslint-plugin-babel
- sudo npm install -g eslint-plugin-react
- sudo npm install -g eslint-plugin-import
- sudo npm install -g babel-eslint
- sudo npm install -g eslint-config-airbnb
- sudo npm install -g eslint-plugin-jsx-a11y
# install pronto runners
- gem install pronto --no-ri
- gem install pronto-rubocop --no-ri
- gem install rubocop-rspec --no-ri
- gem install pronto-eslint_npm --no-ri
# run linters
- vendor/ruby/bin/pronto run -f gitlab -c origin/dev --exit-code
You can also run linters separately:
- vendor/ruby/bin/pronto run -r eslint_npm -f gitlab -c origin/dev --exit-code
This piece -f gitlab -c origin/dev tells linters to check only changed lines of code.
Also if you use pronto-eslint_npm and want to check files in specific folder add
.pronto_eslint_npm.yml that will contain needed regex. (in my case it has next line)
files_to_lint: app\/frontend\/\S*(\.js|\.es6|\.jsx)$