DEV Community: medilies

Run Laravel locally on Ubuntu using Apache virtual host

medilies — Sat, 08 Jun 2024 15:58:57 +0000

Refresh APT metadata.

sudo apt update

Installing MySQL

Install MySQL:

sudo apt install mysql-server

Enter MySQL to edit the root user password:

sudo mysql

ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password';

Re-enter MySQL to create a database for our app, but using the credentials this time:

mysql -u root -p

CREATE DATABASE my_app;

References:

https://www.digitalocean.com/community/tutorials/how-to-install-lamp-stack-on-ubuntu#step-2-installing-mysql

Installing Apache

Ubuntu usually comes bundled with a running Apache server but still, I'll include the installation steps.

sudo apt-get install apache2 -y

Check if Apache is installed by verifying its version:

apache2ctl -v

Check if your firewall is active:

sudo ufw status
sudo ufw app list

If it returned Status: active then allow HTTP traffic on Apache:

sudo ufw allow in "Apache"

Now, visiting http://localhost should display "Apache2 Default Page".

References:

Installing PHP

sudo add-apt-repository ppa:ondrej/php

Install PHP 8.1.

sudo apt install php8.1

If you opt for a different version then just replace 8.1 with your version whenever you copy a command.

Add PHP module to Apache server:

sudo apt install libapache2-mod-php8.1

Install the extensions required by Laravel:

sudo apt install php8.1-mbstring php8.1-xmlrpc php8.1-soap php8.1-gd php8.1-xml php8.1-cli php8.1-zip php8.1-bcmath php8.1-tokenizer php8.1-json php8.1-pear

The newly installed extensions will be automatically enabled with their configs placed at /etc/php/8.1/cli/conf.d/.

References:

Installing composer

Check https://getcomposer.org/download/.

A new Laravel app

cd
mkdir dev
cd dev

I like to place my code at ~/dev.

Create a new Laravel app:

composer global require laravel/installer
laravel new my_app --git

Set the correct permissions to enable Apache to execute your PHP code.

sudo chown -R www-data:www-data /home/me/dev/my_app
sudo chmod -R 777 /home/me/dev/my_app
sudo chmod o+x /home/me
sudo chmod o+x /home/me/dev
sudo chmod o+x /home/me/dev/
sudo chmod o+x /home/me/dev/my_app

Set .env with your app and database details.

Faking a domain name

We will add a domain name for our app that only our machine knows about by editing /etc/hosts. We will configure it to let our machine know that the domain name my_app.local is on the loopback IP address 127.0.0.1.

sudo nano /etc/hosts

# Add this line anywhere
127.0.0.1 my_app.local

Test that you configured the domain correctly by pinging it:

ping my_app.local

Note that using internet top-level domains like .com will most likely not work. So I recommend sticking to .local for testing locally without HTTPS and without a registered domain name.

Setting up the virtual host

Now we move to /etc/apache2/sites-available/ and use as our base virtual host config file:

cd /etc/apache2/sites-available/
sudo cp 000-default.conf my_app-local.conf
sudo nano my_app-local.conf

And edit my_app-local.conf to look like this:

<VirtualHost *:80>
        # The ServerName directive sets the request scheme, hostname and port that
        # the server uses to identify itself. This is used when creating
        # redirection URLs. In the context of virtual hosts, the ServerName
        # specifies what hostname must appear in the request's Host: header to
        # match this virtual host. For the default virtual host (this file) this
        # value is not decisive as it is used as a last resort host regardless.
        # However, you must set it for any further virtual host explicitly.
        ServerName my_app.local   
        ServerAlias www.my_app.local

        ServerAdmin webmaster@localhost
        DocumentRoot /home/me/dev/my_app/public

        <Directory /home/me/dev/my_app/public>
                Options FollowSymLinks MultiViews
                AllowOverride All
                Require all granted
        </Directory>

        ReWriteEngine On

        # Available loglevels: trace8, ..., trace1, debug, info, notice, warn,
        # error, crit, alert, emerg.
        # It is also possible to configure the loglevel for particular
        # modules, e.g.
        #LogLevel info ssl:warn

        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined

        # For most configuration files from conf-available/, which are
        # enabled or disabled at a global level, it is possible to
        # include a line for only one particular virtual host. For example the
        # following line enables the CGI configuration for this host only
        # after it has been globally disabled with "a2disconf".
        #Include conf-available/serve-cgi-bin.conf
</VirtualHost>

Check the validity of the config you added:

sudo apache2ctl configtest

Enable your new site:

sudo a2ensite my_app-local.conf

Also, enable the rewrite module to be able to have URLs that do not point only to real files:

sudo a2enmod rewrite

The final thing to do is restart Apache to reload the new config:

sudo systemctl restart apache2
// or
sudo systemctl reload apache2

References:

https://ubuntu.com/tutorials/install-and-configure-apache

Finally

Visit http://my_app.local.

Laravel SPA OAuth using GitHub, Socialite, and Sanctum

medilies — Thu, 31 Aug 2023 22:03:11 +0000

This is a step-by-step tutorial that requires no prior knowledge of OAuth, it just assumes that you are familiar with Laravel, and Sanctum and that you can read basic Javascript.

Overview

(TODO: sequence diagram will be added here)

Implementation

1. Configuring GitHub service

Set values in .env and /config/services.php



GITHUB_CLIENT_ID=bbb58b28cdd98636e3e2
GITHUB_CLIENT_SECRET=***************************************
GITHUB_REDIRECT=/callback



return [
    // ...
    'github' => [
        'client_id' => env('GITHUB_CLIENT_ID'),
        'client_secret' => env('GITHUB_CLIENT_SECRET'),
        'redirect' => env('GITHUB_REDIRECT'),
    ],
];

2. Socialite

Install socialite:



composer require laravel/socialite

Add the following web route.



use App\Http\Controllers\AuthController;
use Illuminate\Support\Facades\Route;

Route::get('/auth/{provider}/redirect', [AuthController::class, 'redirect'])
    ->name('auth.redirect');

Add the following API route.



use App\Http\Controllers\AuthController;
use Illuminate\Support\Facades\Route;

Route::get('/auth/{provider}/callback', [AuthController::class, 'callback'])
    ->name('auth.callback');

Create the AuthController.



namespace App\Http\Controllers;

use Laravel\Socialite\Facades\Socialite;

class AuthController
{
    public function redirect(string $provider)
    {
        return Socialite::driver($provider)->stateless()->redirect();
    }

    public function callback(string $provider)
    {
        $oAuthUser = Socialite::driver($provider)->stateless()->user();

       // More logic to handle login or registration will be added later
    }
}

3. Storage

Edit 2014_10_12_000000_create_users_table migration:

Make the password nullable.



use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    public function up(): void
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password')->nullable();
            $table->timestamps();
        });
    }
};

4. SPA

Only one Blade file will be needed which we'll name app.blade.php.



<!DOCTYPE html>
<head>
    <title>Laravel</title>
</head>

<body>

    <div id="app"></div>

    <script>
        const githubCallbackPath = "{{ route('auth.callback', ['provider' => 'github']) }}";
        const githubRedirectPath = "{{ route('auth.redirect', ['provider' => 'github']) }}";
    </script>

    @vite(['resources/js/app.js'])
</body>

</html>

Now we'll add a fallback web route at the end of route/web.php to serve this view.



// ...

Route::get('/{path}', fn () => view('app'))
    ->where('path', '(?!api).*');

app.js

We'll start by setting the current URL path value.



let currentPath = window.location.pathname;

When the current path is /login or /register we want a way to reach GitHub's authorization page.

That will be achieved via the auth.redirect route which we stored its full URL in the githubRedirectPath variable. With the help of Socialite we'll get seamlessly redirected to https://github.com/login/oauth/authorize with the needed query parameters (see https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/authorizing-oauth-apps#1-request-a-users-github-identity).



// ...

if (currentPath === '/login' || currentPath === '/register') {
    window.document.querySelector('#app').innerHTML = `
        <a href="${githubRedirectPath}">
            Login with GitHub
        </a>
    `;
}

The actual URL is https://github.com/login/oauth/authorize?client_id=bbb58b28cdd98636e3e2&redirect_uri=http%3A%2F%2F127.0.0.1%3A8000%2Fcallback&scope=user%3Aemail&response_type=code

After hitting the authorize button. we'll get redirected to /callback as set in GitHub and /config/services.php. The only trick is that GitHub will add a query parameter named code.

code is a one-time password that enables us to fetch an access token from GitHub (see https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/authorizing-oauth-apps#2-users-are-redirected-back-to-your-site-by-github). We must delegate this task to the back end since it requires additional sensitive data that is GITHUB_CLIENT_SECRET. That can be achieved by simply sending code to the back end as a query parameter at auth.callback route which we have its value in the githubCallbackPath variable.



// ...

if (currentPath === '/callback') {
    let searchParams = new URLSearchParams(window.location.search);
    let code = searchParams.get("code");

    if (code === null) {
        throw new Error("code query param must be present when entering /callback path");
    }

    useOauthProviderCode(code);
}

async function useOauthProviderCode(code) {
    try {
        const response = await fetch(`${githubCallbackPath}?code=${code}`, {
            method: 'GET',
            headers: {
                'Accept': 'application/json'
            }
        });

        if (!response.ok) {
            throw new Error('Network response was not ok');
        }

        const data = await response.json();

        const token = data.token;
        localStorage.setItem('authToken', token);

        redirectToPath('/dashboard');
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}

function redirectToPath(path) {
    window.location.href = path;
}

Completing the registration/login logic

Here Socialite will abstract important operations for us:

Using code to get an OAUTH-TOKEN from GitHub.
Using the OAUTH-TOKEN to fetch user data from GitHub (see: https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/authorizing-oauth-apps#3-use-the-access-token-to-access-the-api)



    public function callback(string $provider)
    {
        $oAuthUser = Socialite::driver($provider)->stateless()->user();

        $user = User::where('email', $oAuthUser->email)->first();

        $user ??= User::create([
            'name' => $oAuthUser->name,
            'email' => $oAuthUser->email,
        ]);

        $token = $user->createToken('token');

        return ['token' => $token->plainTextToken];
    }

There are more edge cases and error handling to do here, but for the sake of simplicity, this is the bare minimum that will work under ideal circumstances.

The approach of only taking the email was inspired by Codepen

Congrats 🎉. Now you can register new users, and authenticate them, and your SPA can make use of the bearer token.

CodeMirror v6 on Vue3 hooked to Pinia store

medilies — Sun, 30 Jul 2023 20:50:32 +0000

Scope

I'm gonna make a very basic Codepen clone for writing HTML and CSS, and integrate CodeMirror in Vue using vue-codemirror wrapper.

Setup

After setting up Vue with Pinia, install the following packages:



npm i vue-codemirror @codemirror/lang-css @codemirror/lang-html @codemirror/theme-one-dark

Code

1. The store



import { defineStore } from "pinia";

import { computed, ref } from "vue";

export const useAppStore = defineStore("app", () => {
    const css = ref("");
    const cssCopy = computed(() => css.value);
    const setCss = (newCss) => {
        css.value = newCss;
    };

    const template = ref("");
    const templateCopy = computed(() => template.value);
    const setTemplate = (newTemplate) => {
        template.value = newTemplate;
    };

    return {
        css,
        cssCopy,
        setCss,
        template,
        templateCopy,
        setTemplate,
    };
});

This is the store I made to keep track of the value of HTML and CSS code.

2. Base text editor component



<template>
    <codemirror
        :modelValue="props.code"
        placeholder="code goes here..."
        :style="{ height: '100%' }"
        :autofocus="true"
        :indent-with-tab="true"
        :tab-size="4"
        :extensions="extensions"
        @ready="handleReady"
    />
</template>

<script setup>
import { shallowRef, computed } from "vue";
import { Codemirror } from "vue-codemirror";
import { oneDark } from "@codemirror/theme-one-dark";

const props = defineProps({
    additionalExtensions: {
        type: Array,
        required: true,
        default: [],
    },
    code: {
        type: String,
        required: true,
    },
});

const baseExtensions = [oneDark];

const extensions = computed(() => [
    ...baseExtensions,
    ...props.additionalExtensions,
]);

const view = shallowRef();
const handleReady = (payload) => {
    view.value = payload.view;
};
</script>

This component defines two simple properties:

additionalExtensions mainly to add language support.
code to access value from store.

3. Language specific text editors



<template>

    <base-editor

        :additional-extensions="[html()]"

        :code="store.templateCopy"

        @change="store.setTemplate($event)"

    />

</template>

<script setup>

import { html } from "@codemirror/lang-html";

import { useAppStore } from "@/stores/app";

import BaseEditor from "@/components/BaseEditor.vue";

const store = useAppStore();

store.setTemplate("<h1>template</h1>");

</script>



<template>

    <base-editor

        :additionalExtensions="[css()]"

        :code="store.cssCopy"

        @change="store.setCss($event)"

    />

</template>

<script setup>

import { css } from "@codemirror/lang-css";

import { useAppStore } from "@/stores/app";

import BaseEditor from "@/components/BaseEditor.vue";

const store = useAppStore();

store.setCss(* {

    padding = 0;

    margin = 0;

});

</script>

Putting It All Together




<template>

    <div class="grid h-screen grid-cols-8 overflow-hidden bg-slate-800">

        <div class="h-screen col-span-4 overflow-hidden border border-gray-300">

            <div v-html="compiledCode"></div>

        </div>

        <div

            class="flex flex-col col-span-4 overflow-hidden border border-gray-300 grow-0 shrink basis-full"

        >

            <div

                class="overflow-hidden border border-gray-300 grow-0 shrink basis-1/2"

            >

                <div class="h-full overflow-auto">

                    <HtmlEditor />

                </div>

            </div>

            <div

                class="overflow-hidden border border-gray-300 grow-0 shrink basis-1/2"

            >

                <div class="h-full overflow-auto">

                    <CssEditor />

                </div>

            </div>

        </div>

    </div>

</template>

<script setup>

import { computed } from "vue";

import HtmlEditor from "@/components/HtmlEditor.vue";

import CssEditor from "@/components/CssEditor.vue";

import { useAppStore } from "@/stores/app";

const store = useAppStore();

const compiledCode = computed(() => {

    return 

        &lt;style&gt;</span><span class="p">${</span><span class="nx">store</span><span class="p">.</span><span class="nx">css</span><span class="p">}</span><span class="s2">&lt;/style&gt;

        </span><span class="p">${</span><span class="nx">store</span><span class="p">.</span><span class="nx">template</span><span class="p">}</span><span class="s2">

;

});

</script>

Results

Create project with Laravel 10 and Vue 3

medilies — Wed, 26 Jul 2023 19:12:20 +0000

Start a new Laravel project:



laravel new laravel-vue-app --git
cd laravel-vue-app

Install Vue:



npm i vue@next
npm i @vitejs/plugin-vue

Edit vite.config.js:



import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";
import * as path from "path";

export default defineConfig({
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "./resources/js"),
        },
    },
    plugins: [
        laravel({
            input: "resources/js/main.js",
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

alias will allow us to import files referring to them from the root of /resources/js folder.

I like to rename resources\js\app.js to resources\js\main.js and this is what I put initially in it:



import "@/bootstrap";
import "../css/app.css";

import { createApp } from "vue";

import App from "@/App.vue";

createApp(App)
    .mount("#app");

This is a bare-bone resources\js\App.vue



<template>
    <section class="flex flex-col h-screen bg-gray-900">
        foo
    </section>
</template>

<script setup>

</script>

Now edit Laravel to serve the SPA.

The following route will serve the SPA for URL paths that do not start with /api:



<?php

use Illuminate\Support\Facades\Route;

Route::get('/{path}', fn () => view('app'))
    ->where('path', '(?!api).*');

This is resources\views\app.blade.php. The SPA will be rendered inside of <div id="app"></div>.



<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel</title>

    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />

    @vite('resources/js/main.js')
</head>

<body class="antialiased">
    <div id="app"></div>
</body>

</html>

Now you can serve your app.



php artisan serve



npm run dev

Starting a Laravel9 APIs with ReactJS project made easy (Including Tailwind3)

medilies — Sat, 05 Mar 2022 21:22:07 +0000

Laravel9 x ReactJs x Tailwind3 x Sanctum

Creating the Laravel project

laravel new lxr
cd lxr

Set the database and .env file

Installing Sanctum (For simple authentication)

composer require laravel/sanctum
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrate

Installing React

npm install
npm install --save-dev react react-dom

Edit webpack.config

mix.js("resources/js/app.js", "public/js")
    .react()
    .extract(["react"])
    .postCss("resources/css/app.css", "public/css", []);

Add <script src="{{ asset('js/manifest.js') }}"></script> <script src="{{ asset('js/vendor.js') }}"></script> <script src="{{ asset('js/app.js') }}"></script> in this order to the bottom of <body></body>
Do npm run dev
Create the folder resources\js\components which will contain React components

Installing Tailwind

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Edit ressources\css\app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Edit tailwind.config.js

module.exports = {
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.jsx",
        "./storage/framework/views/*.php",
        "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
};

Edit webpack.config (Again)

mix.js("resources/js/app.js", "public/js")
    .react()
    .extract(["react"])
    .postCss("resources/css/app.css", "public/css", [
        require("postcss-import"),
        require("tailwindcss"),
        require("autoprefixer"),
    ]);

npm run watch

Add <link rel="stylesheet" href="{{ asset('css/app.css') }}"> to <head></head>

Wrap-up

An overview of what we did is:

Starting a fresh Laravel project.
Installing laravel/sanctum.
Installing ReactJs.
Installing Tailwind 3 and configuring it.
Configuring Mix in Webpack to process ReactJS and Tailwind.

A minimal Blade file will look like

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    <title>Laravel React</title>
</head>
<body class="bg-slate-800">

    <div id="root"></div>

    <script src="{{ asset('js/manifest.js') }}"></script>
    <script src="{{ asset('js/vendor.js') }}"></script>
    <script src="{{ asset('js/app.js') }}"></script>
</body>
</html>