package.json: adding multiple scripts into one script - package.json

"scripts": {
"deploy": "vue-cli-service ftpdeploy --genHist --diffFileOnly --ftpCfgPath /ftpdeploy/ --ftpHistPath /ftpdeploy/",
"serve": "vue-cli-service serve && deploy",
"build": "vue-cli-service build"
},
I am trying to automatically deploy via ftp code when ever vue serve is ran.
Is this the correct syntax as I am getting errors, what would be the correct way?

"scripts": {
"deploy": "vue-cli-service ftpdeploy --genHist --diffFileOnly --ftpCfgPath /ftpdeploy/ --ftpHistPath /ftpdeploy/",
"serve": "vue-cli-service serve && npm run deploy",
"build": "vue-cli-service build"
},

Related

how to run a vue js 2 app with pm2 library in linux(RHEL)?

I have a vue js app, which i run it locally with npm run serve command.
I am trying to run it in a development linux ( RHEL) box with pm2 library, but it doesn't start the application. how exactly to configure my project to run with pm2? my package.son file is below
{
"name": "app",
"version": "0.1.0",
"scripts":{
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"vue": "^2.6.14",
...
}
}

Azure Nuxt not found

I've a problem when I generate a website in Node.js
I've a WebApp On Linux, the Pipeline success, the release success, but when I go to the site, returns
:( Application Error
Looking in the logs, returns "Nuxt not found".
What's the problem?
"scripts": {
"dev": "nuxt -o",
"dev:e2e": "cypress open",
"build": "nuxt build --modern",
"start": "nuxt start",
"generate": "nuxt generate --modern",
"generate:dev": "cross-env ENV_DEV=true nuxt generate --modern",
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs",
"lint:eslint": "eslint --fix",
"lint:stylelint": "stylelint --fix",
"lint:markdownlint": "markdownlint",
"lint:prettier": "prettier --write --loglevel warn",
"lint:all:eslint": "yarn lint:eslint --ext .js,.vue .",
"lint:all:stylelint": "yarn lint:stylelint \"**/*.{vue,scss}\"",
"lint:all:markdownlint": "yarn lint:markdownlint \"docs/*.md\" \"*.md\"",
"lint:all:prettier": "yarn lint:prettier \"**/*.{js,json,css,scss,vue,html,md}\"",
"lint": "run-s lint:all:*",
"new": "hygen new"
},
If I try with a blobstorage it's ok, but I can't make the root domain go to the Blobstorage (example.com) because need a CNAME.
Method 1.
Try to add startup command. If it doesn't work, try method 2.
pm2 serve /home/site/wwwroot --no-daemon --spa
or
Usually use it in Angular Project.
npx serve -s
Method 2.
Use copy below code and paste it to package.json. Then tell me the result.
"scripts": {
"dev": "nuxt",
"build": "nuxt build --modern",
"start": "nuxt start",
"generate": "nuxt generate --modern",
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs",
"lint:eslint": "eslint --fix",
"lint:stylelint": "stylelint --fix",
"lint:markdownlint": "markdownlint",
"lint:prettier": "prettier --write --loglevel warn",
"lint:all:eslint": "yarn lint:eslint --ext .js,.vue .",
"lint:all:stylelint": "yarn lint:stylelint \"**/*.{vue,scss}\"",
"lint:all:markdownlint": "yarn lint:markdownlint \"docs/*.md\" \"*.md\"",
"lint:all:prettier": "yarn lint:prettier \"**/*.{js,json,css,scss,vue,html,md}\"",
"lint": "run-s lint:all:*",
"new": "hygen new"
},
In nuxt.config.js.
server: {
port: process.env.PORT, // default: 3000
host: '0.0.0.0' // default: localhost
},
How to deploy nuxt(nuxt.js) in azure(web app)? (not found module)
It's solved
The problem was in the release.
WebApp Service is in PHP 7.4, so, the release (Job Azure Service Deploy) in the dropdown "Runtime Stack" needs to be in PHP 7.4

React command on yarn start and also init server with same command

I'm trying to attach another command to yarn start. I'm not sure if it is possible but when I run command yarn start I want my react app to start and I also want to fire up my server at the same time.
What I do know is use 2 terminals one with react app directory and call on yarn start
C:\Users\ivanr\Documents\GitHub\bees\business-scheduler>
and one with server directory (which is inside react app directory) and call on node src/index.js
C:\Users\ivanr\Documents\GitHub\bees\business-scheduler\server>
"scripts": {
"start": "react-scripts start", // is it possible that I can say in server directory run node src/index.js here?
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
You can use concurrently
First install it
$ npm install concurrently
Then use it in your command
"scripts": {
"start": "concurrently \"yarn start-client\" \"yarn start-server\"",
"start-client": "react-scripts start",
"start-server": "cd .\server && node src/index.js"
}
You can use npm-run-all
"scripts": {
"clean": "rimraf dist",
"lint": "eslint src",
"build": "babel src -o lib"
}
npm-run-all clean lint build

access to resource not allowed on login

I can access first screen for login though after it returns access not allowed to local resource
it works well in browser
( I am able to run my project in angular well in a web browser but because it is a desktop application I have to use electron, when I build to run in electron, it starts well, displays login but when I press login instead of returning display it return a white screen and in console, access to resource not allowed
main.js
win.loadURL(url.format({
pathname: path.join(__dirname, './angular_build/index.html'),
protocol:'file:',
slashes: true
}));
package.json
"version": "0.0.0",
"main": "main.js",
"build": {
"directories": {
"output": "release/"
}
},
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"electron": "electron .",
"electron-build": "ng build --prod && electron ."
},

Building Electron Application with electron-builder in Angular 5

I am creating an electron application that is utilizing an Angular 5 application as the front end. I am able to run the application in a development mode by running npm run build && electron . to trigger the electron instance and load up the angular site. However, when building using npm run dist based on the documentation, it will not allow me to reference the files or it is not able to read asar file or I might be doing something wrong, I am totally clueless here. When I install application running .exe file I totally see blank screen.
Here are the some code snippets of package.json and electron-main.js
package.json
"version": "0.0.0",
"license": "MIT",
"main": "electron-main.js",
"build": {
"appId": "com.example.Dashboard",
"productName": "Dashboard",
"win": {
"target": [
"nsis"
]
},
"nsis": {
"runAfterFinish": true
}
},
"scripts": {
"ng": "ng",
"start": "ng serve",
"pack": "electron-builder --dir",
"dist": "electron-builder",
"postinstall": "install-app-deps",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"electron": "electron .",
"electron-build": "ng build --prod && electron ."
},
electron-main.js
win.loadURL(url.format({
pathname: __dirname + '/dist/index.html',
protocol: 'file:',
slashes: true
}))
Finally struggling a lot and breaking head found a solution. First thing Electron-builder is not building files in the required location there are open bug issues in the GitHub.
You can refer these links for more
1.Build Process Ignores app/dist/ folder?
2.Not all files in /app are packaged.
Usually in ReactJs and all they are using two package.json files to avoid confusion, and they are writing a lot webpack code.
There is a work around which I found.
What exactly happening here is that angular-cli is outputting build files in the dist folder. Electron builder is also outputting its files in the dist folder.
First thing I want clarify here is that If you run npm run dist electron builder is not going to build files for us.
So first you need to build files running ng build.
second you need to make changes in the package.json specifying build resources to make use of build files and you need to change electron-builder's output directory.
Modified package.json looks something like this.
"main": "electron-main.js",
"build": {
"appId": "com.example.companyDashboard",
"productName": "Farmhub Companies Dashboard",
"files": ["**/*", "dist/**/*"],
"directories": {
"output": "release",
"buildResources": "dist"
},
"asar":false,
"win": {
"target": [
"nsis"
]
},
"nsis": {
"runAfterFinish": true,
"license":"LICENSE"
}
},
"scripts": {
"ng": "ng",
"start": "ng serve",
"pack": "build --dir",
"dist": "build",
"postinstall": "install-app-deps",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"electron": "electron .",
"electron-build": "ng build --prod && electron .",
"electron-package": "electron-packager . FarmhubCompanyDashboard --platform=win32 --arch=x64"
},
If you run electron builder running command npm run dist It works like a breeze.

Resources