How to Deploy a TALL Stack Application with Vultr's Laravel Marketplace App

The TALL stack combines Tailwind CSS, Alpine.js, Laravel, and Livewire to create a modern full-stack framework for building responsive, reactive applications. Laravel handles the backend, Tailwind provides utility-first CSS, Alpine.js adds lightweight frontend reactivity, and Livewire allows developers to build dynamic and reactive user interfaces with PHP. Vultr's Laravel Marketplace Application provisions a ready-to-use Laravel environment on Ubuntu LTS in just minutes.

This article explains deploying a TALL stack application on Vultr using the Laravel Marketplace App. You will install Node.js, configure a MySQL database, deploy a sample TALL application, set proper file permissions, configure Apache with a virtual host, verify each TALL stack component works correctly, and set up a TLS certificate to enable HTTPS.

Prerequisites

Before you begin:

• Deploy a Laravel Marketplace App on Vultr.
• Access the server via SSH as a non-root user with sudo privileges.
• Create a domain A record pointing to your server's IP address. For example, app.example.com.

Install Node.js

The Laravel Marketplace App includes Apache, PHP, MySQL, Composer, and Git. Install Node.js to build Tailwind CSS assets.

1. Download and install Node Version Manager (NVM) to manage Node.js versions.

   CONSOLE

   Copy

   $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash

   Explain Code

   Powered by Vultr AgentBeta

   You can first run the command without | bash to review the script before execution.

2. Reload your shell configuration to make NVM available in your current session.

   CONSOLE

   Copy

   $ source ~/.bashrc

   Explain Code

   Powered by Vultr AgentBeta

3. Install the latest LTS version of Node.js.

   CONSOLE

   Copy

   $ nvm install --lts

   Explain Code

   Powered by Vultr AgentBeta

4. Verify the Node.js installation.

   CONSOLE

   Copy

   $ node -v

   Explain Code

   Powered by Vultr AgentBeta

   Output:

   v22.19.0

5. Verify the NPM installation.

   CONSOLE

   Copy

   $ npm -v

   Explain Code

   Powered by Vultr AgentBeta

   Output:

   10.9.3

Prepare the Database

Your TALL application requires a database. Follow these steps to secure MySQL, create a new user and database, and grant the user permission to manage it.

1. Run the MySQL secure installation script to disable insecure default settings and enable authentication on your database server.

   CONSOLE

   Copy

   $ sudo mysql_secure_installation

   Explain Code

   Powered by Vultr AgentBeta

   Reply to the following MySQL database server options when prompted:

   • VALIDATE PASSWORD COMPONENT: Enter Y to enable strict password policies on the database server.
   • Password strength policy: Enter 2 to enable multi-character passwords and dictionary usage on the server.
   • Change the password for root: Enter Y to change the MySQL root password.
   • Remove anonymous users: Enter Y to remove anonymous database users.
   • Disallow root login remotely: Enter Y to disable root remote login access.
   • Remove test database: Enter Y to delete the MySQL test database on your server.
   • Reload privileges tables now: Enter Y to reload the MySQL privilege tables and apply your configuration changes.

2. Login to your MySQL shell as root user.

   CONSOLE

   Copy

   $ mysql -u root -p

   Explain Code

   Powered by Vultr AgentBeta

3. Create a database. Replace tallisman with your desired database name.

   SQL

   Copy

   mysql> CREATE DATABASE tallisman;

   Explain Code

   Powered by Vultr AgentBeta

4. Create a new MySQL user. Replace vultr with your desired username and Strong@@password123 with your desired password.

   SQL

   Copy

   mysql> CREATE USER 'vultr'@'localhost' IDENTIFIED BY 'Strong@@password123';

   Explain Code

   Powered by Vultr AgentBeta

5. Give the vultr user permission to manage the tallisman database.

   SQL

   Copy

   mysql> GRANT ALL ON tallisman.* TO 'vultr'@'localhost';

   Explain Code

   Powered by Vultr AgentBeta

6. Exit the MySQL shell.

   SQL

   Copy

   mysql> EXIT;

   Explain Code

   Powered by Vultr AgentBeta

7. Test the connection with the vultr user. Enter your password when prompted.

   CONSOLE

   Copy

   $ mysql -u vultr -p

   Explain Code

   Powered by Vultr AgentBeta

8. Verify the databases that the vultr user can access.

   SQL

   Copy

   mysql> SHOW DATABASES;

   Explain Code

   Powered by Vultr AgentBeta

   Output:

   +--------------------+
   | Database           |
   +--------------------+
   | information_schema |
   | performance_schema |
   | tallisman          |
   +--------------------+
   3 rows in set (0.00 sec)

9. Exit the database.

   SQL

   Copy

   mysql> EXIT;

   Explain Code

   Powered by Vultr AgentBeta

Prepare the TALL Application

The Laravel Marketplace Application provides a fresh Laravel installation. In this step, you'll replace the default application with a sample application already preinstalled in the TALL stack.

1. Navigate to the Apache document root and remove the default Laravel application.

   CONSOLE

   Copy

   $ cd /var/www/html/
   $ sudo rm -rf my-laravel-app/

   Explain Code

   Powered by Vultr AgentBeta

2. Clone the sample TALL repository.

   CONSOLE

   Copy

   $ sudo git clone https://github.com/syamsarosa/tallisman.git

   Explain Code

   Powered by Vultr AgentBeta

3. Change the ownership of the tallisman directory to your user and the www-data group.

   CONSOLE

   Copy

   $ sudo chown -R $USER:www-data tallisman/

   Explain Code

   Powered by Vultr AgentBeta

   This sets the owner to your user and the group to www-data, giving both you and Apache permission to manage the application.

4. Navigate to the tallisman directory.

   CONSOLE

   Copy

   $ cd tallisman/

   Explain Code

   Powered by Vultr AgentBeta

5. Copy .env.example to .env.

   CONSOLE

   Copy

   $ cp .env.example .env

   Explain Code

   Powered by Vultr AgentBeta

6. Configure the database connection in the .env file.

   CONSOLE

   Copy

   $ nano .env

   Explain Code

   Powered by Vultr AgentBeta

   Update DB_DATABASE, DB_USERNAME, and DB_PASSWORD with the values created earlier:

   INI

   Copy

   DB_CONNECTION=mysql
   DB_HOST=127.0.0.1
   DB_PORT=3306
   DB_DATABASE=tallisman
   DB_USERNAME=vultr
   DB_PASSWORD=Strong@@password123

   Explain Code

   Powered by Vultr AgentBeta

   Save and close the file.

7. Install backend dependencies.

   CONSOLE

   Copy

   $ composer install

   Explain Code

   Powered by Vultr AgentBeta

8. Install frontend dependencies.

   CONSOLE

   Copy

   $ npm install

   Explain Code

   Powered by Vultr AgentBeta

9. Generate the application key. Laravel uses this key to encrypt data within your application.

   CONSOLE

   Copy

   $ php artisan key:generate

   Explain Code

   Powered by Vultr AgentBeta

10. Run database migrations.

    CONSOLE

    Copy

    $ php artisan migrate

    Explain Code

    Powered by Vultr AgentBeta

11. Build the frontend assets for production.

    CONSOLE

    Copy

    $ npm run build

    Explain Code

    Powered by Vultr AgentBeta

    This compiles your Tailwind CSS and JavaScript assets, creating the necessary files in the public/build directory.

Secure the Laravel Application for Production

Before going live, secure the application by configuring file permissions and Apache.

Set Correct File and Folder Permissions

Laravel requires correct file and folder permissions to run securely. Files must be readable, directories accessible, and the storage and bootstrap/cache directories writable by the web server.

1. Change all file permissions to 644.

   CONSOLE

   Copy

   $ sudo find . -type f ! -path "*/node_modules/*" -exec chmod 644 {} \;

   Explain Code

   Powered by Vultr AgentBeta

   This ensures files are not executable unless specifically needed.

2. Change all directory permissions to 755.

   CONSOLE

   Copy

   $ sudo find . -type d ! -path "*/node_modules/*" -exec chmod 755 {} \;

   Explain Code

   Powered by Vultr AgentBeta

   This allows users to enter and traverse directories.

3. Change the group ownership of the storage and bootstrap/cache directories to www-data.

   CONSOLE

   Copy

   $ sudo chgrp -R www-data storage bootstrap/cache

   Explain Code

   Powered by Vultr AgentBeta

   This gives the web server access to manage these directories.

4. Grant full permissions to the owner and group for storage and bootstrap/cache.

   CONSOLE

   Copy

   $ sudo chmod -R ug+rwx storage bootstrap/cache

   Explain Code

   Powered by Vultr AgentBeta

   These directories must be writable so Laravel can store logs, cache, and compiled views.

5. Clear Laravel's cached files.

   CONSOLE

   Copy

   $ php artisan optimize:clear

   Explain Code

   Powered by Vultr AgentBeta

   Running this after permission changes ensures Laravel can rebuild its cache without errors.

Create Apache Virtual Host

Apache uses virtual hosts to define how to serve websites. By creating a custom virtual host for your Laravel app, you can disable Apache directory listing and ensure the server points directly to Laravel's public directory.

1. Disable the default virtual host.

   CONSOLE

   Copy

   $ sudo a2dissite my-laravel-app.conf

   Explain Code

   Powered by Vultr AgentBeta

   Output:

   Site my-laravel-app disabled.

2. Navigate to Apache's site configuration directory.

   CONSOLE

   Copy

   $ cd /etc/apache2/sites-available/

   Explain Code

   Powered by Vultr AgentBeta

3. Create a new virtual host file.

   CONSOLE

   Copy

   $ sudo nano tallisman.conf

   Explain Code

   Powered by Vultr AgentBeta

4. Add the following configuration:

   INI

   Copy

   <VirtualHost *:80>
       ServerAdmin webmaster@localhost
       DocumentRoot /var/www/html/tallisman/public
       ErrorLog ${APACHE_LOG_DIR}/error.log
       CustomLog ${APACHE_LOG_DIR}/access.log combined
   
       <Directory /var/www/html/tallisman>
           Options FollowSymLinks
           AllowOverride All
           Require all granted
       </Directory>
   
       <Directory /var/www/html/tallisman/public>
           Options -Indexes +FollowSymLinks
           AllowOverride All
           Require all granted
   
           <FilesMatch \.php$>
               SetHandler application/x-httpd-php
           </FilesMatch>
       </Directory>
   </VirtualHost>

   Explain Code

   Powered by Vultr AgentBeta

   Save and close the file.

5. Test the Apache configuration for errors.

   CONSOLE

   Copy

   $ sudo apache2ctl configtest

   Explain Code

   Powered by Vultr AgentBeta

6. Enable the virtual host.

   CONSOLE

   Copy

   $ sudo a2ensite tallisman.conf

   Explain Code

   Powered by Vultr AgentBeta

7. Reload Apache to apply the virtual host changes.

   CONSOLE

   Copy

   $ sudo systemctl reload apache2

   Explain Code

   Powered by Vultr AgentBeta

8. Visit http://your-server-ip/ in your browser to view the application.

Verify the TALL Stack Components

After deploying your application, verify that each component of the TALL stack is functioning correctly.

Test Tailwind CSS

Tailwind CSS provides utility-first CSS classes that allow you to style elements directly in your HTML. Follow these steps to verify Tailwind is working:

1. Navigate to the tallisman directory.

   CONSOLE

   Copy

   $ cd /var/www/html/tallisman/

   Explain Code

   Powered by Vultr AgentBeta

2. Open the welcome view file.

   CONSOLE

   Copy

   $ nano resources/views/welcome.blade.php

   Explain Code

   Powered by Vultr AgentBeta

3. Modify the heading by adding Tailwind classes.

   HTML

   Copy

   <h1 class="text-3xl font-bold underline decoration-blue-500">
       Welcome to TALL Stack on Vultr
   </h1>

   Explain Code

   Powered by Vultr AgentBeta

   Save and close the file.

4. Rebuild the assets to apply the changes.

   CONSOLE

   Copy

   $ npm run build

   Explain Code

   Powered by Vultr AgentBeta

5. Visit http://your-server-ip/ in your browser. You should see a large, bold, underlined heading with blue decoration.

Test Livewire

Livewire enables you to build dynamic interfaces using PHP without writing JavaScript. Create a simple counter component to test Livewire:

1. Create a new Livewire component.

   CONSOLE

   Copy

   $ php artisan make:livewire counter

   Explain Code

   Powered by Vultr AgentBeta

   This generates two files:

   • app/Livewire/Counter.php - The component logic
   • resources/views/livewire/counter.blade.php - The component view

2. Open the Counter component class.

   CONSOLE

   Copy

   $ nano app/Livewire/Counter.php

   Explain Code

   Powered by Vultr AgentBeta

3. Replace the contents with:

   PHP

   Copy

   <?php
   
   namespace App\Livewire;
   
   use Livewire\Component;
   
   class Counter extends Component
   {
       public $count = 0;
   
       public function increment()
       {
           $this->count++;
       }
   
       public function decrement()
       {
           $this->count--;
       }
   
       public function render()
       {
           return view('livewire.counter');
       }
   }

   Explain Code

   Powered by Vultr AgentBeta

   Save and close the file.

4. Open the counter view file.

   CONSOLE

   Copy

   $ nano resources/views/livewire/counter.blade.php

   Explain Code

   Powered by Vultr AgentBeta

5. Replace the existing content with the following content:

   HTML

   Copy

   <div class="p-6 bg-white rounded-lg shadow-md">
       <h2 class="text-2xl font-bold mb-4">Livewire Counter</h2>
       <div class="flex items-center space-x-4">
           <button wire:click="decrement" class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600">
               -
           </button>
           <span class="text-3xl font-bold">{{ $count }}</span>
           <button wire:click="increment" class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600">
               +
           </button>
       </div>
   </div>

   Explain Code

   Powered by Vultr AgentBeta

   Save and close the file.

6. Open the welcome view to include the Livewire component.

   CONSOLE

   Copy

   $ nano resources/views/welcome.blade.php

   Explain Code

   Powered by Vultr AgentBeta

7. Add the Livewire component after the heading:

   HTML

   Copy

   <h1 class="text-3xl font-bold underline decoration-blue-500">
       Welcome to TALL Stack on Vultr
   </h1>
   <livewire:counter />

   Explain Code

   Powered by Vultr AgentBeta

   Save and close the file.

8. Rebuild the assets to compile the new CSS classes.

   CONSOLE

   Copy

   $ npm run build

   Explain Code

   Powered by Vultr AgentBeta

9. Visit http://your-server-ip/ and test the counter buttons. The count should update without a page refresh.

Test Alpine.js

Alpine.js provides lightweight JavaScript functionality for interactive elements. Add a simple toggle component to verify Alpine.js:

1. Navigate to the tallisman directory.

   CONSOLE

   Copy

   $ cd /var/www/html/tallisman/

   Explain Code

   Powered by Vultr AgentBeta

2. Open the welcome view file.

   CONSOLE

   Copy

   $ nano resources/views/welcome.blade.php

   Explain Code

   Powered by Vultr AgentBeta

3. Add an Alpine.js toggle component:

   HTML

   Copy

   <div x-data="{ open: false }" class="p-6 bg-gray-100 rounded-lg mt-6">
       <button @click="open = !open" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
           Toggle Alpine.js Demo
       </button>
       <div x-show="open" x-transition class="mt-4 p-4 bg-white rounded shadow">
           <p class="text-lg">🎉 Alpine.js is working! This content toggles on and off.</p>
       </div>
   </div>

   Explain Code

   Powered by Vultr AgentBeta

   Save and close the file.

4. Rebuild the assets to compile the new CSS classes.

   CONSOLE

   Copy

   $ npm run build

   Explain Code

   Powered by Vultr AgentBeta

5. Visit http://your-server-ip/ and click the toggle button. The content should smoothly appear and disappear with transitions.

Secure the Application with SSL/TLS

Once your TALL stack application is verified, secure it with TLS certificates to enable HTTPS connections and protect user data. Use Certbot to generate and manage these certificates.

1. Install the Certbot Let's Encrypt client plugin for Apache.

   CONSOLE

   Copy

   $ sudo apt install certbot python3-certbot-apache -y

   Explain Code

   Powered by Vultr AgentBeta

2. Request a new Let's Encrypt SSL certificate for your domain. Replace app.example.com with your domain and email@example.com with your email address.

   CONSOLE

   Copy

   $ sudo certbot --apache --agree-tos --redirect --email email@example.com -d app.example.com

   Explain Code

   Powered by Vultr AgentBeta

   The --redirect option automatically configures Apache to redirect HTTP traffic to HTTPS.

   Note

   Let's Encrypt certificates are valid for 90 days and automatically renew via a systemd timer. You can check the renewal timer status with systemctl list-timers | grep certbot.

3. Restart Apache to apply the SSL configuration changes.

   CONSOLE

   Copy

   $ sudo systemctl restart apache2

   Explain Code

   Powered by Vultr AgentBeta

4. Visit https://app.example.com in your browser to verify HTTPS is working. A padlock icon in the address bar indicates a secure connection.

Conclusion

You have successfully deployed a TALL stack application on Vultr using the Laravel Marketplace App. You secured MySQL, configured environment variables, installed backend and frontend dependencies, set proper file permissions, and created a custom Apache virtual host. You also set TLS encryption to enable secure HTTPS access.