How to run a Nuxt.js application - vue.js

I am a junior developer at a Digital Agency. I have been assigned a task to work on a website that is built using vue.js and nuxt.js. Problem is, I don't know how to run the application. I have been looking into the code base and found out that there is an index.vue page which opens up the application. However, no matter how many times i've trouble shooted npm commands, there seems to be progress made on the server side to render the application. Essentially I am trying to run the application on the server side but I have been unable to despite following along with any tutorials.
What I have tried: npm run dev(after installing npm install/npm install nuxt)
The following is the error I have got:
FATAL Expected parameter accessToken 12:15:36
at Module.createClient (node_modules/contentful/dist/contentful.node.js:5745:11)
at createClient (plugins/contentful.js:5:23)
at nuxt.config.js:11:55
at jiti (node_modules/jiti/dist/jiti.js:1:196506)
at Object.loadNuxtConfig (node_modules/#nuxt/config/dist/config.js:1082:15)
at loadNuxtConfig (node_modules/#nuxt/cli/dist/cli-index.js:338:32)
at NuxtCommand.getNuxtConfig (node_modules/#nuxt/cli/dist/cli-index.js:463:26)
at Object._listenDev (node_modules/#nuxt/cli/dist/cli-dev.js:75:30)
at Object.startDev (node_modules/#nuxt/cli/dist/cli-dev.js:58:25)
at Object.run (node_modules/#nuxt/cli/dist/cli-dev.js:52:16)
───────────────────────────────────────────────╮
│ │
│ ✖ Nuxt Fatal Error │
│ │
│ TypeError: Expected parameter accessToken │
│ │
╰───────────────────────────────────────────────╯
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! snaffle#1.0.0 dev: `nuxt`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the snaffle#1.0.0 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! /Users/allenmathews/.npm/_logs/2022-06-01T02_15_36_473Z-debug.log
I am new to nuxt and I am also new to vue.js. I am sorry if this is a silly question but I have been trying to render the application locally for over 2 days now. Any replies is much appreciated.
I have also changed the package.json file to include `"start": "nuxt start" based on someone elses answers I found to troubleshoot this issue.
The following is the copy of my package.json file:
{
"name": "snaffle",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"export": "nuxt export",
"serve": "nuxt serve",
"static": "export NODE_OPTIONS=--max-old-space-size=6144 && nuxt build && nuxt export",
"generate": "export NODE_OPTIONS=--max-old-space-size=6144 && nuxt generate",
"lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
"lint": "yarn lint:js",
"test": "jest"
},
"dependencies": {
"#contentful/rich-text-html-renderer": "^14.1.1",
"#dansmaculotte/nuxt-segment": "^0.2.11",
"#nuxtjs/axios": "^5.11.0",
"#nuxtjs/markdownit": "^1.2.10",
"#nuxtjs/robots": "^2.4.2",
"#nuxtjs/sitemap": "^2.4.0",
"contentful": "^7.14.6",
"contentful-rich-text-vue-renderer": "^2.0.1",
"friendly-querystring": "^0.2.0",
"fuzzysort": "^1.1.4",
"hammerjs": "^2.0.8",
"lodash": "^4.17.15",
"nuxt": "^2.15.8",
"nuxt-lazy-load": "^1.2.6",
"nuxt-typeform": "^0.0.1",
"v-mask": "^2.2.3",
"vue-confetti": "^2.2.1",
"vue-headroom": "^0.10.1",
"vue-js-modal": "^2.0.0-rc.6",
"vue-scrollto": "^2.18.2",
"vue2-hammer": "^2.1.2",
"vuex-persist": "^2.2.0"
},
"devDependencies": {
"#babel/plugin-proposal-optional-chaining": "^7.14.5",
"#nuxtjs/eslint-config": "^3.0.0",
"#nuxtjs/eslint-module": "^2.0.0",
"#nuxtjs/style-resources": "^1.0.0",
"#vue/test-utils": "^1.0.3",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.0.1",
"eslint": "^7.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-nuxt": "^1.0.0",
"eslint-plugin-prettier": "^3.1.4",
"jest": "^26.0.1",
"less": "^3.11.3",
"less-loader": "^6.1.2",
"nuxt-compress": "^5.0.0",
"prettier": "^2.0.5",
"pug": "^3.0.0",
"pug-plain-loader": "^1.0.0",
"vue-jest": "^3.0.4",
"vue-svg-loader": "^0.16.0"
}
}
Thank you so much to anyone who has replied.

Command you used to run Nuxt is wrong.
In package.json change
"dev": "nuxt" to: "dev": "nuxt dev"
And run npm run dev will run app.

I'm not sure I fully understand the question, but it looks like you have trouble running the project on the server, for that there is two ways to do this:
1.using generate mode of nuxt (easier and fastest way)
The only thing u need is run this command in your project :
Npm run generate
When the generate is completed then u will see a new folder named dist ,after that upload dists content to the /public_html/ and it’s done ✅
Ps: If you are not familiar with htaccess and how to run the nuxt project, the contents of the .htaccess file may also be useful for u :
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
DirectoryIndex 200.html
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /200.html [L]
2.building up your project
In this scenario, first install node on your server and then enter the following command via ssh in the folder where the nuxt project is located:
Npm run build
But do not forget, since you are using the node to run the project on the server, you must also assign a port to it, for this the information inside your htacces file must be look like this :
RewriteEngine On
RewriteCond %{HTTP:Authorization} .
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
DirectoryIndex disabled
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
RewriteRule ^$ http://127.0.0.1:3108/ [P,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ http://127.0.0.1:3108/$1 [P,L]
As u can see 3108 is a custom port that i used for my project
Finally, in order for the node library to display your project on a specific port, it needs to be activated. You can use pm2 to do this:
Pm2 start
Ps: if you dont know how to install node and pm2 to your server ,run these commands via ssh in your server:
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash
source ~/.bash_profile
nvm install 12
npm install -g pm2

Related

Deploying Nuxt SSR on CPanel

I am trying to deploy a nuxt app to cpanel shared hosting. It is working fine on my local machine using run dev, build and start.
However, when I moved the files to cpanel. I can run npm dev, build, and start. When I use npm run dev, an IP and port was generated, I visited this IP and port on my browser but its not working.
How can I make this IP work as well as make the app work with my domain.
for run nuxt ssr in cpanel you can use below code and install pm2 in your project:
1-package.json:
"config": {
"nuxt": {
"host": "0.0.0.0",
"port": "customport"
}
},
"scripts": {
"dev": "nuxt --host yourdomain --port customport",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"deploy": "/opt/cpanel/ea-nodejs10/bin/pm2 start /opt/cpanel/ea-nodejs10/bin/npm --name yourpm2name -- start"
},
2-.htaccess file
RewriteEngine On
RewriteCond %{SERVER_PORT} 443
RewriteRule ^index.php(.*) http://yourdomain::customport/$1 [P,L]
RewriteRule (.*) http://yourdomain:customport/$1 [P,L]
3- run this code: npm run build
4- and then: pm2 start yourpm2name

How to set a project's package.json to be able to install from local registry with verdaccio

I am learning microservices with docker and kubernetes by simple project, now I am trying to use local registry installed as a docker container with helm. I published my package/library in my local registry (I am using verdaccio) and successfully installed it on my current project with command "npm install #mycompany/mylibs --registry=http://localhost:4873". My problem is when I am trying to deploy my project to kubernetes via skaffold, it fails to download the packages from package.json config file. I tried both setting up .npmrc file to project's root folder and default registry on verdaccio conf file but all fail. Is there anyone has encountered same problem as mine and how to fix it. Somebody help please. Thank you
This is my project structure :
MyProject
|-auth (this service has dependency to #mycompany/mylibs)
| |-src
| |-Dockerfile
| |-package.json
|
|-infra/kube
| |-auth-depl.yaml
| |-ingress-srv.yaml
MySharedLibrary
| |-src
| |-package.json
auth's package.json :
{
"name": "auth",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "ts-node-dev src/index.ts",
"test": "jest --watchAll --no-cache"
},
"jest": {
"preset": "ts-jest",
"testEnvironment": "node",
"setupFilesAfterEnv": [
"./src/test/setup.ts"
]
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#mycompany/mylibs": "^1.0.3",
"#types/cookie-session": "^2.0.42",
"#types/express": "^4.17.9",
"#types/jsonwebtoken": "^8.5.0",
"cookie-session": "^1.4.0",
"express": "^4.17.1",
"express-async-errors": "^3.1.1",
"express-validator": "^6.7.0",
"jsonwebtoken": "^8.5.1",
"mariadb": "^2.5.1",
"mysql2": "^2.2.5",
"sequelize": "^6.3.5",
"ts-node-dev": "^1.0.0",
"typescript": "^4.1.2"
},
"devDependencies": {
"#types/jest": "^26.0.19",
"#types/supertest": "^2.0.10",
"jest": "^26.6.3",
"supertest": "^6.0.1",
"ts-jest": "^26.4.4"
}
}
I am using:
Windows 10 PC as main host for docker and where the project hosted.
docker version 19.03.13
npm version 6.14.6
verdaccio 4.12.0
helm 3.5.3
skaffold 1.13.0
The error message after I deploy my project with skaffold dev :
npm ERR! 404 Not Found - GET https://registry.npmjs.org/#mycompany%2fmylibs - Not found
npm ERR! 404
npm ERR! 404 '#mycompany/mylibs#^1.0.3' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 It was specified as a dependency of 'app'
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
I want my deployment process each container could find all required dependencies on local registry (http://localhost:4873) and when it couldn't find them, it should try to reach public npm (https://registry.npmjs.org or npmjs.com).
Thanks everyone for helping me, I solved this problem by reconfiguring my Dockerfile on auth service by adding line:
RUN npm config set registry http://<the_local_registry_container_IP>:4873
I am successful building the container but it raised new issues "request has been deprecated, see github.com/request/request/issues/3142" cause of I am using supertest. I don't know why I am still searching for the main problem. In another occasion if I build it with public npm repo, it doesn't raise that problem.
You need to associate the scope with your registry:
npm login --registry=http://localhost:4873 --scope=#mycompany
You can find the documenation here
After this npm install install package from you repository if the package is in the scope #mycompany

NPM: 403 forbidden - PUT http://registry.npmjs.org/[package-name] - Forbidden

I am trying to create npm vue component library. I have been working through all the steps but stuck at npm publish.
Please see the below error screenshot for which I am unable to find a solution on google after trying more than an hour(The error message is not that accurate IMHO or maybe I am not able to catch it).
For reference package.json
{
"name": "#satyam/vue-components",
"version": "0.1.0",
"main": "./dist/satyam.common.js",
"files": [
"dist"
],
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build-library": "vue-cli-service build --target lib --name satyam ./src/components/index.js",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.4",
"vue": "^2.6.11"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.3.0",
"#vue/cli-plugin-eslint": "~4.3.0",
"#vue/cli-plugin-unit-jest": "~4.3.0",
"#vue/cli-service": "~4.3.0",
"#vue/eslint-config-standard": "^5.1.2",
"#vue/test-utils": "1.0.0-beta.31",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^6.2.2",
"node-sass": "^4.12.0",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
}
}
After running npm audit
Any help will be appreciated :)
Update: New user needs to confirm their account first
So after quite a few research and digging around, I found the real issue here.
It's probably documented somewhere very deep or in a light font, but I totally missed to find it.
Your package name should follow your npm username.
In my package.json name property is #satyam/vue-components where it should be #satyamninja/vue-components and that's it. I successfully published the package.
If you are a new user, please confirm your account first!
This post has helped me moving past the 403 error, however, after confirming my account over the email link they send and after login into NPM I tried one more time, then I got the following error:
402 Payment Required - PUT https://registry.npmjs.org/#jcarbajal79%2fsimplelib3 - You must sign up for private packages.
If you have the same problem is because the library is being published as private, I checked my package.json and test the following:
No property: "private":"...". - does not work
Property set "private":"true" - does not work
Property set "private":"false" - does not work
Turns out you have to publish it as public from the command line:
%> npm publish --access=public. - Works!.
It sound like you are a new user. You need to confirm your account. Should have get email confirmation from npm site.
I got this error once and I figured out how to fix it after some search. you are getting the 403 forbidden error because there is possibly another package published on NPM with the same name as the one you are trying to publish, you will have to change that to another name. to do so, you can go to your package.json and edit the name of the package.
If the answers mentioned above not working for anyone then you need to check if your email is verified with the npm account or not, If it's not verified just do the verification and you will be able to publish without any issues.
This also happens because the name you gave the component in the name attribute found in package.json already exists in npm, I recommend giving the component a different name that doesn't exist.
I had the same error and was able to resolve by logging into npmjs.com from the command line i.e.
npm login
Username: *******
Password:
Email: (this IS public) *******#***.***
npm notice Please check your email for a one-time password (OTP)
Enter one-time password: 49720564
Logged in as ******* on https://registry.npmjs.org/.
Running npm publish then succeeded and I could see my package in my account.

My npm module seems to be partially disappearing after a while

I have tried over and over and over to find a solution, but I seriously can not understand what is going on.
$ npm -v
6.5.0
$ node -v
v10.10.0
My package.json pulls in the followin dependencies:
{
"private": true,
"scripts": {
"dev": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"tests": "phpunit --testdox"
},
"devDependencies": {
"laravel-mix": "^3.0.0",
"lodash": "^4.17.11",
"purifycss-webpack": "^0.7.0",
"tailwindcss": "^0.7.2",
"webpack": "^3.12.0"
},
"dependencies": {
"#bugsnag/js": "^5.1.0",
"#bugsnag/plugin-vue": "^5.1.0",
"axios": "^0.17.1",
"babel-preset-es2015": "^6.24.1",
"blueimp-md5": "^2.10.0",
"clientjs": "^0.1.11",
"css-loader": "^0.28.11",
"dotenv": "^6.2.0",
"glob-all": "^3.1.0",
"js-cookie": "^2.2.0",
"laravel-echo": "^1.4.1",
"libphonenumber-js": "^1.6.9",
"md5": "^2.2.1",
"moment": "^2.22.2",
"postcss-import": "^11.1.0",
"purgecss-webpack-plugin": "^1.4.0",
"purify-css": "^1.2.6",
"pusher-js": "^4.3.1",
"qs": "^6.6.0",
"vee-validate": "^2.1.3",
"vue": "^2.5.17",
"vue-i18n": "^8.3.2",
"vue-router": "^2.8.1",
"vue-wysiwyg": "^1.7.2",
"vuex": "^3.0.1"
}
}
I can do an npm run dev 'x' times without any issue, when all of a sudden, without ever having ran another npm command, or pulled in new dependencies, or whatever, it can all of a sudden complain about a missing modules.
Module build failed: Error: Cannot find module 'es-to-primitive/es6'
This is just an example; it has been other modules as well.
My solution to this is basically:
$ rm -f -R ./node_modules/*
$ npm install
$ npm run dev
This always fixes the issue. I just don't understand why. The dependency should have been installed prior because my previous builds ran just fine. I'm running on a Macbook Pro, and I seriously have no idea what might be causing this behaviour.
On my last run, I checked node_modules/es-to-primitive and there was no es6.js file, so I understand the error, but after doing the above fix, it got that file installed. I guess I just don't understand how it can 'disappear' again after a while...
Anything I'm doing wrong or don't understand properly?
Thanks!
I hope I am not too late, but I had the exact same problem and it was driving me absolutely insane. I had to delete the node_modules directory and reinstall everything up to several times a day, and nothing I did made any difference. It then crossed my mind that iCloud Drive syncing may be causing the problem, as I had my project directory saved in ~/Documents. I tried to delete the directory from iCloud Drive and let it completely sync, and it made it somewhat better but there still were issues with some of the modules. I asked myself, there must be a way to exclude a directory from syncing? And yes, it is!
Apparently, adding .nosync to the name of a file or directory will exclude it from syncing to iCloud Drive. Earlier you could add a blank file named .nosync to any directory to exclude it, but it seems this no longer works, at least not for me on macOS 10.15.2.
With that said, I am very happy to share that renaming the node_modules directory to node_modules.nosync, and adding a link to the new directory to keep npm from complaining, seems to have solved the issue:
$ mv node_modules node_modules.nosync/ && ln -s node_modules.nosync node_modules
After doing this, I have not had to delete and reinstall the modules even once! Everything just works, just as it should.

Couldn't find preset "env" relative to directory

So far I have been unsuccessful in an attempt to use the env preset. I browsed the git issues that others have raised such as this, and implemented some of the suggestions that appeared to work for others, but no luck so far.
Here's what I'm working with:
package.json
"bundle": "browserify ./client/app.js -d -o ./public/o.js -t [ babelify --presets [ env ] ]",
"devDependencies": {
"#babel/cli": "^7.0.0-beta.40",
"#babel/preset-env": "^7.0.0-beta.40",
"babel-core": "^6.26.0",
"babelify": "^8.0.0"
...
And here is the error:
Error: Couldn't find preset "env" relative to directory "/Users/user/Documents/git/ts/client" while parsing file: /Users/user/Documents/git/ts/client/app.js
Anything I could be missing?
Many of the github issues relating to this suggest that babel-preset-env is not installed.
Indeed it doesn't seem to be there in your package.json. Add & install it by doing this:
npm install babel-preset-env --save
Though the earlier answers do provide the right solution and it works. But this should be installed as a dev dependency not as the core one. As this is needed only for development work. If you are using npm you can use:
npm install --save-dev babel-preset-env
or if you are using yarn as package manager then use:
yarn add --dev babel-preset-env
You just need to install babel-preset-env and your code will compile properly.
npm install babel-preset-env
Basically, this type of error occurs due to mismatch in versions of babel-core, babel-preset-env and babel-loader. Below are matched and tested devDependencies, which worked for me.
"devDependencies": {
"#babel/core": "^7.11.6",
"#babel/preset-env": "^7.11.5",
"babel-loader": "^8.1.0",
"html-webpack-plugin": "^4.5.0",
"install": "^0.13.0",
"npm": "^6.14.8",
"regenerator-runtime": "^0.13.7",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"babel-polyfill": "^6.26.0"
}
You can check whether .babelrc file exists in the directory above or above the directory. Just delete the file is OK