Setting up a Laravel application with Vue.js authentication can be divided into two main phases: development and production. Each phase has specific steps to ensure the application runs smoothly and efficiently. This guide will walk you through both processes in detail.
Development Setup
During the development phase, we aim to set up an environment that allows for easy coding, testing, and debugging. Here’s a step-by-step process to set up a Laravel application with Vue.js authentication.
1. Install Laravel
Start by installing Laravel using Composer:
composer create-project --prefer-dist laravel/laravel my-app
cd my-app2. Install Laravel UI
Laravel UI provides a simple way to scaffold all of the routes and views you need for authentication using Vue.js:
composer require laravel/ui3. Scaffold Authentication with Vue
Use the following Artisan command to scaffold the authentication views and routes using Vue.js:
php artisan ui vue --auth4. Install NPM Dependencies
Next, install the required Node.js dependencies using NPM:
npm install5. Compile Assets
During development, you should use the development server for hot reloading, which compiles your assets and serves them on the fly:
npm run dev6. Serve the Laravel Application
To start the Laravel development server, use:
php artisan serveWhy These Commands Are Used
composer require laravel/ui: Adds the Laravel UI package, which provides the basic UI scaffolding for authentication.php artisan ui vue --auth: Generates the Vue.js scaffolding and authentication views, routes, and controllers.npm install: Installs all Node.js dependencies required for compiling front-end assets.npm run dev: Starts the Vite development server, enabling hot module replacement for a better development experience.
Production Setup
When deploying to production, the goal is to optimize performance and security. The steps differ slightly to ensure the application is lean and efficient.
1. Prepare the Server
Ensure your server has the necessary software installed. For Ubuntu 22.04, this includes Apache, PHP, Composer, and Node.js.
2. Clone the Repository
Clone your Laravel project repository to the server:
cd /var/www/html/
git clone https://github.com/your-repo/your-project.git ai-arena
cd ai-arena3. Set Up Environment Variables
Copy the .env.example file to .env and set your environment-specific variables:
cp .env.example .env
vim .env4. Install PHP Dependencies
Install the necessary PHP dependencies without development packages and optimize the autoloader:
composer install --no-dev --optimize-autoloader5. Generate Application Key
Generate the Laravel application key:
php artisan key:generate6. Run Migrations
Apply the database migrations:
php artisan migrate --force7. Set Directory Permissions
Ensure the correct permissions are set for storage and cache directories:
sudo chmod -R 777 storage
sudo chown -R www-data:www-data storage bootstrap/cache8. Create Storage Link
Create a symbolic link from the public directory to your storage directory:
php artisan storage:link9. Install Node.js and npm
If Node.js is not already installed, install it:
curl -fsSL https://deb.nodesource.com/setup_21.x | sudo -E bash -
sudo apt install -y nodejs10. Install Node.js Dependencies
Install the Node.js dependencies specified in package.json:
npm install11. Build Assets for Production
Compile and optimize your front-end assets for production:
npm run build12. Configure Apache
Set up Apache to serve your Laravel application. Create a new virtual host configuration file:
sudo vim /etc/apache2/sites-available/aiarena.zahiralam.com.conf<VirtualHost *:80>
ServerName aiarena.zahiralam.com
DocumentRoot /var/www/html/ai-arena/public
<Directory /var/www/html/ai-arena/public>
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>
ErrorLog ${APACHE_LOG_DIR}/aiarena-error.log
CustomLog ${APACHE_LOG_DIR}/aiarena-access.log combined
</VirtualHost>Enable the site and restart Apache:
sudo a2ensite aiarena.zahiralam.com.conf
sudo systemctl restart apache213. Install SSL Certificate
Secure your site with an SSL certificate using Certbot:
sudo apt install certbot python3-certbot-apache
sudo certbot --apache -d aiarena.zahiralam.comSummary of Production Commands
cd /var/www/html/
git clone https://github.com/your-repo/your-project.git ai-arena
cd ai-arena
cp .env.example .env
nano .env
composer install --no-dev --optimize-autoloader
php artisan key:generate
php artisan migrate --force
sudo chmod -R 777 storage
sudo chown -R www-data:www-data storage bootstrap/cache
php artisan storage:link
curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt install -y nodejs
npm install
npm run build
sudo a2ensite aiarena.zahiralam.com.conf
sudo systemctl restart apache2
sudo apt install certbot python3-certbot-apache
sudo certbot --apache -d aiarena.zahiralam.comConclusion
Setting up a Laravel application with Vue.js authentication involves different steps for development and production environments. In development, we focus on creating a flexible environment that supports rapid iteration and testing. In production, the focus shifts to performance and security, ensuring the application runs smoothly and efficiently. By following the steps outlined above, you can set up and deploy your Laravel application effectively in both environments.