Dennis

Dennis

Planned

I need to test whether it's easy in Ploi to host Next JS and/or Nuxt JS projects easily.

seitenumbruch

seitenumbruch

· · Edited
·

Not sure if this is useful or not... But I am currently working with Nuxt JS (v2) and I don't find it particularly difficult to host Nuxt projects (using SSR) using Ploi. This is what I do:

(1) Create a new site with project type "None" and web directory "/".

(2) Alter deploy code like so:

cd /home/someuser/project.com
git pull origin master

npm i
npm run build

echo "🚀 Application deployed!"

(3) Alter Nginx config according/similar to NuxtJS Nginx example for Laravel Forge.

(4) In /home/someuser/ create file ecosystem.config.js:

module.exports = {
  apps: [
    {
      name: "project.com",
      exec_mode: "cluster",
      instances: "max",
      cwd: "./project.com",
      script: "./node_modules/nuxt/bin/nuxt.js",
      args: "start",
      env: {
        PORT: 3000,
      },
    },
  ],
}

(5) Deploy.

(6) SSH into server and run pm2 start ecosystem.config.js.

(7) In deploy code add pm2 reload "project.com":

cd /home/someuser/project.com
git pull origin master

npm i
npm run build
pm2 reload "project.com" # <-- this

echo "🚀 Application deployed!"

I am not sure if this is a good way to go about things... but it works for me.

3 total votes
Green17 Azurite Solutions SMIT.
SMIT.

SMIT.

·
·

@Dennis I can give you examples for 2 different deployment styles for Nuxt3.

  1. Build on server (basic)
  2. Build locally/remote (ci/cd) and only deploy the .output of Nuxt3
no votes yet
Felix

Felix

· · Edited
·

Is there any update on this?

The current process for deploying Nuxt 3 applications feels quite unintuitive. The main pain point is the manual intervention required after each deployment. We have to SSH into the server to update the Nginx configuration with the correct port from the ecosystem.config.js. This manual step breaks the otherwise smooth, automated workflow that Ploi provides.

The general setup for a Nuxt 3 app using the "Node.js" server type in Ploi isn't very clear. It would be a huge improvement if Ploi could automatically handle the port mapping from the ecosystem.config.js to the Nginx configuration during the deployment process.

1 total vote
PlateMan
PlateMan

PlateMan

·
·

+1 from me too.

The @Seitenumbruch method above makes sense, but I agree, it's a bit cumbersome.

Is the best way still to create with a project type of "none" (static)?

Or should we be using the Node project type?

I have a Nuxt app with a bunch of sensitive environment variables. They don't seem to be "seen" by the app when pasted into the GUI environment tab. There needs to be an actual .env file in the project root it seems for it to work.

Anybody got any more recent (streamlined) steps to get a Nuxt app deployed? Or are the above steps still the best way to do it in 2025?

Cheers.

no votes yet
Stefano Curnis

Stefano Curnis

·
·

After yesterday's announcemente about the upcoming Forge's Nuxt/Next/Astro hosting, this would be the perfect timing for Ploi to make progress on this!

no votes yet
PlateMan

PlateMan

·
·

Here are the steps I use to successfully deploy a Nuxt 3 app without pain.

(Well, it was a pain actually figuring it all out because I couldn't get the app to "see" the environment variables, but I got there in the end. Here's how...)

1. Create a new site.

  • Domain: example.com
  • Project type: NodeJS
  • Web directory: /
  • Project directory: /

2. Link to a remote GIT repository.

Follow the steps to link to a GitHub, GitLab or Bitbucket repo.

3. Configure your deploy script.

The snippet below pulls the "main" branch files from the remote repo and compiles/transpiles the app to /home/ploi/example.com/.output/server/index.mjs

cd /home/ploi/example.com

git pull origin main

npm install

npm run build

echo "🚀 Application deployed!"

4. Add your environment variables

Click the "Edit Environment" button above the deployment script on the "General" page and add your variables.

For example:

PORT=3001
APP_NAME=Example App

Note: This adds an .env file to the root of your site directory. After saving, reopen the environment tab to see if your changes were applied. I'm including this suggestion because, curiously, mine weren't updating properly on one particular server so I had to manually SSH into /home/ploi/example.com to do it. However, the following day, saving via the environment tab was working again. (No idea what was preventing this the first time round, a temporary glitch maybe?)

5. Configure your NodeJS service and start command

Under the NodeJS menu item, click "settings".

  • Service: PM2
  • Host: localhost
  • Port: 3001 (match what's in your environment variables - must not currently be in use by another app)
  • Start command: node -r dotenv/config .output/server/index.mjs
  • Arguments: `` (none)
  • Restart process after deployment: true (tick the checkbox)

Note: My initial attempts were deploying the app but not loading the environment variables, but this part of the command fixed the issue: -r dotenv/config.

6. Spawn the processes.

Click the "spawn" button under the "General" tab of the NodeJS section.

7. Update NGINX virtual host template.

Under "Settings" in the menu, scroll down to "Project Details" and tick the checkbox that says "Replace NGINX virtual host template".

This will automatically replace your NGINX virtual host template with one that can proxy through requests to your NodeJS server to the port you defined on the NodeJS page.

8. SSL

Under SSL in the menu, follow the options to install your Let's Encrypt certificate.


I hope someone finds this useful! I expect the process is similar when deploying a Next.js app but I don't have any experience with that framework.

Good luck!

no votes yet

Test: Next JS & Nuxt JS hosting

15 total votes
  • Dennis moved item to board Planned

    3 years ago
  • Dennis moved item to project Site Level Requests

    3 years ago
  • Dennis created the item

    3 years ago