About


Laravel Logo

Total Downloads Latest Stable Version License

Laravel

Laravel is a popular open-source PHP web application framework known for its elegant syntax and developer-friendly features. It follows the Model-View-Controller (MVC) architectural pattern, making it easy to build scalable and maintainable web applications. Laravel provides a wide range of features, including routing, database ORM, authentication, caching, and more. It emphasizes simplicity, expressive code, and developer productivity, making it a preferred choice for building modern web applications.

Vue logo

Build Status Coverage Status Downloads Version License Chat

Vue.js

Vue.js is a progressive JavaScript framework for building user interfaces. It focuses on the view layer of an application and allows developers to create interactive and dynamic web interfaces with ease. Vue.js is lightweight, flexible, and has a gentle learning curve, making it a popular choice for both small and large-scale projects. It provides features such as data binding, component-based architecture, reactivity, and a robust ecosystem of plugins and libraries. With Vue.js, you can create responsive and engaging user interfaces while enjoying efficient development and performance.

💡 Both Laravel and Vue.js complement each other seamlessly, allowing developers to build powerful full-stack applications with a smooth integration between the backend and frontend. Laravel provides the server-side infrastructure, API endpoints, and business logic, while Vue.js handles the dynamic user interfaces and interactive components. Together, they enable developers to create modern, scalable, and efficient web applications.

Setup


Alright, it's time to embark on the magical journey of setting up your Laravel Vue.js application! But fear not, for I shall be your trusty guide.

Prerequisites

  • PHP: Ensure that PHP is installed on your system. Laravel requires PHP 8.2.5 or higher.
  • Composer: Install Composer, a dependency manager for PHP, to handle the installation of Laravel and its dependencies.
  • Node.js and npm: Install Node.js and npm (Node Package Manager) to manage the frontend dependencies and build assets.
  • Database: Set up MariaDB or MySQL, an open-source relational database management system, for storing application data.

Installation

  1. PHP: Install PHP 8.2.5 or higher on your machine. You can refer to the PHP installation documentation for detailed instructions.

  2. Composer: Install Composer globally on your system. Visit the Composer website for installation instructions specific to your operating system.

  3. Node.js and npm: Install Node.js and npm by following the instructions provided in the official Node.js documentation. Choose the version suitable for your operating system.

  4. MariaDB: Install and set up MariaDB on your system. Here are the general steps:

    • For Linux:
      • Update the package manager: sudo apt update
      • Install MariaDB: sudo apt install mariadb-server
      • Start the MariaDB service: sudo systemctl start mariadb
    • For Windows:
      • Download the MariaDB installer from the official MariaDB website.
      • Run the installer and follow the instructions to complete the installation.

❔ Wondering if you should use MySQL instead? Well, don't worry, we won't judge you! MariaDB is a drop-in replacement for MySQL, so feel free to indulge in some rebellious database decisions.

Linux Setup

  1. Clone the repository using Git or download and extract the ZIP file to your desired location.

    git clone https://github.com/NBGamer99/URL-Shortener.git
  2. Navigate to the project directory:

    cd URL-Shortener
  3. Install PHP dependencies:

    composer install
  4. Create a .env file:

    cp .env.example .env
  5. Generate a new application key:

    php artisan key:generate
  6. Edit the .env file to match your environment.

    Optional Maildev Setup : To use Maildev as a testing tool, it is recommended to modify the following settings in your .env file

    MAIL_HOST=localhost
    MAIL_PORT=1025
    MAIL_FROM_ADDRESS="smolurl@example.com"
  7. Run database migrations:

    php artisan migrate
  8. Install JavaScript dependencies:

    npm install
  9. Build the frontend assets:

    npm run dev
  10. Start the development server:

    php artisan serve

Your application should now be accessible at http://localhost:8000.

Windows Setup

  1. Clone the repository using Git or download and extract the ZIP file to your desired location.
    git clone https://github.com/NBGamer99/URL-Shortener.git
    
  2. Open a command prompt and navigate to the project directory:
    cd URL-Shortener
  3. Install PHP dependencies:
    composer install
  4. Create a .env file. You can do this manually or use the Command Prompt:
    copy .env.example .env
  5. Generate a new application key:
    php artisan key:generate
  6. Edit the .env file and update the database connection settings to match your environment.

    Optional Maildev Setup : To use Maildev as a testing tool, it is recommended to modify the following settings in your .env file

    MAIL_HOST=localhost
    MAIL_PORT=1025
    MAIL_FROM_ADDRESS="smolurl@example.com"
  7. Run database migrations:
    php artisan migrate
  8. Install JavaScript dependencies:
    npm install
  9. Build the frontend assets:
    npm run dev
  10. Start the development server:
    php artisan serve

Your application should now be accessible at http://localhost:8000.

🥳 That's it!


You should now have a Laravel Vue.js application set up and ready to use on both Linux and Windows systems.

📚 Resources


  • Laravel Vite+Vue.js configuration : link

  • Laravel Vue.js : link

  • Install Vue 3 on Laravel 9 with Vite - Laravel VueJS Tutorial : link