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
Related
"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"
},
My package.json:
"scripts": {
"ng": "ng",
"start": "node src/app.js && ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"main": "src/app-routing.module.ts"
},
I moved the devdependencies to dependencies.
Apps run locally with Heroku local web but display the only backend in the server.
Added a procfile containing web: npm start
Heroku assigns a port and the database is successfully connected. Backend works fine
My project structure: A src/ folder that has both my back end and frontend files.
I guess I am losing out on the project structure. Please help to make me display the frontend of the app instead of backend.
okay , 1)add the following to your app.js (or your server.js), and
app_path ='../www';
app.use('/api', songRoute)
app.use('/',express.static(path.join(__dirname,app_path)))
app.get('*',(req,res)=>res.sendFile(path.join(__dirname,app_path + '/index.html')))
2)To package.json add this,
"heroku-postbuild":"ng build --configuration=production",
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
I would like to autostart my node.js application and server with every boot of the Windows Server 2016 OS.
I already found "node-windows" and "qckwinsvc" as possible solutions, but I do not understand how I can start my application with the startup options I saved in the package.json provided below (e.g. host, prod, ip, max-old-space-size, etc.)
Furthermore, I would like to know if these services also restart the node application in case it crashed due to a programmatical error (e.g. javascript heap out of memory)
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod --base-href ./",
"build-dev": "ng build --base-href ./",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"app": "ng serve --host=0.0.0.0 --prod --open",
"app-dev": "ng serve --host=localhost --open",
"server": "export NODE_ENV=production && export IP=172.28.0.19 && node --max-old-space-size=4096 server/server.ts",
"server-dev": "export NODE_ENV=development && export IP=localhost && node server/server.ts",
"static": "http-server ./dist/lead -p 8080 -a 0.0.0.0 -o",
"static-dev": "~/.node/lib/node_modules/http-server/bin/http-server ./dist/lead -p 4200 -a localhost -o",
"format": "tslint --fix \"./src/app/**/*.ts\" && tslint --fix \"./server/**/*.ts\" && prettier --write \"./src/app/**/*.{ts,json,css,html}\" && prettier --write \"./server/**/*.ts\" && ng lint"
},
The perfect solution would be to autostart the server and application with all provided startup options and also restart the application in case of a crash.
Would be very thankful for any kind of help :)
dotenv is a popular library for environment params management. You can start your app like this NODE_ENV=prod node app.js and can access this value from your app like this process.env.NODE_ENV.
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.