nuxt version: 2.4.3
I'm using node process manager (pm2) for my node.js hosting. To run nuxt on development server, you can simply nuxt or npm run dev but that's not the case if you're using pm2's ecosystem.config.js which needs you to specify which file actually runs that.
For example, to run a developement server I have to point to the file that runs it which is ./node_modules/nuxt/bin/nuxt.js
But I have no idea which file that run production server or nuxt start
Can someone points me which file in ./node_modules/nuxt or ./node_modules/#nuxt that perform nuxt start?
--edit
This article covers how you run nuxt start with pm2 but aforementioned file ./node_modules/nuxt/bin/nuxt-start does not exists on mine. I suspect because we are using different nuxt version
Js file you are looking for (nuxt > 2.3)
node_modules/nuxt/bin/nuxt.js
When using pm2, I'm doing it this way (ecosystem.yml)
apps:
- name: client
script: node_modules/nuxt-start/bin/nuxt-start.js
cwd: /root/app/client
max_memory_restart: "250M"
args: "start"
Notice that for production in this case I'm using nuxt-start dependency to speed up npm i.
Related
I have two separate applications one is the ionic app and other is node express api app. Is it possible to merge both in one application? Like for example when i enter npm run start it should run ionic serve and node index js both?
Typically after you finish developing your frontend you "build" it. This minifies and optimizes frontend files. For ionic: https://ionicframework.com/docs/cli/commands/build
This creates a folder(the default name can be "dist" or "build" etc). You put this folder in your backend folder, then serve it statically. For static serving check out https://expressjs.com/en/starter/static-files.html.
This way you deploy only backend, and it works. You can make api endpoint routes start with "/api" and "/" routes can be for frontend's static serving.
If you mean you want to do that for development purposes only, you can use concurrently command https://www.npmjs.com/package/concurrently
npm install -g concurrently
After installation, add this line to package.json script
"start": "concurrently \"command1 arg\" \"command2 arg\""
In command1: add ionic start command, like: ionic start
In command2: add node start command, like: nodemon server.js
I'm new to vue and kind of confuse here.
I'm using vue-cli to build a vue app, I understand I can run a development server with npm run serve which is referenced as a script in my package.json for vue-cli-service serve
But my app need some data coming from a local node.js server. I cannot request this server from development mode because it's running on a different server.
To make my app work I'm obligated to build for production with
npm run build
Then to ask my node server to render by default the produced index.html file.
How could I combine development mode and my node server?
What would be the best way to make this work?
Thanks a lot
I stumbled across this, and found the answer buried at the bottom of the comments list, so I thought I'd highlight it.
This answer is taken from #Frank Provost comment, which really should be the accepted answer. As mentioned in his link https://cli.vuejs.org/config/#devserver-proxy all you need to do is create/edit vue.config.js file in your (client) project root to include this:
module.exports = {
devServer: {
proxy: 'http://localhost:3000' // enter dev server url here
}
}
Then start your dev server as usual from your server project:
[server-root]$ npm run dev
And run your client project from vue-cli project
[client-root]$ npm run serve
Then when you visit the client url (usually localhost:8080) all api requests will be forwarded to your dev server. All hot module replacement still works on both client and server.
***Updated for further clarification:
Thanks much for taking the time to reply. Running 'npm run build' (I'm using the Vuetify/Webpack template) created an index.html and a directory named 'static' with the respective html, css, and js (in 'dist' directory). The question is - how can I run this in production using node or pm2 (for example, 'pm2 start myapp.js')?
Doing some further research and testing, the 'npm run build' built as static. It was my lack of understanding how vue-cli was to build for production (via WebPack) (vue-cli builds static meant to be served via web server). Doing further testing, I can load and bring up my app on a couple local Linux servers (the static content running on one servers, while MongoDB and API running on another server (API running with pm2)). Also, I was able to bring it up on AWS S3 (as static). I think I have my answer now. Thanks much for your time.
***From Original Post:
How to run the following node app in production? Webpack build produced an index.html (I assume as it's using html-webpack-plugin). I can view the site if I run under a web server (e.g., nginx), but I want to run my final app using pm2, or running node process.
I am using the Vuetify WebPack template (I'm using Vue.js), when I run the npm run build for production (in package.json: “build”: “node build/build.js”) the output is as follows:
$ ls
index.html static/
and
$ ls static/js/
app.f7301c212bc5fefd6563.js manifest.2ae2e69a05c33dfc65f8.js vendor.1aae36aa0dc798d4d36d.js
app.f7301c212bc5fefd6563.js.map manifest.2ae2e69a05c33dfc65f8.js.map vendor.1aae36aa0dc798d4d36d.js.map
So, how do I run this via node (npm start) or pm2 (pm2 start) (can't use index.html or static/js files).
When I run the webpack build I was expecting a .js output (for example ‘build.js’) to run via node or pm2 (npm start that runs ‘node build.js’ or pm2 start build.js). I suppose this will work for serverless, but was looking to run via pm2 (with nginx as proxy) as the app will have other factors (e.g., MongoDB) that won’t allow running in serverless (e.g., AWS Lambda).
Would this be a matter of just re-configuring WebPack to output to a .js file (for example, build.js), or will the static files (served via a webserver, nginx/Apache/http-server) allow for the same functionality? That is, will there be any factors that would limit my app by running as static verses via ‘node build.js’ or ‘pm2 start build.js’, (for example, will my API connects to the back-end still work (back-end being node/JS))?
this seemed easy question now blocked my brain, hope to get your help.
I am now using webpack to start angular2 app, it is fine, just run npm start, in realty, it is running this command to boost angular2 project
webpack-dev-server --inline --progress --port 8080
Now everything is fine until I want to start actual development. Our actual development is using nodeJS, I want to use nodeJS to boost the whole angular2 project. I know I can use npm build to build angular project and then using static page inside nodeJS/express to loda that static page. This is ok for deployment or production enviornment. But for development, how can I do?
As above mentioned, I am using webpack-dev-server to boost ng2 project, which is reading a lot webpack.configuration, such as type script loader, sass loader, by default it is port 8080, but in my nodeJs project, it is using "node app" to start, and port is 3000. Obviously, this has caused cross domain issue here.
So is that possible to let nodeJS to boost my local development environment in ng2 so as to avoid the cross domain issue? If I use nodeJS, then where the webpack solution goes?
Hope to hear your suggestion
You can try two solutions. In both you need to have 2 servers: webpack and yours. Both work for any backend.
Enable CORS on your server responses. This might be tricky. Also, it does not really replicate the production behaviour (folder structure, URL paths, etc.)
Proxy all non-webpack output to your server. This is achieved by a couple of lines in a webpack config but it is really good because you still see your non-angular pages, content, static files etc as you would see them in production. What is also good, you can specify your production (stage, develop, whatever) server as a target and simply have no backend running on your machine at all.
This is how-to:
devServer: {
port: 8080,
proxy: { '**': { target: 'http://localhost:3000', secure: false, headers } }
},
This will start angular server on 8080 and redirect any non-webpack generated file to the target.
There is node.js app built with Typescript, so it needs to be first "compiled" to JS before it gets run. I'm planning to use NAR (https://github.com/h2non/nar) to build ready-to-deploy package to avoid fiddling with npm install and compiling it on production. I also use PM2 as process manager for node apps.
However as far as I know PM2 can only deploy from git (fetching sources and calling npm install etc. later on), but I couldnt find a way to easily deploy application that is already pre-built.
This is my deploy.yml file contained within archive that I extract with nar extract <package>:
apps:
- script: dist/app.js
merge_logs: true
name: server
instances: 1 # 0 => max, depending on CPU cores
exec_mode: cluster
node_args: --harmony --harmony_destructuring --harmony_default_parameters
log_file: deploy/logs/server.log
pid_file: deploy/pids/server.pid
source_map_support: true
env:
NODE_ENV: production
It works fine when run for the first time, but then when I try to redeploy it (replacing application content with new version) and call pm2 reload all I get errored processes saying they either cannot load ProcessManager from PM2 or cannot find my .env file (which is in place).
As soon as I kill PM2 daemon with pm2 kill and start apps again with pm2 start all deploy.yml it clicks. But this is probably not how PM2 should be used, right?
Do you have any experience with such setup and had similar issues? Or maybe can you point me to another way of running my deployment?