Here’s the installation guide that includes the step to make sure your project files are inside the htdocs directory of XAMPP (or the corresponding directory for your web server).

Laravel Project Installation Guide

Welcome to the Laravel project! Follow the steps below to ensure your system meets the requirements and to set up the application using the one-click installer.

Pre-Installation Requirements

Before you begin, ensure your system meets the following requirements:

1. System Requirements

• Operating System: Linux, macOS, or Windows
• Web Server: Apache (via XAMPP, WAMP, or similar) or Nginx
• PHP Version: PHP 8.1 or higher (check Laravel’s current requirements)
• Database: MySQL 5.7+ or MariaDB
• Composer: Version 2.6 or higher
• Node.js: Version v22.14.0
• NPM: Version 10.9.2
• Laravel Version: 10

2. Required Extensions

Ensure the following PHP extensions are enabled:

• OpenSSL
• PDO
• Mbstring
• Tokenizer
• XML
• Ctype
• JSON
• Fileinfo
• BCMath

3. Software Installation

Follow these steps to install the required software on your system:

1. Install XAMPP/WAMP (Windows users)

• Download and install XAMPP or WAMP.
• Ensure Apache and MySQL services are running.

2. Install Composer

• Download and install Composer.
• Verify the installation by running: composer --version

3. Install Node.js (optional)

• Download and install Node.js.
• Verify the installation: node -v npm -v

4. Laravel Version

• This project is built on Laravel 10.
• Install Laravel globally (if needed): composer global require laravel/installer

Installation Steps

Follow the steps below to install the Laravel project and set up the application.

1. Clone the Repository

Clone this project from your version control system (GitHub, GitLab, etc.):

git clone <repository-url>

• Replace <repository-url> with your repository’s actual URL.

After cloning, navigate into the project directory:

cd <project-directory>

2. Move Project to htdocs Directory

For XAMPP (or WAMP on Windows), your project should be inside the htdocs directory for it to be accessible by the web server.

Move the cloned repository to the htdocs directory (replace <project-directory> with the actual project folder):

sudo mv <project-directory> /opt/lampp/htdocs/

Now, navigate to the htdocs directory where your project is located:

cd /opt/lampp/htdocs/<project-directory>

3. Install Composer Dependencies

Run the following command to install all PHP dependencies:

composer install
composer require laravel/passport:^12.0

4. Set Up the .env File

Rename the .env.example file to .env:

cp .env.example .env

5. Configure the Database

Open the .env file and configure the database settings:

• Set the database connection settings, including DB_HOST, DB_DATABASE, DB_USERNAME, and DB_PASSWORD according to your MySQL/MariaDB configuration.

For example:

DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=your_database_name
DB_USERNAME=root
DB_PASSWORD=your_password

6. Set Permissions for Files and Directories

Run the following command to set the correct file and directory permissions:

sudo chown -R daemon:daemon .

7. Update Composer Dependencies

Run the following command to update the dependencies:

composer update
composer require laravel/socialite

8. Install Symfony Process (if required)

Install the Symfony Process package required for the application:

composer require symfony/process:^6.2

9. Install Node.js Setup

Add the Node.js repository and install Node.js (for front-end dependencies):

curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash -
sudo apt-get install -y nodejs

10. Install Front-End Dependencies

Run the following commands to install the necessary front-end dependencies:

npm install @vitejs/plugin-react
npm install react-places-autocomplete
npm install react-table
npm install react-date-range
npm install react-datepicker
npm install react-responsive-modal
npm install html5-qrcode
npm install react-select
npm install @mui/material @emotion/react @emotion/styled

or 
npm install 
npm i react-select
npm i @mui/material @emotion/react @emotion/styled

11. Build the Front-End Assets

To compile the front-end assets, run:

npm run build

12. Update MySQL Configuration (Optional)

If you are facing issues with large packets in MySQL, you can increase the max_allowed_packet in MySQL configuration:

1. Open the MySQL configuration file: sudo vi /opt/lampp/etc/my.cnf
2. Add or update the following setting under the [mysqld] section: max_allowed_packet=256M
3. Restart MySQL: sudo /opt/lampp/lampp restart

Running the Application

1. Run the Laravel Application

To serve the Laravel application locally, use the following command:

php artisan serve

You can access the application in your browser at:

http://127.0.0.1:8000

Additional Information

Troubleshooting

• Ensure your database settings are correctly configured in the .env file.
• If there are any permission-related issues, check the folder permissions for the storage and bootstrap/cache directories.

Summary of Commands

# Clone repository
git clone <repository-url>
cd <project-directory>

# Move project to XAMPP's htdocs directory
sudo mv <project-directory> /opt/lampp/htdocs/

# Install dependencies
composer install
cp .env.example .env
composer update
composer require symfony/process:^6.2
composer require laravel/socialite

# Set permissions
sudo chown -R daemon:daemon .

# Install Node.js and front-end dependencies
curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash -
sudo apt-get install -y nodejs
npm install @vitejs/plugin-react
npm install react-places-autocomplete
npm install react-table

# Build front-end assets
npm run build

# Update MySQL configuration (optional)
sudo vi /opt/lampp/etc/my.cnf
max_allowed_packet=256M
sudo /opt/lampp/lampp restart

# Serve the application
php artisan serve

Abhishek Singh

I’m Abhishek, a DevOps, SRE, DevSecOps, and Cloud expert with a passion for sharing knowledge and real-world experiences. I’ve had the opportunity to work with Cotocus and continue to contribute to multiple platforms where I share insights across different domains:

• DevOps School – Tech blogs and tutorials

• Holiday Landmark – Travel stories and guides

• Stocks Mantra – Stock market strategies and tips

• My Medic Plus – Health and fitness guidance

• TrueReviewNow – Honest product reviews

• Wizbrand – SEO and digital tools for businesses

I’m also exploring the fascinating world of Quantum Computing.