pm2 start npm -- serve
pm2 start npm --watch -- run dev
pm2 start npm --name "vue-app" -- start
sudo pm2 start npm run serve --name vue-app -- start
When I run those it will start a process but not my app because when I do sudo lsof -i -P -n | grep LISTEN I don't see the 8080 port being used, either that or I get "script not found".
Here is my package.json:
{
"name": "vue-app",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
}
Since at least one of those commands have to be correct, do I have to modify my package.json file?
What I did to make it work was cd into the root folder of the frontend and run this command:
pm2 serve dist 8080 --spa
But as kissu mentioned I'll need to move it to a different host since it's a static app, amplify or netlify for exemple.
S3 is not a good place for an app, it's more for assets since it's quite slow AFAIK. But you can host it there if you really want to host on AWS.
More difficult to connect to the backend? Not really, pretty much the same: target an URL.
You could micro-optimize it on the same provider with kubernetes and all, but this is probably out of the scope here.
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)
In my Vue JS application I have a file called .env.individual which defines a variable use for making API calls to the backend.
I also have .env and .env.production, etc, all with different values for the API URL variable.
When I run npm run serve -- --mode individual the application starts up and uses the URL found in the .env.individual file. Likewise, when I run npm run serve -- --mode production the application starts up and uses the variable found in the .env.production file.
Given the above I was assuming that when I run npm run build -- --mode individual the \dist would be generated and I could then run npm run serve and the application would use the variables found in the .env.individual file.
Given my package.json file contains this:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"deploy": "vue-cli-service s3-deploy",
"release": "npm run build && npm run deploy"
},
What is npm run serve actually doing and why - when I want to use a specific .env.XXX file do I need to specify it exactly?
npm run serve does not run your application from /dist folder. It compiles unoptimized build in memory (RAM). If you want run your optimized build from /dist folder, you can run it by some http server. For example https://www.npmjs.com/package/http-server .
When building my Vue development server (yarn serve) each time I run it the port my project is being served on is incremented by 1 (3000 to 3001) each time I run yarn serve I am also making sure to exit the previous process...
Is there any known reason this is happening? I've have tried searching for this but have seen nothing similar to this.
My package.json scripts block:
"scripts": {
"serve": "vue-cli-service serve --port 3000",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}
This is probably because you still have a running service on the port 3000, that's why it's incrementing itself.
Try using
sudo lsof -i -P -n | grep 3000
or
sudo netstat -nlp | grep :80
Then, you could kill it with specific CLI command or a basic kill 11528 (kill + PID of the process). You could also use a SIGKILL with kill - 9 PID if the process doesn't want to shutdown.
PS: also, you should have a notice of it when you launch your server.
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 .
I've got an express app with a nextJS frontend both deploy together on Heroku. Due to Heroku's dynamic port assignment, I'm trying to pass the PORT into the static nextJS build so that it knows how to call the API i.e
const PORT = process.env.PORT;
fetch(`https://localhost:${PORT}/api/blah`)
I've tried the following in my package.json but it doesn't seem to work:
"scripts": {
"test": "jest",
"dev": "nodemon",
"build": "next build && tsc --project tsconfig.server.json",
"start": "cross-env NODE_ENV=production node dist/index.js -p $PORT"
},
The port is accessible within the NODE application but not within the client repo.
Except for your package.json , you don't need to use ${PORT} in all other frontend files.
Use fetch('/api/user/2024') instead of fetch ('http://localhost:3000/api/user/2024') .
If you stumble upon any absolute URL error during heroku build(can be seen during build process i.e build log). Use fetch('http://appname.herokuapp.com/api/user/2024') instead of fetch('/api/user/2024') and replace appname with your heroku appname .