Critical PHP vulnerability patches (CVE-2026-109618, CVE-2026-109619). LEARN MORE

✕
Cart (0)
  • Your cart is currently empty.

NEOSERV BLOG

Tips, guides and useful information about domains, hosting, SSL certificates, email, web optimization and online security.

Hosting a Next.js or Vue/React Application with a Node.js Backend
Category: Web Hosting
Published:

AI assistants most often suggest one of two architectures for web applications: a frontend built with Vue, React or Svelte (using Vite) and a separate Node.js API (Express, Fastify) or Next.js, which combines both in a single application.

You can host both on our hosting plans. In this article, you’ll learn how to do so and what to watch out for with each plan. We tested the procedures with Vue 3 + Vite, Express and Next.js 16 on the Green and Turbo plans.

Table of Contents

At a glance: what works on each hosting plan?

Green, Blue, Red Turbo
Vue/React/Svelte (static files) yes, build on your computer yes, build on your computer
Node.js API (Express, Fastify) yes yes
Next.js yes, only with output: "standalone" yes
Building on the server not recommended yes

Vue, React or Svelte frontend with a Node.js API

How is the application set up on the server

Component Where is it? How does it run?
Frontend public_html/app/ (static files) LiteSpeed serves the files directly, without Node.js
API Node.js application at yourdomain.com/app-api Setup Node.js App
Database MySQL database or SQLite file in the API directory

Because the frontend and API are on the same domain, the browser does not require CORS configuration, which is one of the most common issues when deploying an application.

Step 1: Build the frontend on your computer

Do not build the frontend on the server. The node_modules directory contains tens of thousands of files and uses a lot of memory. On the Green plan, a Vite build cannot complete because of the process limit (the command hangs). You only need to upload the build output to the server.

Before building, set the path where the application will be accessible in vite.config.ts (or vite.config.js):

export default defineConfig({
  plugins: [vue()],      // or react()
  base: '/app/',         // directory name in public_html; use '/' for the domain root
})

If you use a router (Vue Router, React Router), it should use the same base path:

// Vue Router
createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes })

// React Router
<BrowserRouter basename={import.meta.env.BASE_URL}>

The frontend should call the API using a relative path, not http://localhost:3000:

const res = await fetch('/app-api/players')

Then build the application:

npm run build

Upload the contents of the dist/ directory (not the directory itself) to public_html/app/.

Vite 8 requires Node.js 22.12 or newer on your computer. With an older version, the build stops with the error “Cannot find native binding”.

Step 2: Configure rewrites for the router

When a user refreshes a page at an address such as yourdomain.com/app/players, the server must return index.html. Otherwise, the user gets a 404 error. Add an .htaccess file to public_html/app/:

RewriteEngine On
RewriteBase /app/
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /app/index.html [L]

If the application is in the domain root, replace /app/ with /. The server applies the new .htaccess file after a few seconds.

Step 3: Deploy the API

Deploy the API as a Node.js application in Setup Node.js App, as described in our article Node.js Application on Web Hosting:

  • Application root: e.g. app-api
  • Application URL: yourdomain.com/app-api

Important difference from Python applications: A Node.js application receives the full path. If the frontend calls /app-api/players, the Express route must be /app-api/players or you must mount the router using app.use('/app-api', router).

The API can also run on the same domain as a WordPress site. API requests reach your application while WordPress remains unchanged.

What if the frontend and API are on different domains

If the frontend is at yourdomain.com and the API is at api.yourdomain.com, enable CORS in the API (using the cors package):

const cors = require('cors');
app.use(cors({ origin: 'https://yourdomain.com' }));

Next.js

Why use standalone mode

Next.js is normally started with next start. We do not recommend this on the Green, Blue and Red plans: Next.js detects all the server’s CPUs and creates more than 70 threads, while the Green plan allows a total of 100 processes and threads. When the limit is reached, other websites on the plan also stop working (e.g. WordPress returns a 503 error).

In standalone mode, Next.js creates a small, self-contained server that uses approximately 11 threads and 100 MB of memory while providing the same functionality.

Step 1: Configure next.config

// next.config.js (or next.config.ts)
module.exports = {
  output: 'standalone',
};

If the application will not be at the domain root, also add basePath (e.g. basePath: '/shop') and trailingSlash: true. However, we recommend deploying Next.js on its own domain or subdomain (e.g. shop.yourdomain.com), where basePath is not needed.

Step 2: Build the application on your computer

npm install
npm run build

The build creates the .next/standalone directory. For deployment, you need:

What? Where to upload?
contents of .next/standalone/ ~/mojnext/
.next/static/ directory ~/mojnext/.next/static/
public/ directory (if it exists) ~/mojnext/public/

Do not upload the project’s node_modules directory. The required packages are already included in .next/standalone/node_modules.

Step 3: Create the application in Setup Node.js App

  • Application root: mojnext,
  • Application URL: the application’s domain or subdomain,
  • Application startup file: server.js (created by Next.js in the standalone directory).

Do not use the Run NPM Install button, as the packages are already included. Enter environment variables (e.g. API keys) in Setup Node.js App.

After each new build, upload the files again and restart the application.

Building on the server

On Turbo plans, you can build Next.js directly on the server (npm install and npm run build in the virtual environment).

On the Green, Blue and Red plans, building on the server fails by default and the error messages can be misleading (e.g. “Failed to fetch font from Google Fonts” or spawn EAGAIN). If you still want to build the application on the server, add the following to next.config:

experimental: { cpus: 1 },

and run the build with a limit of one CPU:

taskset -c 0 npx next build

The build will succeed this way, but it will be slower than on your computer and no other resource-intensive tasks should run on the plan during the build.

Pre-deployment checklist

Before deploying your application, check the following:

  • The base setting in vite.config matches the directory in public_html.
  • The frontend calls the API using a relative path, not localhost.
  • The public_html/app/ directory contains an .htaccess file for the router.
  • You have uploaded only the build output to the server, without node_modules or the source code.
  • Next.js uses output: "standalone".
  • Passwords and keys are stored in environment variables, not in the frontend code (anything in the frontend can be seen by any visitor). In Next.js, variables starting with NEXT_PUBLIC_ are visible in the browser.
  • An SSL certificate (https) is enabled for the domain.

If you need help with the setup, we’re here for you. For larger Next.js applications, we recommend Turbo Hosting.

COMMENTS

COMMENT THE POST

(mandatory)
(mandatory, email address will be hidden)
(optional)
Security question that confirms you are a real person.