<< Back

How to deploy a Nuxtjs site to Laravel Forge

Vuejs and Laravel are very good friends.

Taylor Otwell and Evan You.jpg

If you are a seasoned Laravel Developer you may have a Laravel Forge account to facilitate Continuous Deployment to your web servers. Then you started playing with Nuxtjs.

You may be wondering. ¿Can I deploy my Nuxtjs site to my Larave Forge web servers? ¡Yes you can!

This is the recipe on how to do it.

Overview

You will:

  • Create a new static site.
  • Setup Repository.
  • Setup SSL.
  • Modify NGINX configuration to work as a Proxy for Node.
  • Handling environment variables.
  • Setup deployment script.
  • Setup a Daemon to keep the site always running.

The ingredients:

  • Laravel Forge account
  • A Nuxtjs site (target: server)
  • Your site pushed to a Repository
  • A domain name (we'll use myfancynuxtsite.com as example)

If you don't have a Nuxtjs proyect yet go and bootstrap one and upload it to a repository.

Let's cook it!

Create a new static site

Pick a server in your Laravel Forge and add a new site.

Take care to pick Static HTML as the Project Type, and ADD IT.

Setup repository so you can do Continuous Deployment

Go to the new site, and link it to your repository.

When adding the repository, disable the "Install Composer dependecies" checkbox, as you won't have composer dependencies!

Setup SSL

To setup TLS and an SSL certificate let's do it the Laravel Forge way.

You'll need to have your domain pointing to the server in your DNS! Don't forget to do that first or Certbot won't be able to create and add the certificate.

Modify NGINX configuration to work as a Proxy for Node.

We'll edit NGINX configuration done by Laravel Forge.

This is how you edit such config in Forge itself;

And this is what you'll do on that file.

At the begining of the file, *after the *

# FORGE CONFIG (DO NOT REMOVE!)
include forge-conf/myfancynuxtsite.com/before/*;

and before the server section, add this:

map $sent_http_content_type $expires {
    "text/html"                 epoch;
    "text/html; charset=utf-8"  epoch;
    default                     off;
}

Then, inside the server section, replace the

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

by

    location / {
        expires $expires;
        proxy_redirect off;
        proxy_set_header Host               $host;
        proxy_set_header X-Real-IP          $remote_addr;
        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto  $scheme;
        proxy_read_timeout          1m;
        proxy_connect_timeout       1m;
        proxy_pass                          http://127.0.0.1:3000; # set the address of the Node.js
    }

After this restart your NGINX.

Handling environment variables.

The natural way to handle environmet variables in Laravel Forge is by setting up a .env file through the Environment menu option in our Site configuration.

How to pass those environment vars to Nuxt when building our site?

We'll add env-cmd to our project.

In your local copy of the prohect do:

npm install --save-dev env-cmd

Then commit and push.

Now you can add your environment variables in Laravel Forge.

Setup deployment script

Edit your deployment script in Forge, and leave it this way:

cd /home/forge/myfancynuxtsite.com
git reset --hard
git pull origin main
npm install
/home/forge/myfancynuxtsite.com/node_modules/env-cmd/bin/env-cmd.js -f ./.env npm run-script build
# restart node daemon  
pkill -f 'node /home/forge/myfancynuxtsite.com/node_modules/env-cmd/bin/env-cmd.js -f ./.env npm run-script start'
pkill -f 'node /home/forge/myfancynuxtsite.com/node_modules/.bin/nuxt start'

Please remember to replace myfancynuxtsite.com by your domain name.

You are ready to deploy, but let's setup our node process as a daemon, so it's kept alive in case it goes down.

Setup a Daemon to keep the site always running.

To do that, you'll go to the server, then Daemons, and add a new daemon

You're ready to go!

Your ready to do Continuous Deployment of your NUXT SSR site to Laravel Forge.

This is the procedure I do to setup my NUXT sites to Laravel Forge.

If you find any error don't hesitate to DM me