Lineone Laravel Documentation

Requirements

Laravel framework needs a few requirements for getting installed on your system.

• PHP Latest Version
• Node.js Latest Version
• Composer

Installing Nodejs

If Node js is not installed on your machine, you must install it first. Node.js distributions usually come bundled with npm, a package manager for the platform, which runs from the command line and manages dependencies for your applications. All npm packages contain a file, usually in the project root, called package.json - this file holds metadata relevant to the project. As you’ve installed Node.js, you can verify to check whether the installation is successful or not. To check if you have Node.js installed, run this command in your terminal:

node -v

And to check the npm version, type:

npm -v

Installing PHP

To install PHP, we will suggest you to install All-in-One package software stack (*AMP). It is available for all operating systems:

• WAMP for Windows
• LAMP for Linux
• MAMP for Mac
• XAMPP

To learn how to install these packages, refer to the following address: https://www.javatpoint.com/install-php

For check if you have PHP installed, run this command in your terminal:

php -v

Installing Composer

Laravel implements a composer for managing dependencies within it. Hence, before using Laravel, it needs to check whether you have a composer set up on your system or not. If you don't have Composer installed on your computer, first visit this URL to download Composer:

https://getcomposer.org/download/

When you are done installing the Composer, cross-check whether it is installed or not by typing in the command prompt the composer command. You can see the Composer screen in that CMD only.

Installing Template

Setup

Download the package. Go to lineone-laravel directory, open terminal and run following commands:

composer install

npm install

Duplicate .env.example file and rename it to .env adjust database connection depends on your local database setup.

Update the .env with the database name you want to connect to, as well as the other environment variables if they differ from the default.

# For MySql DB
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=yourdb
DB_USERNAME=root
DB_PASSWORD=

# OR
# For SQLite DB 
DB_CONNECTION=sqlite

Then generate the project key:

php artisan key:generate

WARNING

For applications using a server based databases (like MySQL), ensure the server is running before proceeding.

Run following command to setup the database structure and seeds.

php artisan migrate --seed

Starting Laravel Development server

Make sure your in Laravel's project root directory. Than run the following command

php artisan serve

This starts your app’s on port 8000. Let’s check to see if it’s working. http://localhost:8000from your browser.

Running Vite

There are two ways you can run Vite. You may run the development server via the dev command, which is useful while developing locally. The development server will automatically detect changes to your files and instantly reflect them in any open browser windows.

npm run dev

Or, running the build command will version and bundle your application's assets and get them ready for you to deploy to production:

npm run build

Customization

Tailwind CSS is a highly customizable framework. For learning more about customizing the Tailwind template, please use the official documentation of Tailwind.

Customizing Colors

To customize colors you should change customColors values in tailwind.config.js file:

const customColors = {
  // ..
  primary: colors.indigo["600"],
  secondary: "#F000B9",
  // ..
};

Dark Mode

To enable Dark Mode by default change isDarkModeEnabled value in store.js file from:

export default {
  // ...
  init() {
    // ...
    this.isDarkModeEnabled = Alpine.$persist(false).as("_x_darkMode_on");
    // ...
  },
  // ...
};

to

export default {
  // ...
  init() {
    // ...
    this.isDarkModeEnabled = Alpine.$persist(true).as("_x_darkMode_on");
    // ...
  },
  // ...
};

Monochrome Mode

To enable Monochrome Mode change isMonochromeModeEnabled value in store.js file from:

export default {
  //   ...
  isMonochromeModeEnabled: false,
  //   ...
};

to

export default {
  //   ...
  isMonochromeModeEnabled: true,
  //   ...
};

Also, you can persist this value by adding this code on init function in store.js file:

export default {
  // ...
  init() {
    // ...
    this.isMonochromeModeEnabled: Alpine.$persist(true).as("_x_monochrome_Mode_on");
    // ...
  }
  // ...
}

Customization Layout

To expand sidebar by default add this attribute is-sidebar-open="true" in <x-base-layout> or <x-app-layout> tag:

<!-- /// -->
<x-base-layout title="Page Title" is-sidebar-open="true" is-header-blur="true">
<!-- /// -->

Header Status

Header can be static or sticky. By default, the header is sticky. If you want to make the header static add header-sticky="false" in layout:

<!-- /// -->
 <x-app-layout header-sticky="false">
<!-- /// -->

Livewire 3 Guide

Livewire is not installed by default in our theme. if you are using livewire you should apply following changes:

1. In app.js, replace the Alpine import with the following:

import Alpine from "alpinejs"; 

import { 
  Livewire, 
  Alpine, 
} from "../../vendor/livewire/livewire/dist/livewire.esm"; 

2. Remove the following lines from app.js:

// AlpineJS Plugins
import persist from "@alpinejs/persist"; // @see https://alpinejs.dev/plugins/persist
import collapse from "@alpinejs/collapse"; // @see https://alpinejs.dev/plugins/collapse
import intersect from "@alpinejs/intersect"; // @see https://alpinejs.dev/plugins/intersect

// -----------------------------------------------

Alpine.plugin(persist); 
Alpine.plugin(collapse); 
Alpine.plugin(intersect); 

3. Add the following line to app.js:

// -----------------------------------------------

window.Alpine = Alpine;
window.Livewire = Livewire; 
window.helpers = helpers;
window.pages = pages;

// -----------------------------------------------

4. Wrap your custom Alpine components in the Alpine init listener in app.js:

// -----------------------------------------------

Alpine.directive("tooltip", tooltip); 
Alpine.directive("input-mask", inputMask); 

Alpine.magic("notification", () => notification); 
Alpine.magic("clipboard", () => clipboard); 

Alpine.store("breakpoints", breakpoints); 
Alpine.store("global", store); 

Alpine.data("usePopper", usePopper); 
Alpine.data("accordionItem", accordionItem); 

// -----------------------------------------------

document.addEventListener("alpine:init", () => { 
  Alpine.directive("tooltip", tooltip); 
  Alpine.directive("input-mask", inputMask); 

  Alpine.magic("notification", () => notification); 
  Alpine.magic("clipboard", () => clipboard); 

  Alpine.store("breakpoints", breakpoints); 
  Alpine.store("global", store); 

  Alpine.data("usePopper", usePopper); 
  Alpine.data("accordionItem", accordionItem); 
}); 

Next, In layout file (views/components/app-layout.blade.php) apply following changes:

Add Livewire directives:

<!-- //////////////////// -->

<meta name="csrf-token" content="{{ csrf_token() }}" />
<meta
  name="viewport"
  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>{{ config('app.name') }} @isset($title) - {{ $title }} @endisset</title>

@livewireStyles

<!-- CSS & JS Assets -->
@vite(['resources/css/app.css', 'resources/js/app.js'])

<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
  rel="stylesheet"
/>

<!-- //////////////////// -->
<div id="x-teleport-target"></div>

@livewireScriptConfig

<script>
  window.addEventListener("DOMContentLoaded", () => Alpine.start()); 
  window.addEventListener("DOMContentLoaded", () => Livewire.start()); 
</script>

Now You can make your livewire components:

php artisan make:livewire counter

Open app/Livewire/Counter.php and replace its contents with the following:

<?php

namespace App\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public $count = 1;

    public function increment()
    {
        $this->count++;
    }

    public function decrement()
    {
        $this->count--;
    }

    public function render()
    {
        return view('livewire.counter')->layout('components.app-layout', ['title' => 'Counter']);
    }
}

Open the resources/views/livewire/counter.blade.php file and replace its content with the following:

<main class="main-content w-full px-[var(--margin-x)] pb-8">
  <div class="flex items-center space-x-4 py-5 lg:py-6">
    <h2
      class="text-xl font-medium text-slate-800 dark:text-navy-50 lg:text-2xl"
    >
      Counter
    </h2>
  </div>
  <h1>{{ $count }}</h1>

  <button wire:click="increment">+</button>

  <button wire:click="decrement">-</button>
</main>

If you have any questions or problems, please don't hesitate to contact us (piniahelp@gmail.com). We are always happy to help and will get back to you as soon as possible.