DEV Community: Akhmad Rizki Prayoga

Setup Astro With Supabase and Prisma

Akhmad Rizki Prayoga — Fri, 15 Nov 2024 09:43:42 +0000

First, you must Install Astro on your Laptop or PC. You can run this command on your terminal npm create astro@latest. before that, you must have NodeJs version min. v18.17.1 or v20.3.0. If your version is v19 please upgrade to v20 because v19 is not supported 🥲.

After that, you just name it your project whatever you want.
Oke, if installation is already finished. Next, you just install the Supabase dependencies on your Astro Project. We just run this command on your terminal npm install @supabase/supabase-js

The next step is to update .env file and env.d.ts

.env file
---
SUPABASE_URL=""
SUPABASE_ANON_KEY=""
DATABASE_URL=""
DIRECT_URL=""

src/env.d.ts
---
...
interface ImportMetaEnv {
  readonly SUPABASE_URL: string;
  readonly SUPABASE_ANON_KEY: string;
  readonly DATABASE_URL: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

actually, the two files above are automatically added from the first time you create the project.

Then you can make a folder lib inside src then make a file supabase.ts

then put this code inside the file

import { createClient } from "@supabase/supabase-js";

export const supabase = createClient(
  import.meta.env.SUPABASE_URL,
  import.meta.env.SUPABASE_ANON_KEY
);

Oke, next you must have SUPABASE_URL etc, so you can signup/sign-in on Supabase
If you have already logged in Supabase next you just Create a Project

To get supabase_url anon_key and database_url you just go to Project Setting like this

Go to Database Tab then copy the Connection String

You just change [YOUR-PASSWORD] to your database password.
the thing you need to pay attention to is on the tab Mode is chosen Transaction

then you must add ?pgbouncer=true&connection_limit=1 in the last of Database Url. So the final URL like this
postgresql://postgres.ojusknxqhzlydwyioarw:[YOUR-PASSWORD]@aws-0-ap-southeast-1.pooler.supabase.com:6543/postgres?pgbouncer=true&connection_limit=1

To get DIRECT_URL you just change Mode from Transaction to Session then you just copy

Next, to get the SUPABASE_URL and SUPABASE_ANON_KEY you just click API menu from the sidebar then copy Project Url for SUPABASE_URL and Project API Keys, anon, public for SUPABASE_ANON_KEY

Remember, all the credentials you must set for the best practice in .env file

Congratulation!! Your Astro project is successfully connected with Supabase. But before that, you must make sure that all is well.
The way is to create a table directly from Supabase.

You just go to the Database tab in the sidebar and click that

after that, click the table. then create a new table

for the default, column ID and createdAt is already set. You just add a column whatever you want.
For learning purposes, uncheck the enable the RLS

The next is go to index.astro file then adjust a little bit like this for test store data to Supabase.

---
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';

import { supabase } from '../lib/supabase';

const { data, error } = await supabase
  .from('posts') // this your database name
  .insert({ title: 'This Title', description: 'this description' })
  .select()

console.log(data, error);
---

Check your console or you just see in Supabase Database from they Dashboard site, make sure the data has been entered.

You can see the database configuration from Supabase documentation here

if successfully entered, next try to show in the browser.
Modify index.astro file again

---
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';

import { supabase } from '../lib/supabase';

const { data, error } = await supabase
  .from('posts')
  .select()
---

<Layout title="Welcome to Astro.">
    <main>
        <h1>Welcome to <span class="text-gradient">Astro</span></h1>
        <ul role="list" class="link-card-grid">
            {data?.map((post) => (
                <Card
                    href={`/post/${post.id}`}
                    title={post.title}
                    body={post.description}
                />
            ))}
        </ul>
    </main>
</Layout>

Oke, Congratulations you can store and show data from Supabase in your Astro project 🎉

NEXT!!!
We can try to use Prisma for the ORM in this project.

First, install the prisma in your Astro project, run this command in your terminal npx prisma then npx prisma init

after finish, you will see the Prisma folder in your project.
Open the schema.prisma then make the model, like example

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider  = "postgresql"
  url       = env("DATABASE_URL")
  directUrl = env("DIRECT_URL")
}

model posts {
  id          Int      @id @default(autoincrement())
  title       String
  description String
  createdAt   DateTime @default(now())
}

after that run this command to generate a migration
npx prisma migrate dev --name init

Update the index.astro file

---
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';

import { supabase } from '../lib/supabase';

import {PrismaClient} from '@prisma/client';
const prisma = new PrismaClient();

// get all tags
const posts = await prisma.tag.findMany();
---

<Layout title="Welcome to Astro.">
    <main>
        <h1>Welcome to <span class="text-gradient">Astro</span></h1>
        <ul role="list" class="link-card-grid">
            {posts?.map((post) => (
                <Card
                    href={`/post/${post.id}`}
                    title={post.title}
                    body={post.description}
                />
            ))}
        </ul>
    </main>
</Layout>

Setup Laravel With Inertia

Akhmad Rizki Prayoga — Mon, 29 Apr 2024 15:12:39 +0000

First you must have Laravel Application, or you can create new
Laravel project in your computer.

in this case I using composer create project to install Laravel app and Laravel version 11.
composer create-project laravel/laravel {your-project-name}
you can see in the documentation of laravel Install Laravel App

after that. Install the Inertia dependencies
composer require inertiajs/inertia-laravel

then setup the Inertia middleware using the Artisan command.
php artisan inertia:middleware

after success, setup the middleware. in laravel 11 there is no more HTTP Kernel file in Http folder and all necessary configurations have been moved to the bootstrap/app.php file.

add the middleware in the inside withMiddleware

use App\Http\Middleware\HandleInertiaRequests;
...
->withMiddleware(function (Middleware $middleware) {
        $middleware->web(append: [
            HandleInertiaRequests::class,
        ]);
    })

open fresh laravel project in your favorite code editor, I use VSCode

this the folder structures

Congratulation your first Laravel inertia is ready to use but, is not finished yet. You need to organize it a little.

You need setup the client side first

you can use Vue, React, or Svelte. in this case I'm using Vue
npm install @inertiajs/vue3 and you need to install Vitejs/plugin-vue too npm install @vitejs/plugin-vue

Edit your vite.config.js file
you can coppy this 👇

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins: [
        vue(),
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

Rename your `resources/views/welcome.blade.php` file to `app.blade.php`. after that edit to like this

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    @vite('resources/js/app.js')
    @inertiaHead
  </head>
  <body>
    @inertia
  </body>
</html>

Edit your `resources/js/app.js` file

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
    return pages[`./Pages/${name}.vue`]
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

You can try to make Vue page

create folder inside js folder like this

you can input your Vue code inside, this the example

<template>
    <div>
        <h1>Home Page</h1>
    </div>
</template>

<script setup>
// Add your script here
</script>

For the test make a router and controller

create controller with this command
php artisan make:controller HomeController

edit routes/web.php

<?php

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

Route::get('/', [HomeController::class, 'index']);

Open HomeController.php

make index function to return the component with inertia

public function index()
    {
        return inertia('Home');
    }

Running your app

Running your app with this command
php artisan serve
and npm run dev

Last, you just open your favorite browser to open your Laravel App
then type localhost:8000 in url

After that you can styling or whatever you want.
Thanks.

creedits:
Inertia Documentations: https://inertiajs.com/
Laravel Documentations: https://laravel.com/docs/11.x

Update Node Version use NVM

Akhmad Rizki Prayoga — Sat, 04 Dec 2021 04:10:28 +0000

nvm ls-remote
nvm ls
nvm install (choose version)

to use
nvm alias default (version)
nvm use (version)

#MyNotes Make Active Menu When Clicked in Vue Js

Akhmad Rizki Prayoga — Tue, 08 Dec 2020 03:26:06 +0000

Untuk membuat menu active secara dinamis seperti gambar diatas, pertama kita harus membuat active menu secara manual terlebih dahulu. Jika sudah bisa membuat seperti gambar diatas maka kita selanjutnya perlu membuat sebuah fungsi yaitu:

1) Buat hari diatas kedalam array yang mana nanti akan kita looping

...
setup() {
    const days = ref<string[]>(["selasa","kamis","jumat","summary"])
    return {
      days
    }
}

2) Sekarang kita implement ke dalam navigationnya, kita looping array nya.

<div class="dashboard__nav_days">
 <span v-for="(dayData, i) in days" :key="i">
   <span class="dashboard__nav_days__item">{{ dayData }}</span>
 </span>
</div>

3) Jika sudah berhasil terlooping, selanjutnya buat default value untuk dikasi default active nya. Sekaligus kita buat ketika hari yang lain di click active nya ikut pindah

...
setup() {
    const days = ref<string[]>(["selasa","kamis","jumat","summary"])
    const day  = ref<string>("selasa")
    return {
      days,
      day
    }
}

<div class="dashboard__nav_days">
 <span v-for="(dayData, i) in days" :key="i">
  <span v-if="day === dayData" class="dashboard__nav_days__item dashboard__nav_days__item--active">{{ dayData }}</span>
  <span v-else @click="day = dayData" class="dashboard__nav_days__item">{{ dayData }}</span>
 </span>
</div>

4) Nah sekarang buat Get value hari yang sedang active. Rencananya buat di kirim kepada API buat return data sesuai hari

import { ..., watch } from 'vue';
...
setup() {
    const days = ref<string[]>(["selasa","kamis","jumat","summary"])
    const day  = ref<string>("selasa")
    watch(day, (day, prevDay) => {
      // console.log(day, prevDay)
    })
    return {
      days,
      day
    }
}