Nuxt.js: [Help] Deploy on Plesk (es2015 server.js)

[silverbackdan]

I've read through the deployment docs and forgive me for this, but I hope this will be relatively easy but I've been struggling for a while now.

I can deploy and launch the VueJS Hackernews application on my Plesk server, but looking at the server.js files, they are written in es2015.

I have the NodeJS extensions installed and have directed the startup file to .nuxt/server.js (with HN it works when sending to /server.js so I've assumed that's the file to point to). The website works well. I know it doesn't use Nuxt, I just thought it may be a useful thing to say.

I have created a couple of very basic pages locally with Nuxt and am trying to deploy it. I get the error "Unexpected token import", pointing to the issue that the server doesn't support es2016. The extension uses Phusion Passenger (not sure if it's helpful).

Is there a config option I'm missing which will recompile the server.js and other default js files in the .nuxt folder to es2015? I've tried the the babel settings in the config file, but changing that doesn't appear to affect these files.

I'm sure you can tell I'm very new to this and I just don't know if I just need es2016 supported on my server somehow, or perhaps I can't do it with NodeJS Plesk Extension and instead I need to look into deploying static files.

If it helps, this is my entire repo at the moment:
https://github.com/silverbackis/StarterWebsite

I've setup the NodeJS Extension as follows:

• NodeJS Version: 7.4.0
• Doc root: /public (I think irrelevant)
• Application root: /
• Application Startup File: /.nuxt/server.js

I've tried setting custom environment vars HOST and NPM_CONFIG_PRODUCTION but they don't seem to make a difference on my setup.

I'd appreciate any help if at all possible. Thanks.

_{This question is available on Nuxt.js community (#c862)}

[silverbackdan]

I've just found
https://github.com/nuxt/nuxt.js/issues/210

So will look into using the template https://github.com/nuxt-community/express-template instead. The start script looks more familiar to the HN deployment that worked. and the issue raised the Passenger server issue.

If I get this up, would you like me to see if I get a chance to write up another FAQ page about deploying to Plesk/Passenger?

[silverbackdan]

OK, I've created the site again using the express template and it's worked perfectly. Ping a reply in here if you think it'd be useful to have an FAQ for deployment to Passenger/Plesk and you'd like me to create a PR. Cheers.

[daniel7912]

Hi @silverbackdan I'd really appreciate an FAQ on Plesk deployment please. I've been trying to set it up in Plesk Onyx 17.5.3 without much luck.

[silverbackdan]

Hi @daniel7912 - I'll do my best to get something written up when I've finished a starter app I'm working on. It's running on Plesk Onyx at the mo. https://github.com/silverbackis/StarterWebsite

There is a VERY brief bit about Plesk in the readme which has assumptions but it may point you in the right direction.

[daniel7912]

I've got it working on Plesk now. Not 100% sure what has changed except that I changed Document Root to /static. Thanks for the help @silverbackdan and good luck with your starter app!

[silverbackdan]

@daniel7912 great - also I've just been looking at nginx reverse proxy cache to boost performance. Here's a useful thread for you. https://talk.plesk.com/threads/nginx-proxy_cache_path.338834/ - I'm trying to push for a perfect lighthouse score

[daniel7912]

@silverbackdan Thanks I'll check it out.

Well after my last update, the app works OK when I go to the root e.g. http://test.com and I can navigate around the site fine. However if I am on another page e.g. http://test.com/link-1 and try refreshing, I get a 404 error inside nuxt. Strange as it works fine locally on my PC.

[silverbackdan]

I think we should move this convo off of this thread, but the error could be lots of things without seeing your code. For example, I fetch data from an API and return 404 if the page didn't exist that I was requesting. In that case you'd have to look at axios/ajax configuration differences in SSR and CSR. Unlikely to be anything to do with Nuxt.JS IMO

[daniel7912]

You're right, it was the URL I was using in axios causing a 404. Still getting my head around SSR! Thanks again.

[deblanco-prttpng]

Hi @silverbackdan
I know this is an old problem, but I also have to implement a nuxt application in Plesk Onyx with passenger, bound by client, and I do not know how

When you talk about the /.nuxt folder, do I understand that doing the npm run build in your local environment and then upload the content of /.nuxt? then i assume the link of server.js file to Application startup file?

Thank you

[silverbackdan]

Hi @boicott - I now use a docker environment personally but when I was using Plesk for this I ran the build command from within Plesk. The .nuxt folder whould be in your .gitignore file.

You should use the nuxt express template as your starting point as well. https://github.com/nuxt-community/express-template

[seybsen]

For anyone still struggling with plesk and nuxt.js:

Since phusion passenger which is used by plesk can only start a node app like node server/index.js you can not use nuxt build && nuxt start, npm run start or yarn dev etc.

The tree of this repository changed since this discussion began. This is the state where express used nuxt.js as middleware:
https://github.com/nuxt-community/express-template/tree/616d5dcc21512ccf3e207ee1d162e4c6b9f4ecc4
... see:
https://github.com/nuxt-community/express-template/blob/616d5dcc21512ccf3e207ee1d162e4c6b9f4ecc4/template/server/index.js#L15-L29

Currently it is the other way around. Nuxt.js uses express as serverMiddleware defined in nuxt.config.js:
https://github.com/nuxt-community/express-template/blob/master/template/nuxt.config.js#L39-L42

[aebrs]

Hi @silverbackdan I'd really appreciate an FAQ on Plesk deployment please. I've been trying to set it up in Plesk Onyx 17.5.3 without much luck.

Hi, Have you been able to upload and run your project on plesk/onyx server? If yes may you explain more on How?

[aebrs]

Hi @daniel7912 - I'll do my best to get something written up when I've finished a starter app I'm working on. It's running on Plesk Onyx at the mo. https://github.com/silverbackis/StarterWebsite

There is a VERY brief bit about Plesk in the readme which has assumptions but it may point you in the right direction.

It sound's that you know how to deploy and upload a nuxt project on plesk/onyx. May you explain in detail? Thanks

[silverbackdan]

Hi @aebrs - sorry for the late reply. Since this post I moved to using Docker containers on another platform to Plesk. I'm sorry I'm up to date enough, but I'd probably recommend using the nuxt cli tool create-nuxt-app (https://github.com/nuxt/create-nuxt-app) to create your project from an express template which is still currently adding Nuxt as middleware into the express server rather that the other way around. Then I imagine you'd be able to just set the root file as the server/index.js file. It was working this way last time I tried to create a project with it a week or so ago.

[pi0]

https://github.com/pi0/nuxt-plesk-demo