How to push to netlify in production mode [Nuxt JS] - vue.js

I have my app created with nuxt js. I just want to push my app on Netlify.
So firstly i configure my deploy settings :
Repository on git
Base directory : Not set
Build command npm run build && npm run start
Publish directory .nuxt/dist
My app is build correctly but npm run start just launch on localhost:3000
I decided to modify config Host, I don't know if it's the best solution ?
{
"name": "app-nuxt",
"version": "1.0.0",
"description": "My remarkable Nuxt.js project",
"author": "wyllisMonteiro",
"private": true,
"config": {
"nuxt": {
"host": "https://mywebsite.com"
}
},
"scripts": {
"dev": "HOST=localhost PORT=3000 nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"test": "jest"
},
"dependencies": {
"#nuxtjs/axios": "^5.3.6",
"cookieparser": "^0.1.0",
"cross-env": "^5.2.0",
"js-cookie": "^2.2.0",
"nuxt": "^2.4.0",
"vee-validate": "^2.2.0",
"vuelidate": "^0.7.4",
"vuetify": "^1.5.5",
"vuetify-loader": "^1.2.1"
},
"devDependencies": {
"#vue/test-utils": "^1.0.0-beta.27",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^24.1.0",
"coffee-loader": "^0.9.0",
"coffeescript": "^2.4.0",
"jest": "^24.1.0",
"node-sass": "^4.11.0",
"nodemon": "^1.18.9",
"pug": "^2.0.3",
"pug-plain-loader": "^1.0.0",
"sass-loader": "^7.1.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vue-jest": "^3.0.3"
}
}
I want to launch in localhost:3000 by executing npm run dev
AND https://mywebsite.com by executing npm run start
Can you tell me if there is some modifications in my package.json or in my deploy settings on Netlify

For anyone that stumbles across this in the future, the problem you're experiencing is due to a misunderstanding with what services Netlify offers.
Specifically, they are primarily a static site host, which means they will host your built files, and serve them for you. They will not run your server, which means nuxt start will not run.
Instead, you should be using nuxt generate to generate the static files of your app, and telling Netlify where the output folder is.
For example, the "build settings" on Netlify:
Repository github.com/example/example
Base directory Not set
Build command npm run generate
Publish directory dist
This will properly deploy a Nuxt app, assuming you haven't changed the default build folder. For clarification, the .nuxt folder contains both client and server files, and can only be used when running your own Nuxt server on an instance of some kind.

As it looks you need to tweak your deployment command. Go to Netlify and try changing it to npm install; npm run build. This should resolve the problem.

Related

Unable to start a micro front-end app in single-SPA application

I am facing error while trying to start sub-app in Single-SPA application. Basically, I am trying to develop a kind of util app (sub app in Single-SPA) which contains Sockjs, Stomp-client etc. I have removed node modules and package-lock.json and installed node modules again. When I try to start application I am facing below error.
Error:
[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
- options has an unknown property 'firewall'. These properties are valid:
object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, setupExitSignals?, static?, watchFiles?, webSocketServer? }
- options.client has an unknown property 'host'. These properties are valid:
object { logging?, overlay?, progress?, webSocketTransport?, webSocketURL? }
Command used for running the app : npm start
package.json
{
"name": "#sudeep/livedoc",
"scripts": {
"start": "webpack serve",
"start:standalone": "webpack serve --env standalone",
"build": "webpack --mode=production",
"analyze": "webpack --mode=production --env analyze",
"lint": "eslint src --ext js,ts,tsx",
"format": "prettier --write .",
"check-format": "prettier --check .",
"prepare": "husky install",
"test": "cross-env BABEL_ENV=test jest --passWithNoTests",
"watch-tests": "cross-env BABEL_ENV=test jest --watch",
"coverage": "cross-env BABEL_ENV=test jest --coverage"
},
"devDependencies": {
"#babel/core": "^7.14.6",
"#babel/eslint-parser": "^7.14.7",
"#babel/plugin-transform-runtime": "^7.14.5",
"#babel/preset-env": "^7.14.7",
"#babel/preset-typescript": "^7.14.5",
"#babel/runtime": "^7.14.6",
"babel-jest": "^27.0.5",
"concurrently": "^6.2.0",
"cross-env": "^7.0.3",
"eslint": "^7.29.0",
"eslint-config-prettier": "^8.3.0",
"eslint-config-ts-important-stuff": "^1.1.0",
"eslint-plugin-prettier": "^3.4.0",
"husky": "^6.0.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^27.0.5",
"jest-cli": "^27.0.5",
"prettier": "^2.3.2",
"pretty-quick": "^3.1.1",
"ts-config-single-spa": "^2.0.1",
"typescript": "^4.3.4",
"webpack": "^5.40.0",
"webpack-cli": "^4.7.2",
"webpack-config-single-spa": "^4.0.0",
"webpack-config-single-spa-ts": "^2.2.2",
"webpack-dev-server": "^3.11.2",
"webpack-merge": "^5.8.0"
},
"dependencies": {
"#types/jest": "^26.0.23",
"#types/systemjs": "^6.1.0",
"#types/webpack-env": "^1.16.0",
"fast-json-patch": "3.0.0-1",
"rxjs": "6.6.0",
"stompjs": "2.3.3",
"sockjs-client": "1.5.0"
}
}
I resolved this problem by updating "webpack-config-single-spa-ts" from 2.0.0 to 3.0.0.
The firewall option has been renamed as of webpack-dev-server v4.0.0-rc.0
You should use allowedHosts instead of firewall.
This problem has been fixed in version 4.0.0 of webpack-config-single-spa
, so upgrading this package will fix your issue as well.
I had the same situation in React.
The package.json file for the project had:
"webpack-config-single-spa-react": "2.0.0",
Therefore, when I executed
npm i
npm installed the exact required version of this component (2.0.0). It is possible to verify the installed version, if you look under
./node_modules/webpack-config-single-spa-react/package.json
I manually deleted the folder webpack-config-single-spa-react.
Edited the package.json in my project to request a version above 3.0.0:
"webpack-config-single-spa-react": "^3.0.0",
executed "npm install"
verified that at least version 3.0.0 of the package was installed by looking at:
./node_modules/webpack-config-single-spa-react/package.json
The actions above resolved the problem.
Modify in your package.json this module webpack-dev-server to 4.0.0-beta.0 and rebuild.
My versions:
packages

Different svelte variable value for npm run dev and npm run build

I'm developing a svelte+tailwind+PHP site with rollup.js. How can I set a variable in the svelte source files depending on if I'm running npm run dev or npm run build? I'd like the different builds to connect to different back-end servers.
This is my package.json in case that's relevant. I'm new to most of these tools, so please bear with me and correct me if I've misunderstood too much. After running npm run build, I run a script that scp's the build folder to the production server.
{
"name": "my-app",
"version": "1.0.0",
"scripts": {
"watch:tailwind": "postcss public/tailwind.css -o public/index.css -w",
"build:tailwind": "NODE_ENV=production postcss public/tailwind.css -o public/index.css",
"dev": "run-p autobuild watch:tailwind",
"build": "npm run build:tailwind && rollup -c",
"start": "sirv public --single --host",
"start:dev": "sirv public --single --dev",
"autobuild": "rollup -c -w"
},
"devDependencies": {
"#rollup/plugin-commonjs": "^16.0.0",
"#rollup/plugin-node-resolve": "^10.0.0",
"autoprefixer": "^10.0.4",
"d3-interpolate": "^2.0.1",
"npm-run-all": "^4.1.5",
"postcss": "^8.1.10",
"postcss-cli": "^8.3.0",
"postcss-nested": "^5.0.1",
"postcss-reporter": "^7.0.2",
"rollup": "^2.3.4",
"rollup-plugin-css-only": "^3.0.0",
"rollup-plugin-livereload": "^2.0.0",
"rollup-plugin-svelte": "^7.0.0",
"rollup-plugin-terser": "^7.0.0",
"svelte": "^3.0.0",
"svelte-dnd-action": "^0.6.22",
"svelte-loading-spinners": "^0.1.1",
"tailwindcss": "^2.0.1"
},
"dependencies": {
"sirv-cli": "^1.0.0"
}
}
You can use #rollup/plugin-replace:
A Rollup plugin which replaces strings in files while bundling.
plugins: [
replace({
// alternatively, one could pass process.env.NODE_ENV or 'development` to stringify
'process.env.NODE_ENV': JSON.stringify('production')
})
]

vue-CLI outputting very concerning error (security question)

I'm building an application with Vue.js. Suddenly, vue-cli has begun outputting errors that have me concerned that perhaps one or more of my dependencies has something nefarious in it.
When I run npm run serve (vue-cli serve), the command succeeds, but outputs several lines of error messages like the following:
(node:366423) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, stat '/initrd.img'
It also fails to stat /home/jordan/.steampath, /initrd.img.old, /vmlinuz, and /vmlinuz.old.
It also sometimes outputs these lines when hot-reloading.
I'm concerned because it seems there should be ZERO reason for it to even try to stat kernel files or my steampath. It seems to be looking at things it shouldn't need to (but is apparently being prevented from doing so).
Should I be concerned about security? Is this evidence that I'm using a vue or NPM plugin with nefarious code in it? Or is this a simple misconfiguration somewhere?
Here's my package.json:
{
"name": "pp10-client",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#sentry/browser": "^5.15.5",
"#sentry/integrations": "^5.15.5",
"#tinymce/tinymce-vue": "^2.1.0",
"apexcharts": "^3.19.2",
"axios": "^0.19.2",
"blueimp-md5": "^2.16.0",
"core-js": "^2.6.11",
"filepond": "^4.13.6",
"moment": "^2.26.0",
"npm-cache": "^0.7.0",
"pdfjs": "^2.3.7",
"pdfjs-dist": "^2.3.200",
"save": "^2.4.0",
"sortablejs": "^1.10.2",
"tinymce": "^5.3.0",
"underscore": "^1.10.2",
"v-calendar": "^1.0.8",
"v-tooltip": "^2.0.2",
"vue": "^2.6.11",
"vue-apexcharts": "^1.5.3",
"vue-color": "^2.7.1",
"vue-filepond": "^5.1.3",
"vue-js-modal": "^1.3.35",
"vue-js-toggle-button": "^1.3.3",
"vue-phone-number-input": "^1.1.9",
"vue-router": "^3.2.0",
"vue-stepper-component": "^1.0.0",
"vue-tour": "^1.3.1",
"vue-worker": "^1.2.1",
"vuedraggable": "^2.23.2",
"vuex": "^3.4.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.12.1",
"#vue/cli-plugin-eslint": "^3.12.1",
"#vue/cli-service": "^3.12.1",
"babel-eslint": "^10.1.0",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.2.3",
"pug": "^2.0.4",
"pug-plain-loader": "^1.0.0",
"sass": "^1.26.5",
"sass-loader": "^7.3.1",
"stylus": "^0.54.7",
"stylus-loader": "^3.0.2",
"vue-template-compiler": "^2.6.11"
}
}
EDIT: Solution:
Removed nodejs and npm, deleted all associated folders, and reinstalled nodejs and npm by using nvm (node version manager). I chose the current version of node (14 as of this writing).
Removed node_modules and package-lock.json within the project.
Ran npm install (in project folder)
Installed vue-cli globally: npm install -g #vue/cli
When builds failed, followed prompts to install missing dependencies.
FINALLY it worked.
facing the same issue with nuxt.js, audit does not mention anything regarding this. Howto find the npm module? String steam is not present, likely obfuscated as bytearray or else
On Ubuntu 20.04, upgrading to node 12.18.3 and running npm rebuild node-sass solved the problem for me.
Make sure you use the latest dependencies in your package.json (manually check on npmjs.com or your npm registry)
Delete the entire node modules dir and package-lock.json, and then running npm install helped me.

Google Cloud Function: Dependency not found

I am developing a project on Nuxt that I am deploying as a Google Cloud Function. (I Chose this as I am using a Cloud Firestore for my data storage)
It all works very nicely so far (Except the cold start time is persistently high - about 6 seconds but I think that is a separate matter). However, I keep getting this WARN in the logs on my Cloud Function:
textPayload: " WARN The dependency eslint not found. Please run yarn add eslint --dev or npm install eslint --save-dev"
There is nothing in the error to suggest where it is requiring eslint or why. This does not happen when I run my code or deploy locally.
My package.json looks like this:
{
"name": "functions",
"description": "Cloud Functions for Firebase",
"scripts": {
"serve": "firebase serve --only functions",
"shell": "firebase functions:shell",
"start": "nuxt start",
"deploy": "firebase deploy --only functions",
"logs": "firebase functions:log"
},
"engines": {
"node": "10"
},
"dependencies": {
"#nuxtjs/axios": "^5.9.7",
"#nuxtjs/eslint-config": "^2.0.0",
"#nuxtjs/eslint-module": "^1.1.0",
"#nuxtjs/vuetify": "^1.10.3",
"cookieparser": "^0.1.0",
"firebase": "^7.13.2",
"firebase-admin": "^8.6.0",
"firebase-functions": "^3.3.0",
"js-cookie": "^2.2.1",
"jwt-decode": "^2.2.0",
"nuxt": "^2.12.2",
"nuxt-client-init-module": "^0.1.8",
"nuxt-start": "^2.11.0",
"vuetify": "^1.0.0",
"selectiveSSR": "file:./local-modules/selective-ssr",
"shortid": "^2.2.15",
"sortablejs": "^1.10.2",
"vue-moment": "^4.1.0",
"vue-uuid": "^1.1.1",
"vuex-persistedstate": "^3.0.1"
},
"devDependencies": {},
"private": true
}
The Warning suggests it is looking for a dev-dependency. Surely I don't need these in my package.json? (Even if I add it in I still see the warning). There are references to the eslint package in my package-lock.json (which makes sense as I guess the nuxtjs/eslint packages in my package.json need it) but:
The link to the gzipped eslint NPM in package-lock.json works OK when I access it in my browser
Should Google not be using its Package Cache anyway to speed up the cold start? Is the issue that the specific version of eslint package-lock.json refers to is not available in Google's local package cache?
And yes I have tried adding eslint to my dependencies and devDependencies and it makes no difference.

NPM auto-install gulp components

I'm setting up gulp to do tasks to my JS files in a legacy .NET WebForms project. I have installed NPM, which I then used to install Gulp, and I can successfully run gulp which executes my gulpfile.js. Now I have dependencies to install using npm, like gulp-concat, gulp-uglify, etc. I don't want every developer who opens the solution to have to type "npm install xlibrary" for every dependency. Is there a way to have npm install a list of dependencies, perhaps through a config file (I think VS 2015 does it this way)?
Create package.json file containing
{
"name": "my-web-app",
"description": "Hello world app",
"version": "1.0.0",
"private": true,
"dependencies": {
"bower": "^1.4.1",
"del": "^1.2.0",
"gulp": "^3.9.0",
"gulp-add-src": "^0.2.0",
"gulp-concat": "^2.6.0",
"gulp-csso": "^1.0.0",
"gulp-filter": "^2.0.2",
"gulp-main-bower-files": "^1.2.0",
"gulp-rename": "^1.2.2",
"gulp-ruby-sass": "^1.0.5",
"gulp-sourcemaps": "^1.5.2",
"gulp-typescript": "^2.7.8",
"gulp-uglify": "^1.2.0"
}
}
In that file you write out all the dependancies, so then developer just types "npm install" and npm gets all needed packages.