I developed a nuxt js/ vuetify and tailwindcss app that works perfectly on my local host but after deploying to heroku server, the app looks disorganized. No/irregular style.. Apis are not working. Below is my build script and screenshots of both local and heroku. Any help will be appreciated
"scripts": {
"dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
"build": "nuxt build",
"start": "cross-env NODE_ENV=production node server/index.js",
"generate": "nuxt generate",
"heroku-postbuild": "yarn build"
},
This is the screenshot on my local host
Screenshot of app in heroku server
Related
I am trying to deploy a Nextjs app in my ubuntu vps and I have apache2 as my virtual host. Can I deploy using apache or there is any other better methods
you can install pm2 in your vps
and then you can start
expecting you have following scripts in package.json
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
after building the project by npm run build
and then
pm2 start "npm start -- -p Port" --name name-of-process
(replace 'Port' and 'name-of-process' with correct values, and make sure you are inside the project folder before running the commandes)
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.
I want to build a vue.js app for production with npm ci.
Should I put #vue/cli-service in devDependencies of my package.json and execute
npm ci
vue-cli-service --mode production
Or should I put #vue/cli-service in dependencies of my package.json and execute
npm ci --production
vue-cli-service --mode production
As indicated here:
"dependencies" : Packages required by your application in production.
"devDependencies" : Packages that are only needed for local development and testing.
If you look at how the vue cli bootstraps an application you'll see a minimal package.json look like:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0"
}
Depending on how you want to deploy your app, there are different ways. The one I usually use for my Vue projects is to have a two-fold deployment process:
build the app with vue-cli-service
deploy the app to whereever I want it to run
It is pretty handy to define a "deploy" script in your package.json once you have the deployment figured out, e.g.:
"scripts": {
"start": "npm run serve",
"build": "vue-cli-service build",
"deploy": "npm run build && ./deploy.sh",
},
"dependencies": {…
where your deploy.sh runs all the neccessary means for deployment. The Official Vue Documentation has further pointers towards deployment on many widely used platforms.
EDIT: I guess the answer to your question would be "You run npm run build with the build script as defined above". Because that is the way you build a Vue app for production. Further information: Documentation about Environment variables with vue-cli-service
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