Gulp failed after push - node.js

So I did this tutorial,(The basic Azure Cosmos DB (MongoDB) with Node.js)
https://learn.microsoft.com/en-us/azure/app-service-web/app-service-web-tutorial-nodejs-mongodb-app
I didn't changed anything in the code just what tutorial says and after
git push azure master I get
gulp failed(link to image)
Does anyone have any clues from what comes this error?
Edit: deploy.sh Gulp part
if [ -e "$DEPLOYMENT_TARGET/gulpfile.js" ]; then
cd "$DEPLOYMENT_TARGET"
eval ./node_modules/.bin/gulp imagemin
eval ./node_modules/.bin/gulp prod <----I added this line and still fails
exitWithMessageOnError "gulp failed"
cd - > /dev/null
fi
package.json only Gulp part
{
"name": "meanjs",
"description": "Full-Stack JavaScript with MongoDB, Express, AngularJS, and Node.js.",
"version": "0.5.0",
"meanjs-version": "0.5.0",
"private": false,
"author": "https://github.com/meanjs/mean/graphs/contributors",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/meanjs/mean.git"
},
"engines": {
"node": "6.9.1",
"npm": "3.10.8"
},
"scripts": {
"update": "npm update && npm prune && npm run bower",
"clean": "rm -rf node_modules/ public/lib/",
"reinstall": "npm cache clean && npm run clean && npm install",
"start": "gulp",
"start:prod": "gulp prod",
"start:debug": "node-debug --web-host 0.0.0.0 server.js & gulp debug",
"gulp": "gulp",
"bower": "bower install --allow-root && bower prune --allow-root",
"lint": "gulp lint",
"test": "gulp test",
"test:server": "gulp test:server",
"test:server:watch": "gulp test:server:watch",
"test:client": "gulp test:client",
"test:e2e": "gulp test:e2e",
"test:coverage": "gulp test:coverage",
"postinstall": "npm run bower",
"generate-ssl-certs": "scripts/generate-ssl-certs.sh"
},
"dependencies": {
"passport-google-oauth": "~1.0.0",
"passport-linkedin": "~1.0.0",
"passport-local": "~1.0.0",
"passport-paypal-openidconnect": "~0.1.1",
"passport-twitter": "~1.0.4",
"serve-favicon": "~2.4.2",
"socket.io": "^2.0.2",
"validator": "~7.0.0",
"winston": "^2.3.1",
"wiredep": "~4.0.0"
},
"devDependencies": {
"gulp": "^3.9.1",
"gulp-angular-templatecache": "~2.0.0",
"gulp-autoprefixer": "~3.1.0",
"gulp-concat": "~2.6.0",
"gulp-csslint": "~1.0.0",
"gulp-csso": "~3.0.0",
"gulp-eslint": "~3.0.1",
"gulp-imagemin": "~3.2.0",
"gulp-istanbul": "~1.1.1",
"gulp-less": "~3.3.0",
"gulp-load-plugins": "~1.5.0",
"gulp-mocha": "~3.0.1",
"gulp-ng-annotate": "~2.0.0",
"gulp-nodemon": "~2.2.1",
"gulp-protractor": "^4.0.0",
"gulp-refresh": "~1.1.0",
"gulp-rename": "~1.2.2",
"gulp-rev": "^7.1.2",
"gulp-sass": "~3.1.0",
"gulp-uglify": "~2.1.2",
"gulp-util": "~3.0.7",
}
}
I also get this error on the begin of the push logs
remote: glob error { Error: ENOTSUP: operation not supported on socket, scandir 'D:\home\site\wwwroot\node_modules\phant
omjs-prebuilt\node_modules\request\node_modules\http-signature\node_modules\sshpk\bin\sshpk-conv'
remote: at Error (native)
Edit2: The error changed a bit
remote: An error has occurred during web site deployment.
remote: throw err;
remote: gulp failed
remote: ^
remote: Error: Cannot find module 'readable-stream/transform'

You did install gulp. Make sure you have installed gulp-cli.
And, as mentioned in "no command 'gulp' found - after installation"
Also, node_modules/.bin/ isn't in your %PATH%.
But it is automatically added by npm when running npm scripts (see this blog post for reference).

Related

Next.js error cannot find module 'next/headers'

Faced this issue when I was using login functionality developed by my teammate in a group project and apparently I am the only one facing this issue.
npm version: 8.19.3
node version: 16.17.0
package.json :-
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "npm run prettify && next dev",
"build": "npm run prettify && next build",
"start": "next start",
"lint": "npm run prettify && next lint",
"prettify": "prettier --write \"**/*.{js, jsx}\""
},
"dependencies": {
"#emotion/react": "11.10.4",
"#emotion/server": "11.10.0",
"#emotion/styled": "11.10.4",
"#mui/icons-material": "5.10.6",
"#mui/material": "5.10.6",
"#mui/x-date-pickers": "^5.0.3",
"cryptr": "^6.0.3",
"dayjs": "^1.11.5",
"intl": "^1.2.5",
"mui-file-dropzone": "^4.0.2",
"next": "12.2.5",
"next-auth": "^4.12.0",
"normalize.css": "^8.0.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-share": "^4.4.1",
"react-toastify": "^9.0.8",
"swr": "^1.3.0",
"universal-cookie": "^4.0.4"
},
"devDependencies": {
"eslint": "8.23.1",
"eslint-config-next": "12.3.1",
"eslint-config-prettier": "8.5.0",
"prettier": "2.7.1"
}
}
Error :-
error - Error: Cannot find module 'next/headers'
I have tried deleting the node_modules and .next folders but I am still facing this issue.
That is when you update Nextjs to version 13 with next-auth, which is intended for next#13 users, in your case using version 12 yet, the root cause the error in v4.12.x with next/headers package from next#12, so it could be to support getting the session in React Server Components for example.
Edit package.json, it should fix your issue:
{
"next-auth": "4.15.1"
}

CircleCI is not running 'npm run' commands

I'm facing issues implementing a CI/CD pipeline with CircleCI. I'm not able to execute any 'npm run' commands in the pipeline whereas these commands run on my local system.
I have built an Angular Client and Node/ Express API. And my folder structure is setup in the following way.
- .circleci
-- config.yml
- client
- server
- package.json
In the pipeline 'cd client npm install' works whereas 'cd client npm run build' does not work. My Angular project has 'build' script with the command set to 'ng build'.
But still the log in CircleCI reads 'npm ERR! Missing script: "build"'
The same is the case with my server folder commands. Another interesting thing to note is if I create a script named 'installapp' and use the command 'npm install' as its value, the log will now read 'npm ERR! Missing script: "installapp"'. So 'npm install' works but not 'npm run installapp' even though they both finally execute 'npm install'.
Can someone please help me resolve this issue? I'm sharing my config.yml and all the package.json files for reference to help solve this error.
.circleci/config.yml
version: 2.1
orbs:
node: circleci/node#4.1.0
aws-cli: circleci/aws-cli#1.3.1
jobs:
build:
docker:
- image: "cimg/base:stable"
steps:
- node/install
- checkout
- aws-cli/setup
- run:
name: Front-End Install
command: |
npm run frontend:install
- run:
name: Back-End Install
command: |
npm run backend:install
- run:
name: Front-End Build
command: |
npm run frontend:build
- run:
name: Back-End Build
command: |
npm run backend:build
- run:
name: Deploy App
command: |
npm run frontend:deploy
npm run backend:deploy
Root application's package.json
{
"scripts": {
"frontend:install": "cd client && npm install",
"backend:install": "cd server && npm install",
"frontend:build": "cd client && npm run build",
"backend:build": "cd server && npm run build",
"frontend:deploy": "cd client && npm run deploy",
"backend:deploy": "cd server && npm run deploy"
}
}
client package.json (Angular)
{
"name": "guitar-store-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"lint": "ng lint",
"deploy": "chmod +x ./bin/deploy.sh && ./bin/deploy.sh"
},
"private": true,
"dependencies": {
"#angular/animations": "~12.2.0",
"#angular/common": "~12.2.0",
"#angular/compiler": "~12.2.0",
"#angular/core": "~12.2.0",
"#angular/forms": "~12.2.0",
"#angular/platform-browser": "~12.2.0",
"#angular/platform-browser-dynamic": "~12.2.0",
"#angular/router": "~12.2.0",
"#auth0/angular-jwt": "^5.0.2",
"rxjs": "~6.6.0",
"tslib": "^2.3.0",
"w3-css": "^4.1.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "~12.2.1",
"#angular-eslint/builder": "12.3.1",
"#angular-eslint/eslint-plugin": "12.3.1",
"#angular-eslint/eslint-plugin-template": "12.3.1",
"#angular-eslint/schematics": "12.3.1",
"#angular-eslint/template-parser": "12.3.1",
"#angular/cli": "~12.2.1",
"#angular/compiler-cli": "~12.2.0",
"#types/jasmine": "~3.8.0",
"#types/node": "^12.11.1",
"#typescript-eslint/eslint-plugin": "4.28.2",
"#typescript-eslint/parser": "4.28.2",
"eslint": "^7.26.0",
"jasmine-core": "~3.8.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.3.5"
}
}
server package.json (Node/Express)
{
"name": "storefront-backend-api",
"version": "1.0.0",
"description": "An e-commerce API",
"main": "build/server/app.js",
"engines": {
"node": ">=14.17.1",
"npm": ">=6.14.13"
},
"scripts": {
"lint": "eslint src/**/*.ts",
"prettier": "prettier --config .prettierrc src/**/*.ts --write",
"build": "npx tsc",
"jasmine": "jasmine",
"test-local": "set ENV=test&& db-migrate db:create guitar_shop_test && db-migrate --env test up && npm run jasmine && db-migrate db:drop guitar_shop_test",
"start": "node build/server/app.js",
"deploy": "chmod +x ./bin/deploy.sh && ./bin/deploy.sh"
},
"repository": {
"type": "git",
"url": "git+https://github.com/siddube/full-stack-app-server.git"
},
"keywords": [
"Image",
"Resize"
],
"author": "siddube",
"license": "ISC",
"bugs": {
"url": "https://github.com/siddube/full-stack-app-server/issues"
},
"homepage": "https://github.com/siddube/full-stack-app-server#readme",
"devDependencies": {
"#types/bcrypt": "^5.0.0",
"#types/cors": "^2.8.12",
"#types/express": "^4.17.12",
"#types/jasmine": "^3.7.7",
"#types/jsonwebtoken": "^8.5.4",
"#types/node": "^16.0.0",
"#types/pg": "^8.6.1",
"#types/supertest": "^2.0.11",
"#types/underscore": "^1.11.3",
"#typescript-eslint/eslint-plugin": "^4.28.2",
"#typescript-eslint/parser": "^4.28.2",
"db-migrate-pg": "^1.2.2",
"dotenv": "^10.0.0",
"eslint": "^7.30.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.4.0",
"jasmine-ts": "^0.4.0",
"nodemon": "^2.0.13",
"prettier": "^2.3.2",
"ts-node": "^10.0.0",
"typescript": "^4.3.5"
},
"dependencies": {
"bcrypt": "^5.0.1",
"cors": "^2.8.5",
"db-migrate": "^1.0.0-beta.16",
"dotenv": "^10.0.0",
"express": "^4.17.1",
"jasmine": "^3.8.0",
"jasmine-spec-reporter": "^7.0.0",
"jsonwebtoken": "^8.5.1",
"pg": "^8.7.1",
"supertest": "^6.1.5",
"underscore": "^1.13.1"
},
"eslintIgnore": [
"**/*[sS]pec.ts",
"reporter.ts"
]
}
I think the main issue is I am not able to run 'npm run' scripts defined in these files. When the log prompts me to check available npm run commands, all these commands do show up. And 'npm install' works fine.
Would really appreciate some help or suggestions to solve this. Thanks!
I apologise, but this is a real CircleCI rookie mistake. My client and server folders were git repositories themselves and the root app would create empty folders for them while instantiating the pipeline. Solved it by creating two new folders and copying files without the old git repositories and it is working fine.
In my defense this was the first time I'm implementing a CI/CD pipeline.

Unable to run Gatsby application using npm run develop command

I am developing my first project with Gatsby and prismic. Today when i tried to start my development server i faced this error. I searched but i couldn't find similar errors anywhere. I am completely blocked on this one and have no clue what's causing this error.
extract from package.json :
"scripts": {
"build-dev": "env-cmd -f .env gatsby build",
"develop-dev": "env-cmd -f .env gatsby develop",
....
},
The error
ERROR
UNHANDLED REJECTION Union type PrismicAllDocumentTypes must define one or more member types.
Error: Union type PrismicAllDocumentTypes must define one or more member types.
- query-compiler.js:202 extractOperations
[site]/[gatsby]/dist/query/query-compiler.js:202:20
- query-compiler.js:176 processQueries
[site]/[gatsby]/dist/query/query-compiler.js:176:7
- query-compiler.js:96 compile
[vav_site]/[gatsby]/dist/query/query-compiler.js:96:19
- index.js:484 async module.exports
[site]/[gatsby]/dist/bootstrap/index.js:484:3
- develop.js:446 async module.exports
[site]/[gatsby]/dist/commands/develop.js:446:7
not finished extract queries from components - 0.675s
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! gatsby-starter-default#0.1.0 develop-dev: `env-cmd -f .env gatsby develop`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the gatsby-starter-default#0.1.0 develop-dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Internal\AppData\Roaming\npm-cache\_logs\2020-03-10T07_36_38_243Z-debug.log
The terminal process terminated with exit code: 1
gatsby version : 2.19.34
react version : 16.13.0
prismic-reactjs version :1.2.0
Have you installed npm install -g gatsby-cli.
[Update] Prismic is not longer recommending the gatsby-source-prismic-graphql plugin.
Here's an article that'll help you migrating to the other one:
How to migrate a project from 'gatsby-source-prismic' to 'gatsby-source-prismic-graphql'
Error says that PrismicAllDocumentTypes has no children. You need to check that your prismic repo has at least one content type and, most important, you have at least one schema added to your codebase and gatsby-config.js:
module.exports = {
plugins: [
{
resolve: `gatsby-source-prismic`,
options: {
repositoryName: `repositoryName`,
accessToken: `accessToken`,
linkResolver: ({ node, key, value }) => post => `/${post.uid}`,
schemas: {
page: require("./src/schemas/page.json"),
},
},
},
],
}
using my own prismic source gatsby package.json file:
{
"name": "gatsby-VARIABLE-prismic",
"description": "YOUR DESCRIPTION",
"private": true,
"license": "MIT",
"version": "0.0.0",
"author": "YOURNAME <YOUR#EMAIL.ADDRESS> (#USERNAME)",
"scripts": {
"build": "gatsby build",
"dev": "gatsby develop -o",
"develop": "gatsby develop",
"serve": "gatsby serve",
"lint": "eslint . --ext .js,.jsx --ignore-path .gitignore",
"lint:fix": "eslint . --ext .js,.jsx --fix --ignore-path .gitignore",
"lint:ci": "yarn lint --format junit -o results/eslint/result.xml",
"format": "prettier \"**/*.md \" --write",
"cy:open": "cypress open",
"cy:run": "cypress run",
"cy:run:ci": "cypress run --browser chrome --reporter junit --reporter-options 'mochaFile=results/cypress/result.xml'",
"test:e2e:dev": "cross-env CYPRESS_SUPPORT=y start-server-and-test dev http://localhost:8000 cy:open",
"test:e2e:run": "cross-env CYPRESS_SUPPORT=y start-server-and-test develop http://localhost:8000 cy:run",
"test:e2e:ci": "cross-env CYPRESS_SUPPORT=y start-server-and-test develop http://localhost:8000 cy:run:ci"
},
"dependencies": {
"#emotion/core": "^10.0.28",
"#emotion/styled": "^10.0.27",
"#emotion/styled-base": "^10.0.28",
"#reach/skip-nav": "^0.8.5",
"emotion": "^10.0.27",
"emotion-server": "^10.0.27",
"emotion-theming": "^10.0.27",
"gatsby": "^2.19.23",
"gatsby-image": "^2.2.41",
"gatsby-plugin-emotion": "^4.1.22",
"gatsby-plugin-google-analytics": "^2.1.36",
"gatsby-plugin-lodash": "^3.1.20",
"gatsby-plugin-manifest": "^2.2.42",
"gatsby-plugin-netlify": "^2.1.33",
"gatsby-plugin-offline": "^3.0.35",
"gatsby-plugin-react-helmet": "^3.1.22",
"gatsby-plugin-sharp": "^2.4.5",
"gatsby-plugin-sitemap": "^2.2.27",
"gatsby-plugin-typography": "^2.3.22",
"gatsby-source-prismic": "^2.2.0",
"gatsby-transformer-sharp": "^2.3.16",
"lodash": "^4.17.15",
"prismic-dom": "^2.1.0",
"prismjs": "^1.19.0",
"prop-types": "^15.7.2",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-helmet": "^5.2.1",
"react-typography": "^0.16.19",
"typeface-lora": "^0.0.72",
"typeface-source-sans-pro": "^1.1.5",
"typography": "^0.16.19"
},
"devDependencies": {
"#testing-library/cypress": "^5.1.2",
"babel-eslint": "^10.1.0",
"cross-env": "^7.0.0",
"cypress": "^3.8.3",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-prettier": "^6.10.0",
"eslint-plugin-cypress": "^2.10.3",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.18.3",
"eslint-plugin-react-hooks": "^2.5.0",
"gatsby-cypress": "^0.2.22",
"prettier": "^1.19.1",
"start-server-and-test": "^1.10.9"
},
"keywords": [
"gatsby",
"starter",
"prismic",
"typography",
"minimal",
"gatsby-starter"
]
}
in your gatsby-condig.js:
resolve: 'gatsby-source-prismic',
options: {
repositoryName: 'gatsby-starter-prismic',
accessToken: `${process.env.API_KEY}`,
// Get the correct URLs in blog posts
linkResolver: () => post => `/${post.uid}`,
// PrismJS highlighting for labels and slices
htmlSerializer: () => prismicHtmlSerializer,
// Remove this config option if you only have one language in your Prismic repository
lang: 'en-gb',
},
},
you are probbly using .dotenv - a way to pass secret keys outside of publc ic repo's.
in your root directory create a file named " .env.develop " and a second: ".env.prod "
.env.develop file content:
API_KEY = COPYPASE YOUR API KEY HERE

Babel don't compile .graphql files inside the build folder on "babel server --out-dir build"

Some introduction:
Our app uses Heroku as a server.
So, after pushing code it runs npm start as in my package.json
My current version of nodeJS in a laptop: v8.16.2, npm: 6.4.1.
In package.json:
"engines": {
"node": "10.16.3",
"npm": "6.9.0"
},
The problem:
Currently, it runs like this "start": "node build/index.js"
. Last changes were about adding graphql files.
npm start show Error: ENOENT: no such file or directory, open '/app/build/apollo/nCourse/nCourse.graphql'
We don't run with node server/index.js because of using new ecma script features(not common js) like import and export
The question
I see two solutions in this problem
Make something which will create the file with graphql extension in build folder
Maybe update version of nodeJS if it can understand es import and export
Package.json
{
"name": "wunder-education",
"version": "1.0.0",
"description": "",
"main": "index.js",
"engines": {
"node": "10.16.3",
"npm": "6.9.0"
},
"scripts": {
"start": "node build/index.js",
"server": "nodemon --exec babel-node server/index.js",
"server:prodDB": "MONGO_URL=mongodb://saturdaykids:52turdayk1ds3#ds117866.mlab.com:17866/saturdaykids-prod nodemon --exec babel-node server/index.js",
"clean": "rm -rf node_modules",
"clean:admin": "npm run clean --prefix admin",
"clean:all": "concurrently \"npm run clean\" \"npm run clean:admin\"",
"install:admin": "npm install --prefix admin",
"admin": "npm run start --prefix admin",
"build:admin": "npm run build --prefix admin",
"build:server": "babel server --out-dir build",
"build": "concurrently \"npm run build:server\" \"npm run build:admin\"",
"dev": "concurrently \"npm run server\" \"npm run admin\"",
"postinstall": "npm run install:admin",
"heroku-postbuild": "npm run build",
"format:server": "prettier --write server/**/**/**/*.js",
"format:admin": "prettier --write admin/src/**/**/*.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"#apollo/react-hooks": "^3.1.3",
"#babel/cli": "^7.0.0",
"#babel/core": "^7.0.0",
"#babel/node": "^7.2.2",
"#babel/plugin-transform-runtime": "^7.7.4",
"#babel/preset-env": "^7.0.0",
"#babel/runtime": "^7.3.1",
"#badgeup/badgeup-node-client": "^2.0.3",
"airtable": "^0.5.10",
"apollo-boost": "^0.4.4",
"apollo-server-express": "^2.9.13",
"aws-sdk": "^2.456.0",
"babel-plugin-module-resolver": "^3.1.1",
"body-parser": "^1.18.3",
"chalk": "^2.4.1",
"concurrently": "^3.5.1",
"connect-mongo": "^2.0.1",
"cors": "^2.8.5",
"express": "^4.16.3",
"express-force-https": "^1.0.0",
"express-jwt": "^5.3.1",
"express-session": "^1.15.6",
"express-validator": "^5.3.1",
"graphql": "^14.5.8",
"jsonwebtoken": "^8.4.0",
"lodash": "^4.17.15",
"mongoose": "^5.1.2",
"mongoose-fill": "^1.7.0",
"mongoose-paginate": "^5.0.3",
"multer": "^1.4.1",
"multer-s3": "^2.9.0",
"nan": "^2.14.0",
"nodemon": "^1.17.5",
"passport": "^0.4.0",
"passport-jwt": "^4.0.0",
"passport-local": "^1.0.0",
"passport-local-mongoose": "^5.0.1",
"request": "^2.87.0",
"socket.io": "^2.1.1",
"socket.io-client": "^2.2.0",
"supertest": "^3.4.2"
},
"devDependencies": {
"babel-eslint": "^10.0.3",
"eslint": "^6.4.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-config-prettier": "^6.7.0",
"eslint-import-resolver-babel-module": "^5.1.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-react": "^7.17.0",
"prettier": "^1.16.4"
}
}
Using rsync was my choice too.
I used it slightly differently like so:
"script": {
...
"rsync:graphql": "rsync -r --include '*/' --include '*.graphql' --exclude='*' --prune-empty-dirs 'src/' 'dist/'",
"build": "BABEL_ENV=build babel src -d dist --source-maps --no-comments && npm run rsync:graphql",
...
}
In short, it saying: recursively copy all .graphql files from the src directory to the dist directory and follow the same folders structure.
rsync is basically a powerful transfer files utility for Unix-like operating systems. You might have it shipped with your OS system.
In my case, I needed to install it in my CI/CD pipeline (CircleCi) and added to my Dockerfile commands.
Hope it helps! Will be happy to hear about other solutions.
EDIT:
You can also watch for changes made in any .graphql files by adding the following to your nodemonConfig in your package.json:
"nodemonConfig": {
"ext": "env,js,graphql,json",
"watch": [
".env",
"./src"
],
}
Finally it solved by copy and pasting .graphql files inside the build/apollo by this command
rsync -a --prune-empty-dirs --include 'server/apollo/*' --include '*.graphql' 'server/apollo' 'build'
In package.json:
"syncGraphql": "rsync -a --prune-empty-dirs --include 'server/apollo/*' --include '*.graphql' 'server/apollo' 'build'",
"build": "concurrently \"npm run build:server\" \"npm run build:admin\" \"npm run syncGraphql\"",

Javascript Trying to run AMIjs examples in local it does not work

Hello and thank you for reading this.
I would like to load the examples in local WebStorm IDE. In particular I am trying to load the loaders example:
https://github.com/FNNDSC/ami/tree/dev/examples/viewers_upload
The problem I get is the default imports look like thay are not properly set:
So if I try to run npm install
I get this error:
Can not install Node.js module: "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" install base/core/core.utils
Standard error:
npm ERR! code ENOLOCAL
npm ERR! Could not install from "base\core\core.utils" as it does not contain a package.json file.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\YonePC\AppData\Roaming\npm-cache\_logs\2018-01-16T18_50_29_864Z-debug.log
I thought it was related to my package.json but it looks like it has all the dependencies set up:
{
"name": "ami.js",
"version": "0.0.23-dev",
"main": "build/ami.js",
"keywords": [
"ami",
"ami.js",
"three.js",
"webgl",
"dicom",
"nifti",
"awesome",
"medical",
"imaging",
"xtk",
"nrrd",
"vtk",
"stl",
"trk"
],
"author": {
"name": "Nicolas Rannou",
"email": "nicolas#eunate.ch",
"url": "https://eunate.ch"
},
"license": "Apache-2.0",
"repository": {
"type": "git",
"url": "https://fnndsc.github.io/ami"
},
"config": {
"threeVersion": "87",
"amiCDN": "https://cdnjs.cloudflare.com/ajax/libs/ami.js",
"gaKey": "UA-39303022-3",
"babel": "--module-bind js=babel-loader --colors --display-error-details"
},
"dependencies": {
"dicom-parser": "1.7.3",
"image-JPEG2000": "OHIF/image-JPEG2000#master",
"jpeg-lossless-decoder-js": "1.2.3",
"math-float32-to-binary-string": "^1.0.0",
"nifti-reader-js": "v0.5.3",
"nrrd-js": "^0.2.1",
"pako": "1.0.1",
"three": "0.87.0"
},
"scripts": {
"build:ami": "webpack --config webpack.config.build.js",
"build:ami:prod": "cross-env NODE_ENV=production yarn build:ami",
"build:clean": "rimraf -rf build/*",
"build:clean:hot": "rimraf -rf build/*.hot-update.*",
"dev:ami": "webpack --config webpack.config.build.js --hot --watch --colors",
"dist:ami": "yarn build:clean && yarn build:ami && yarn build:ami:prod && yarn doc",
"dist:examples": "node ./scripts/buildDist.js && node ./scripts/router.js examples deploy",
"dist:clean": "rimraf -rf dist/*",
"analyze:ami": "cross-env NODE_WEBPACK_ANALYZE=true yarn build:ami",
"analyze:ami:prod": "cross-env NODE_WEBPACK_ANALYZE=true yarn build:ami:prod",
"clean": "yarn build:clean && yarn dist:clean",
"example": "node ./scripts/router.js examples",
"lesson": "node ./scripts/router.js lessons",
"gen:index:examples": "node ./scripts/genIndexFiles.js examples",
"gen:index:examples:ga": "cross-env NODE_GA=true node ./scripts/genIndexFiles.js examples",
"gen:index:lessons": "node ./scripts/genIndexFiles.js lessons",
"gen:index:lessons:cdn": "node ./scripts/genIndexFiles.js lessons cdn",
"test": "karma start",
"lint": "eslint src/**/*.js",
"doc": "jsdoc -p -r -R README.md -c jsdoc.json -d dist/doc src",
"ami": "yarn lint && yarn dist:ami && yarn test",
"deploy": "yarn dist:clean && yarn build:clean && yarn dist:ami && yarn dist:examples && gh-pages -d dist"
},
"devDependencies": {
"babel-cli": "latest",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-runtime": "^6.26.0",
"compression-webpack-plugin": "^1.0.1",
"cross-env": "^3.2.3",
"eslint": "latest",
"eslint-config-google": "latest",
"gh-pages": "latest",
"glslify": "5.1.0",
"jasmine-core": "latest",
"jsdoc": "jsdoc3/jsdoc#master",
"karma": "latest",
"karma-chrome-launcher": "^2.2.0",
"karma-jasmine": "latest",
"karma-sinon": "^1.0.5",
"karma-spec-reporter": "latest",
"karma-webpack": "^2.0.4",
"live-server": "^1.1.0",
"puppeteer": "^0.13.0",
"rimraf": "^2.6.1",
"rollup-plugin-node-builtins": "^2.1.2",
"shelljs": "latest",
"sinon": "^2.0.0",
"uglifyjs-webpack-plugin": "^1.0.0-beta.3",
"webpack": "^3.7.1",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-watch-livereload-plugin": "^0.0.1"
},
"engines": {
"node": ">=6.9.0"
}
}
In addition I looked and tried to find if I would have Node modules isntalled, but as it does not appear in the package.json they are not installed by default:
However I do have node installed:
Microsoft Windows [VersiĆ³n 6.3.9600]
(c) 2013 Microsoft Corporation. Todos los derechos reservados.
C:\Users\YonePC\WebstormProjects\ATLAS>node -v
v8.9.0
If I execute index.html it says on the developer console:
'Uncaught SyntaxError: Unexpected identifier'
And the line being said is:
import CoreUtils from 'base/core/core.utils';
If I try to redo the imports with IDE's help, this is the result:
After executing the updated index.html:
viewers_upload.js:5 Uncaught SyntaxError: Unexpected identifier
And the line referenced is:
import HelpersLut from "../../src/helpers/helpers.lut";
If I try to use the web CDN library version with:
I need to delete all imports and use the web library version's classes as follows:
I can execute the index.html and trigger the loader:
However I can not do it infinitely because of the class to parseUrl is being on the disk library and not in the web library:
The console says:
'Uncaught ReferenceError: CoreUtils is not defined
at HTMLInputElement.readMultipleFiles (viewers_upload.js:429)
readMultipleFiles # viewers_upload.js:429'
Could you help me please?
Thank you for your time reading this.
EDIT: I am still trying to get that example working on local. So far I have been able to include AMI library's files linking for example:
viewers_upload.js
let dataUrl = CoreUtils.parseUrl(evt.target.files[i].name);
Instead of the normal import generated by the IDE:
import CoreUtils from "../../src/core/core.utils";
Using a direct load:
index.html
<script src="../../src/core/core.utils.js"></script>
However I can not keep doing this infinitely because of the core.utils.js uses import so then the browser reports an error:
Uncaught SyntaxError: Unexpected identifier
In line:
import Validators from './core.validators';
Could you help me please???
To run an example you should:
start dev server: yarn example <example name> (in your case yarn example viewers_upload)
go to localhost:8081 in your web browser

Resources