Top

Laravel + Next JS Documentation

Multikart offers stunning and one-of-a-kind website demos tailored to your grocery, bakery, and online store needs. With Multikart, you'll find everything you require to craft the ideal website for your business. Multikart - your all-in-one solution!

Linux, Apache, MySQL, PHP (LAMP) Stack

Note:
  1. You can set up Multikart on different types of clean Ubuntu servers using VPS, including Digital Ocean Droplets, Amazon Lightsail, AWS, Google Cloud Virtual Private Server, Azure Ubuntu Virtual Private Server, and more.
  2. If you plan to utilize all the scripts (multikart-api, multikart-frontend-next14, multikart-admin-next14) on a single server as outlined in this tutorial, we suggest setting up a new Ubuntu-based server with a minimum of 2+ CPU cores and 2GB+ of memory for an efficient and smooth operation.

Introduction

A "LAMP" stack is a bundle of open-source software commonly used to host dynamic websites and web apps written in PHP. It includes Linux for the operating system, Apache for the web server, MySQL for the database, and PHP for processing dynamic content.

Install LAMP

    Step 1: Installing Apache and Updating package

    - Start by updating the package manager cache. If this is the first time you’re using sudo within this session, you’ll be prompted to provide your user’s password to confirm you have the right privileges to manage system packages with apt:

    sudo apt update

    - Then, install Apache with:

    sudo apt install apache2

    - You’ll be prompted to confirm Apache’s installation. Confirm by pressing Y, then ENTER.

    - Select unnattended-upgrades options by pressing space-bar, and then press Tab button to select OK button, please Enter button.

    Step 2: Setup Firewall to allow HTTP

    - Once the installation is finished, you’ll need to adjust your firewall settings to allow HTTP traffic.

    - Ubuntu’s default firewall configuration tool is called Uncomplicated Firewall (UFW). It has different application profiles that you can leverage.

    - To list all currently available UFW application profiles, execute this command:

    sudo ufw app list

    - To only allow traffic on port 80, use the Apache profile

    sudo ufw allow in "Apache"

    - Enable firewall and verify the change with:

    sudo ufw enable

    - After execute this command it will ask proceed this operation with existing ssh connection? Enter "y" and continue it.

    sudo ufw status

    Step 3: Find your Server’s Public IP Address

    - If you do not know what your server’s public IP address is, there are a number of ways to find it. You can following this command to find your public server ip address.

    ip addr show ens3 | grep inet | awk '{ print $2; }' | sed 's/\/.*$//'

    - Open this IP address in your browser, If you can view this page, your web server is correctly installed and accessible through your firewall.

    Step 4: Installing PHP

    - To install php and mysql, run the following command:

    sudo apt install php libapache2-mod-php php-mysql

    - Press "Y | y" tp continue this process and Once the installation is finished, run the following command to confirm your PHP version:

    - To install php extensions, run the following command:

    sudo apt install php-mbstring php-xml php-bcmath php-simplexml php-intl php-gd php-curl php-zip php-gmp

    - Once the installation is finished, you can run the following command to confirm your PHP version:

    php -v

    Step 5: Installing Composer

    - Update the local repository lists by entering the following in a command line.

    sudo apt update

    - The following curl command to have the latest Composer version.

    curl -sS https://getcomposer.org/installer | php

    - This will download and execute an installer script that will download the latest version of Composer and install it in your current working directory.

    - You’ll need to move the composer to use Composer globally and run the Composer commands from anywhere.phar file from your current directory to a location included in your PATH environment variable.

    - The most common location is the /usr/local/bin directory. So use the following command to initiate the move:

    sudo mv composer.phar /usr/local/bin/composer

    - To test composer installation, run:

    composer

    Step 6: Install MySQL Database & User

    - Now that you have a web server up and running, you need to install the database system to be able to store and manage data for your site. MySQL is a popular database management system used within PHP environments.

    sudo apt install mysql-server

    - When prompted, confirm installation by typing Y, and then ENTER.

    - Start the interactive script by running:

    sudo mysql_secure_installation

    - When prompted, confirm installation by typing Y, and then ENTER.

    - If you answer “yes”, you’ll be asked to select a level of password validation.

    If you choose the strongest level as 2, you'll encounter errors when trying to set a password that doesn't include numbers, uppercase and lowercase letters, and special characters.

    - We have choose the medium level as 1, after choose password validation level. It will ask some confirmation you can choose as your need.

    - When you’re finished, test whether you’re able to log in to the MySQL console by typing:

    sudo mysql

    - Once you are entering mysql panel, following some command for create database and database user to store data.

    CREATE DATABASE multikart_laravel;
    CREATE USER 'multikart'@'%' IDENTIFIED WITH mysql_native_password BY 'Password@123';
    GRANT ALL ON multikart_laravel.* TO 'multikart'@'%';
    FLUSH PRIVILEGES;

    - To exit the MySQL console, type:

    exit

    Step 7: Change permission for the www folder

    sudo chown -R $USER:$USER /var/www;

    Step 8: Upload Multikart API to Server

    - To make a new directory on your website, just type this command:

    mkdir /var/www/multikart
    1. Download the multikart-laravel-nextJs-package zip file from CodeCanyon and unzip it on your computer.
    2. Inside the unzipped folder, find multikart-api folder
    3. Upload the multikart-api folder to the server at the path /var/www/multikart/.

    Step 9: Install zip and extract it

    - following this command to install zip and extract it.

    sudo apt install zip unzip

    10. Create Virtual Host File

    nano /etc/apache2/sites-available/your_domain.conf

    - Add Following Code in Virtual Host File

    
                                <VirtualHost *:80>
                                    ServerName www.your-domain.com
                                    ServerAdmin contact@your-domain.com
                                    DocumentRoot /var/www/multikart-api/public
                                    ErrorLog ${APACHE_LOG_DIR}/error.log
                                    CustomLog ${APACHE_LOG_DIR}/access.log combined
                                    <Directory /var/www/multikart-api/public/>
                                        Options -Indexes +FollowSymLinks
                                        AllowOverride All
                                        Require all granted
                                    </Directory>
                                </VirtualHost>
                            

    - Include the following Nginx configuration in your edited file:

    - Restart Apache2

    service apache2 restart

Installing Multikart API

1. Initially, navigate to the multikart-api directory, and change the file named .env.example as .env.

cd /var/www/multikart/multikart-api

- Add values to the below keys in the .env file using nano command

nano .env
cp .env.example .env

If you're running your Laravel project on your own computer (localhost), make sure to use localhost with current running port and put in APP_URL. as a given example below

If you want to install on live server, you need to add your live server api url like a APP_URL=http://api.your-domain.com.

APP_URL=http://localhost:8000
DB_DATABASE=database_name
DB_USERNAME=database_username
DB_PASSWORD=database_password
Note: Make sure to set the APP_URL correctly. If you don't, features like uploading, downloading, and showing images won't work properly. Be sure to double-check and make sure everything is set up correctly.

2. Install Required Dependencies:

- In the multikart-api folder, run following command in the terminal to install the required dependencies.

composer install 

3. Generate Laravel APP KEY:

- Once the necessary dependencies are successfully installed, run following command to generate laravel app key.

php artisan key:generate

4. Installation of Multikart:

Note: If you've previously run following command or migrated tables, be aware of the fact that it will erase all of your data.

- Then, run following command to install multikart database table.

php artisan multikart:install

During the installation, you'll be asked two questions:

1. Do you want to continue with the installation? If you say yes, Multikart will continue to install.

2. Do you want to import in sample data? If you say yes, the sample data will be imported. If you say no, the installation will go ahead without adding any sample data.

5. Link Storage folder to Public folder:

- Then, run following command to store and display images correctly.

php artisan storage:link

6. Run Laravel API:

- Once you've finished all the previous steps, you can run the Laravel API by adding following command.

php artisan serve

- When you start your Laravel API project, it typically runs on the default port, you can access it by opening 127.0.0.1:8000 in your web browser.

7. Verify Multikart Purchase Code:

- Before using the Multikart API, it's important to verify your Envato purchase code.

- Enter in your Envato username and the Multikart purchase code and click next button.

- If you don't know where to find your purchase code, click here: where is my purchase code

Note: Once a license is verified, it can't be used for another project. An envato purchase code can only be verified on one domain at a time.

Congratulations, Multikart has been successfully installed and configured in your system!🎉

For Postman API Documentation Click Here.

Once you've finished installing the Multikart API, the next step is to set up the Multikart NextJs frontend.

NextJs Frontend And Backend

  • For Frontend Store:

    1. Find the multikart-frontend-next14 directory that you downloaded from CodeCanyon.
    2. Open the next.config.mjs file in your code editor and adjust the URL based on the reference image.

    • baseURl: This represents the base URL for running our Multikart frontend project.
    • URL: This represents the Laravel API server URL
    • storageURL: Enter the laravel primary domain.
  • For Admin:

    1. Find the multikart-admin-next14 directory that you downloaded from CodeCanyon.
    2. Open the next.config.mjs file in your code editor and adjust the URL based on the reference image.

  • Install Node Module:

    - In the multikart-frontend-next14 folder, run following command in the terminal to install the required dependencies.

    npm install
  • For building your nextjs application, utilize the following commands separately for both the frontend and admin

    npm run build
  • This will create a ".next" directory in your project with optimized files.

Upload zip file to respective on server:

- Take the contents of the ".next" folder and upload them to your website's respective folder.

Note: For demostraction purposes, we are displaying a reference image of the multikart frontend.

- Zip the Frontend project and upload it to the /var/www/html/multikart/ and extract it.
- Zip the Admin project and upload it to the /var/www/html/multikart/admin and extract it.
Next, open the index.html file using the command nano /var/www/html/multikart/admin/index.html and modify the base href path to <base href="/admin/">. This adjustment is necessary due to the presence of a subfolder, hence the need to update the base href path.

- After making your changes, press CTRL and X, then confirm by pressing Y and ENTER to save and close the file.

Congratulations on completing the Multikart installation! Now, navigate to the admin panel at your-domain.com/admin. For the frontend, visit your-domain.com. Enjoy using Multikart!

Default Credentials

Admin Credential:

- Url: http://localhost:3000/auth/login

- Email: admin@example.com

- Password: 123456789

Vendor Credential:

- Url: http://localhost:3000/auth/login

- Email: john.store@example.com

- Password: 123456789

Customer Credential:

- Url: http://localhost:3000/auth/login

- Email: john.customer@example.com

- Password: 123456789