Forge is a server management service made by the creator of the well known PHP framework laravel. But Forge is meant to be used for more than PHP applications.
Since the new platform release, Forge explicitly supports NodeJS SSR hosting:
Nuxt and Next.js integrations: Forge offers first-class support for modern JavaScript frameworks.
What is server side rendering (SSR)?
Server Side Rendering isn't new for developers familiar with PHP, since PHP always runs server side first. But for JavaScript developers, who have been creating Single Page Applications (SPA) or static projects which rely on JavaScript in the browser, SSR can be a great addition: Your code will be first executed on the server, therefore you can call authenticated APIs in secrecy - or deliver ready-made HTML to be consumed by non-javascript SEO bots. See Nuxt.js Rendering modes for more information about server side, client side and hydration techniques.
Let's try Nuxt.js on Forge
To get started on Forge, you need to invest $12 per month for the Hobby tier. This will enable you to add:
- unlimited Laravel VPS servers
- 1 external server
If you plan to use more than one external server, e.g. from Hetzner, you need to pay a bit more: $19 / month for the growth plan. See pricing.
Beware: As it is common for these server management tools, each added server has its own additional usage fees. 💸
Laravel VPS servers
Since the new Forge feature launch, it is possible to use VPS servers directly managed by Forge:
Instead of jumping between Forge and your cloud provider's dashboard to manage servers, billing, and configuration, everything lives in one place.
Prices start at $6 / month, see Laravel VPS server pricing.
The following regions are currently supported:
External VPS providers
You can also add external providers, e.g. Hetzner and connect them via API key:
You can then use the Hetzner Cloud VPS servers or dedicated ones:
Beware: The pricing shown here differs a bit from the Hetzner pricing I know. Cheapest server is currently capped at 4,15€/month.
Add your first server
For my example here, I'll use the cheapest Hetzner VPS. For private network, just create a new one.
I use the app server option, there are other ones available:
In the advanced section, the defaults currently are the following:
After clicking "create server", Forge will now connect via SSH to the new server and install the necessary linux packages as well as creating the needed configuration:
Create the nuxt sample website
Get started by creating a sample nuxt app,
npm create nuxt@latest nuxt-example
Use the minimal setup option:
To check out the Server Side Rendering (SSR) features, we add a new SSR route which fetches data externally:
// server/api/cat-facts
export default defineEventHandler(async () => {
// we could also use authenticated APIs here, secrets won't be shown to the client
return $fetch('https://catfact.ninja/fact')
})
<!-- app/pages/index.vue -->
<script setup>
const { data } = await useFetch('/api/cat-fact')
</script>
<template>
<div class="p-10 max-w-2xl mx-auto">
<h1 class="text-3xl mb-4">🐈 Random cat fact</h1>
<p class="mb-6">{{ data.fact }}</p>
</template>
Replace NuxtWelcome with NuxtPage in app/app.vue
<template>
<NuxtLayout>
<NuxtRouteAnnouncer />
<NuxtPage />
</NuxtLayout>
</template>
Full code: https://github.com/mandrasch/nuxt-example
Deploy / host it via Forge
On your newly created server, we now select "Create site" in the Sites tab and select "Nuxt.js" with "Nuxt.js server":
The defaults for advanced settings are the following:
First deploy
We can now start our first deployment after connecting our GitHub account to Forge:
The site is then launched via pm2:
Et voilà, our SSR website is online:
Adjust deploy script
The defaults for the deploy script can be adjusted:
Set environment variables
It is also possible to set env vars via the Forge interface:
Background processes and scheduler
There are also two additional options: Scheduler and Background processes
Commands
Execute commands remotely:
Heartbeat and Logs
Other options
There are some more options available, e.g. Deploy hook, Healthchecks. You can also decide wheter you want to enable push to deploy from GitHub or trigger it manual.
Redis installed by default
Laravel Forge automatically installs both Memcached and Redis™ when provisioning App Servers or Cache Servers.
See https://forge.laravel.com/docs/resources/caches for more information
You can adjust the Redis password in the Server settings:
This is handy for caching, see e.g. https://nuxt-multi-cache.dulnan.net/ or similiar extensions for Nuxt.
Summary
Forge did an awesome job integrating Nuxt.js in their polished and clean server management interface, kudos!
What is your experience with Forge?
What's next?
It would be great if there would be out of the box support for
- SvelteKit SSR via adapter-node
- Astros On-Demand-Rendering
in future!
In the meantime, it might be possible to run SvelteKit or Astro with SSR with some hacking / customization on Forge, see e.g. https://forge.laravel.com/docs/servers/nginx-templates. But I haven't tested yet.
Similiar services
Similiar server management services are ploi.io, cleavr or Coolify (selfhosting possible). Another platform I recently became aware of is Sliplane Docker Hosting, a company from Berlin.
Top comments (0)