i am trying to deploy nuxt3 app to vercel .
I get the build success as well.
But once deployment is done getting 404 error page.
nuxt.config.ts
export default defineNuxtConfig({
ssr: false,
target: 'static',
})
package.json
scripts": {
"dev": "nuxt dev",
"build": "nuxt build",
"start": "node .output/server/index.mjs",
"generate": "nuxt generate"
}
Build and deployment settings kept as it is.
Thanks!
Any help would be appreciated.
Attached image for the reference.
EDIT
The error was coming from a mistakenly imported package import anytime from 'anytime', removing it solved the issue.
You can run npx serve .output/public after yarn generate to see if it's working locally before trying to deploy anywhere.
Then for Vercel, you can either set the default value or use those.
Here is a working Github repo. Everything should be quite straightforward.
Related
I am trying to deploy a new app to Heroku using the build process on Heroku (it picks up the code changes from github and builds automatically). The client folders and package.json are in the root folder and the express files (including a separate package.json) are under /server.
{"error":"ENOENT: no such file or directory, stat '/app/build/index.html'"}
While troubleshooting this issue I launched bash and did a "dir" inside of the app directory. Sure enough, no "build" folder in root. I had overhauled a few things to separate the server's build from the main build - could I have screwed something up? Am I wrong in my understanding of what happens on Heroku?
Here is the package.json in root:
"scripts": {
"start": "node server/index.js",
"build": "react-scripts build",
"dev": "SET NODE_ENV=development&& node server/index.js",
"test": "SET NODE_ENV=test&& nodemon --exec mocha --recursive",
"heroku-postbuild": "cd server && npm install && npm run build"
EDIT
Not sure if something else is going on here. I went into root on the server and issued "npm run-script build" and the build folder is now there and I can see index.html there. However, same error persists.
Closing this as I had a more fundamental issue
If I execute the following commands from the root of my Vue app (v. 2.6.12)
rm -rf node_modules
npm install
npm run serve
I get the following error
sh: vue-cli-service: command not found
If I manually add the following symlink to node_modules/.bin the error does not occur
vue-cli-service -> ../#vue/cli-service/bin/vue-cli-service.js
But I shouldn't have to do this manually, i.e. if this symlink is required, it should be created when the #vue/cli-service package is installed.
I'm using NPM version 7.0.3 and have the following declared in the devDependencies section of package.json
"#vue/cli-service": "^4.5.6"
You may be able to skirt the issue by using the following in your package.json:
"serve": "./node_modules/.bin/vue-cli-service serve"
OR
"serve": "node ./node_modules/#vue/cli-service/bin/vue-cli-service.js serve"
This is just a temporary fix, though, as it is most likely an issue with npm not setting the correct path or npm not installing the binary properly. Try upgrading npm and nvm. See #bravemaster's comment on the github issue, as this contains several potential fixes.
npm install worked for me in the past, but check the package.json, which should roughly like this:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
...
"devDependencies": {
...
"#vue/cli-service": "~4.5.0",
...
},
Vue cli must be installed with global flag.
npm install -g vue-cli-service
If error try same command with sudo.
Vue-cli should not be in your package.json as a dependency (not even in dev-dependencies) because it is used only to generate a new project from scratch, not being necessary to run/server/build a project. (in dev or production), as the scripts are set in scripts section from package.json.
Replacing NPM with Yarn 1.X resolved this issue
I have a dockerized vue-cli app which is being run on NGINX environment.
Any time the image container starts we are seeing the CPU usage climb to nearly 100% then drop then climb then drop again.
Apparently the offending item is "/app/node_modules/.bin/vue-cli-service"
This is preventing the site from being reached and we are getting a 502 error.
Any idea what might be causing the problem.
I am happy to provide any other necessary information.
Here is my dockerfile
FROM node:lts-alpine
RUN mkdir -p /app
COPY . /app
WORKDIR /app
RUN npm install
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]
package.json
"scripts": {
"dev": "cross-env NODE_ENV=development vue-cli-service serve --port 3000",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"start": "cross-env NODE_ENV=production vue-cli-service serve --port 3000"
},
In vue.config.js
,
devServer: {
disableHostCheck: true
}
With the limited information you provided, it looks like you're running a development environment in production. What you should do instead is build a production bundle, which consists of static assets - .html, .js, .css files, images etc., and serve that using a web server like nginx. For more details you can read https://cli.vuejs.org/guide/deployment.html .
Trying to figure out how can I create a production build with webpack but first run it locally as a last test before deploying it to the server.
I was thinking of creating another command something like npm run build_local for that purpose but can't quite figure out how to do that.
I can see the following in the root package.json and I was thinking of somehow combining dev + build but can't figure out how to do that (or using config otherwise):
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
},
Any advice on how can I run a production build in localhost with something like npm run build_local command?
EDIT
What I've tried so far is to run (manually) http-server ./dist which seem to run the folder on localhost, but the result in fact deviates from production (and dev) behavior - in my case it first renders everything as expected but as long as I press refresh, it returns 404 not found which is unexpected (on dev and server deployed versions it still renders the login page in this case):
for example if I open localhost:8080, vue redirects me to localhost:8080/login which is expected and works fine. On refresh it gives 404 though.
Ideally I'd expect it to work at least in the same way as dev build on localhost.
Any ideas?
So it was as simple as combining the dev command and providing prod config to it under the root package.json:
"build_local": "webpack-dev-server --inline --progress --config build/webpack.prod.conf.js"
//
Or in the package.json:
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
"build_local": "webpack-dev-server --inline --progress --config build/webpack.prod.conf.js"
}
Now I can do npm run build_local which runs production build on localhost
Note: as per this github thread and this doc reference to prevent 404 on refresh also add the following to your webpack.prod.conf.js (anywhere in the file, but for reference you can paste it just before plugins)
devServer: {
contentBase: path.join(__dirname, 'dist'),
historyApiFallback: true, //this line is requried
compress: true,
port: 9000
},
You can now check your production build under the localhost:9000
If anyone knows about any drawbacks give me a comment or post the corrected answer
This answer states that npm run build creates a dist folder (it does in my case) as well as an index.html file - it doesn't in my case.
Instead I have an index.html file inside my dist folder, and I upload this folder to my remote server, visiting that index.html in my browser displays a blank page with "Hello world" on top (no CSS, no JS).
I couldn't find anything addressing this issue in the docs.
Am I missing something? Why is my app reduced to a mere "Hello world" page once deployed?
If you are using vue-cli, to create dist folder you need to run npm run build.
Also , open your package.json and check your scripts objects. It will have various commands to run and you can chose the correct script to run.
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
For vue cli3, mostly you need to run npm run build.