AI asistenti za spletne aplikacije najpogosteje predlagajo eno od dveh zgradb: frontend v Vue, React ali Svelte (zgrajen z orodjem Vite) in ločen API v Node.js (Express, Fastify) ali Next.js, ki združuje oboje v eni aplikaciji.

Obe lahko gostujete na našem gostovanju. V tem prispevku boste izvedeli, kako, in na kaj morate paziti na posameznem paketu. Postopke smo preizkusili z Vue 3 + Vite, Express in Next.js 16 na paketih Zeleni in Turbo.

Kazalo

• Na kratko: kaj deluje na katerem paketu?
• Vue, React ali Svelte frontend z Node.js API
  • Kako je aplikacija sestavljena na strežniku?
  • 1. korak: frontend zgradite na svojem računalniku
  • 2. korak: nastavite preusmeritve za usmerjevalnik
  • 3. korak: postavite API
  • Kaj pa, če sta frontend in API na različnih domenah?
• Next.js
  • Zakaj način standalone?
  • 1. korak: nastavite next.config
  • 2. korak: aplikacijo zgradite na svojem računalniku
  • 3. korak: ustvarite aplikacijo v Setup Node.js App
  • Gradnja na strežniku
• Kontrolni seznam pred objavo

Na kratko: kaj deluje na katerem paketu?

	Zeleni, Modri, Rdeči	Turbo
Vue/React/Svelte (statične datoteke)	da, build na svojem računalniku	da, build na svojem računalniku
Node.js API (Express, Fastify)	da	da
Next.js	da, samo v načinu output: "standalone"	da
Gradnja (build) na strežniku	ne priporočamo	da

Vue, React ali Svelte frontend z Node.js API

Kako je aplikacija sestavljena na strežniku?

Del	Kje je?	Kako teče?
Frontend	public_html/app/ (statične datoteke)	LiteSpeed jih postreže neposredno, brez Node.js
API	Node.js aplikacija na naslovu vasadomena.si/app-api	Setup Node.js App
Baza	MySQL baza ali SQLite datoteka v mapi API-ja

Ker sta frontend in API na isti domeni, brskalnik ne potrebuje nastavitev CORS, kar je ena najpogostejših težav pri objavi.

1. korak: frontend zgradite na svojem računalniku

Frontenda ne gradite na strežniku. Mapa node_modules ima več deset tisoč datotek in porabi veliko pomnilnika, gradnja z orodjem Vite pa na paketu Zeleni zaradi omejitve števila procesov sploh ne uspe (ukaz obvisi). Na strežnik potrebujete samo rezultat gradnje.

Pred gradnjo v vite.config.ts (ali vite.config.js) nastavite pot, na kateri bo aplikacija dostopna:

export default defineConfig({
  plugins: [vue()],      // ali react()
  base: '/app/',         // ime mape v public_html; za koren domene uporabite '/'
})

Če uporabljate usmerjevalnik (Vue Router, React Router), naj uporablja isto osnovno pot:

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

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

API naj frontend kliče z relativno potjo, ne z http://localhost:3000:

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

Nato zgradite aplikacijo:

npm run build

Vsebino mape dist/ (ne same mape) naložite v public_html/app/.

Vite 8 na vašem računalniku zahteva Node.js 22.12 ali novejši. Pri starejši različici se gradnja ustavi z napako »Cannot find native binding«.

2. korak: nastavite preusmeritve za usmerjevalnik

Ko uporabnik osveži stran na naslovu, kot je vasadomena.si/app/igralci, mora strežnik vrniti index.html, sicer dobi napako 404. V mapo public_html/app/ dodajte datoteko .htaccess:

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

Če je aplikacija v korenu domene, zamenjajte /app/ z /. Strežnik novo datoteko .htaccess upošteva po nekaj sekundah.

3. korak: postavite API

API postavite kot Node.js aplikacijo v Setup Node.js App, kot je opisano v prispevku Node.js aplikacija na spletnem gostovanju:

• Application root: npr. app-api
• Application URL: vasadomena.si/app-api

API lahko teče tudi na isti domeni kot WordPress stran. Poti API-ja dosežejo vašo aplikacijo, WordPress pa ostane nespremenjen.

Kaj pa, če sta frontend in API na različnih domenah?

Če je frontend na vasadomena.si, API pa na api.vasadomena.si, v API-ju omogočite CORS (paket cors):

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

Next.js

Zakaj način standalone?

Next.js običajno zaženete z ukazom next start. Na paketih Zeleni, Modri in Rdeči tega ne priporočamo: Next.js na strežniku zazna vse procesorje strežnika in ustvari več kot 70 niti, paket Zeleni pa dovoljuje 100 procesov in niti skupaj. Ko je omejitev dosežena, nehajo delovati tudi druge strani na paketu (npr. WordPress vrne napako 503).

V načinu standalone Next.js ustvari majhen samostojen strežnik, ki porabi približno 11 niti in 100 MB pomnilnika, deluje pa enako.

1. korak: nastavite next.config

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

Če aplikacija ne bo v korenu domene, dodajte še basePath (npr. basePath: '/shop') in trailingSlash: true. Priporočamo pa, da Next.js postavite na lastno domeno ali poddomeno (npr. shop.vasadomena.si), kjer basePath ni potreben.

2. korak: aplikacijo zgradite na svojem računalniku

npm install
npm run build

Gradnja ustvari mapo .next/standalone. Za objavo potrebujete:

Kaj?	Kam naložiti?
vsebina mape .next/standalone/	~/mojnext/
mapa .next/static/	~/mojnext/.next/static/
mapa public/ (če obstaja)	~/mojnext/public/

Mape node_modules iz projekta ne nalagajte. Potrebni paketi so že v .next/standalone/node_modules.

3. korak: ustvarite aplikacijo v Setup Node.js App

• Application root: mojnext,
• Application URL: domena ali poddomena aplikacije,
• Application startup file: server.js (ustvari ga Next.js v mapi standalone).

Gumba Run NPM Install ne uporabljajte, saj so paketi že priloženi. Spremenljivke okolja (npr. ključe API) vpišite v Setup Node.js App.

Po vsaki novi gradnji naložite datoteke znova in aplikacijo ponovno zaženite.

Gradnja na strežniku

Na paketih Turbo lahko Next.js zgradite neposredno na strežniku (npm install in npm run build v virtualnem okolju).

Na paketih Zeleni, Modri in Rdeči gradnja na strežniku privzeto ne uspe, napake pa so zavajajoče (npr. »Failed to fetch font from Google Fonts« ali spawn EAGAIN). Če aplikacijo vseeno gradite na strežniku, v next.config dodajte:

experimental: { cpus: 1 },

in gradnjo zaženite z omejitvijo na en procesor:

taskset -c 0 npx next build

Gradnja tako uspe, a je počasnejša kot na vašem računalniku, med gradnjo pa na paketu ne sme teči nič drugega zahtevnega.

Kontrolni seznam pred objavo

Preden aplikacijo objavite na spletu, preverite naslednje:

• Nastavitev base v vite.config ustreza mapi v public_html.
• Frontend kliče API z relativno potjo, ne z localhost.
• V public_html/app/ je .htaccess za usmerjevalnik.
• Na strežnik ste naložili samo rezultat gradnje, brez node_modules in izvorne kode.
• Next.js uporablja output: "standalone".
• Gesla in ključi so v spremenljivkah okolja, ne v kodi frontenda (vse, kar je v frontendu, lahko vidi vsak obiskovalec). Pri Next.js so spremenljivke z začetkom NEXT_PUBLIC_ vidne v brskalniku.
• Za domeno je vklopljen SSL certifikat (https).

Če potrebujete pomoč pri postavitvi, smo vam na voljo. Za večje Next.js aplikacije priporočamo Turbo gostovanje.